`
qq26853659
  • 浏览: 14642 次
社区版块
存档分类
最新评论

CSS浮动Layout

    博客分类:
  • CSS
 
阅读更多
clear版本:CSS1  目的:设置浮动元素  常用
语法:
clear : none | left |right | both 
参数:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象

float版本:CSS1 目的:设置元素浮动方向 常用
语法:
float : none | left |right
参数:
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边

visibility  目的:隐藏和显示元素 常用
语法:
visibility : inherit | visible | collapse | hidden
参数:
inherit :  继承上一个父对象的可见性
visible :  对象可视
hidden :  对象隐藏
collapse :  主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。IE5.5尚不支持此属性。

clip版本:CSS2  目的:对象进行裁剪 常用
语法:
clip : auto | rect ( number number number number )
参数:
auto :  对象无剪切
rect ( number number number number ) :  依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切

overflow 版本:CSS2  目的:为元素添加滚动条
语法:
overflow : visible | auto | hidden | scroll
参数:
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

overflow-x               目的:为元素添加水平滚动条
语法:
overflow-x : visible | auto | hidden | scroll
参数:
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象宽度的内容
scroll :  总是显示横向滚动条

overflow-y               目的:为元素添加垂直滚动条
语法:
overflow-y : visible | auto | hidden | scroll
参数:
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的高度。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象高度的内容
scroll :  总是显示纵向滚动条

display版本:CSS1/CSS2 目的:设置对象作为表格显示
语法:
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
参数:
block :  CSS1 块对象的默认值。用该值为对象之后添加新行
none :  CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :  CSS1 内联对象的默认值。用该值将从对象中删除行
compact :  CSS2 分配对象为块对象或基于内容之上的内联对象
marker :  CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :  CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item :  CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in :  CSS2 分配对象为块对象或基于内容之上的内联对象
table :  CSS2 将对象作为块元素级的表格显示
table-caption :  CSS2 将对象作为表格标题显示
table-cell :  CSS2 将对象作为表格单元格显示
table-column :  CSS2 将对象作为表格列显示
table-column-group :  CSS2 将对象作为表格列组显示
table-header-group :  CSS2 将对象作为表格标题组显示
table-footer-group :  CSS2 将对象作为表格脚注组显示
table-row :  CSS2 将对象作为表格行显示
table-row-group :  CSS2 将对象作为表格行组显示




分享到:
评论

相关推荐

    CSS教程:闭合CSS浮动元素的几种方法

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种...

    css-layout-workshop-march2014:CSS 布局研讨会的培训材料,2014 年 3 月

    您应该已经知道 CSS 是如何工作的,浮动的作用是什么,以及类的含义。 如果您需要更新,请尝试 Shay Howe 的。 自主学习 您将在projects/文件夹下找到带有练习的文件夹。 它们被命名为01_flexbox 、 02_regions等。...

    CSS教程:弄懂闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种...

    layoutit bootstrap离线生成器

    先从左侧布局设置选项卡拖动行列布局样式到右侧容器, 然后将基础组件拖到右侧容器内, 通过拖动完成排布, 部分组件通过右上角浮动... 生成的代码并不包含基础css和js, 你还需要引入jquery和bootstrap的css和js基础代码.

    清除网页浮动CSS的做法

    网页制作Webjx文章简介:闭合浮动元素也就是清除浮动,在webjx.com多次被提及,然后很多CSSer对此并不是非常了解,往往未闭合浮动元素,造成页面... 闭合浮动元素也就是清除浮动,在webjx.com多次被提及,然后很多CSS

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    css-layouts-tutorial-exercises

    CSS布局练习 和 欢迎使用CSS Layouts交互式教程,在这一系列练习中,您将学习和练习: 显示与位置 显示:Flex属性。 浮动资产。 中心内容。 侧边栏布局。...在开始之前......完整的自动分级CSS练习...$ cd css-layout

    flexbox-guide::high_voltage:有关Flexbox和响应式设计概念的指南。 只需根据需要设置属性,然后复制CSS代码。 :party_popper:

    :party_popper:目录关于Flexbox-Guide Flexbox-Guide是一个为Web开发人员和编码新手学习CSS Flexbox Layout开发的网站。 该网站可用于学习或生成代码。 只需根据需要安排弹性项目,然后将CSS复制到代码中。 在“ ...

    Ext.ux.callout.Callout:CSS样式的浮动标注容器,带有可选箭头,可与Ext JS 4.0+一起使用

    一个CSS样式的浮动标注容器,带有可选箭头,可与Ext JS 4.0+一起使用。 这对于创建: 提示覆盖 交互式标注窗口/弹出框 关于 Ext.ux.callout.Callout可以轻松配置为: 在各个位置显示其关联的标注箭头,包括: 上...

    Css深刻理解width:auto的用法

    前言 看了我上篇文章的人可能觉得我小题大做,css2有什么好看的?...这个最容易出现在table-layout为auto表格中,我们不控制表格单元格宽高的时候,当每一列都放不下的时候,会把文字截断,然而手机号,英

    用CSS建设网站的实例

    本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴。 目录: 第一步:规划网站,本教程将以图示为例构建网站; 第二...

    css中间自适应布局的5种解法详解

    前言 在做页面时,我们往往会碰到页面布局相关的内容,面试时也经常会被问到,那么今天我就来总结一下关于页面布局的内容。...方案一(float浮动) <section class='layout float'> <style> .lay

    间距浮动与对齐的最佳方案

    一:让layout的间距和图片与图片之间的间距相等!看图帮助理解! 左右方向都可以应用!...看这个地址的方法:http://snipplr.com/view/7393/css-multi-columns-layout/崩溃般的设置… 原帖地址:http://weilaixu

    guss-layout:低级响应式布局模式

    bower install guss-layout --save @import ' path/to/_row.scss ' ; @import ' path/to/_columns.scss ' ; // Uncomment to output utility classes // @include guss-row-utility; // @include guss-columns-...

    wxss学习系列《一》定位(position),布局(Layout)

    2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇,虽然小程序里面对于css...

    鎏嫣宫守护wxss学习系列《一》定位(position),布局(Layout)

    2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇,虽然小程序里面对于css...

    leetcode电脑下载-Developer-Roadmap-with-Resources:“先做,然后做对,然后做得更好。”-艾迪奥斯曼尼

    leetcode电脑下载开发人员路线图与资源 目标:填补我的技能空白,成为全栈 ...Layout 悬停和加载器: 媒体查询 媒体布局 展示 定位 浮动 CSS 弹性盒 CSS 网格 SVG Javascript 基础 ======== 语法和基本结构 DO

    css实现三栏布局的几种方法及优缺点

    前言 三栏布局,顾名思义就是两边固定,中间自适应。...一、浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layout</title> <style media=

    百度地图毕业设计源码-xck:前端工作日常总结

    Hi,大家好,这里是我的工作日常记录(总结)部分内容来自于大佬,欢迎大家参观,主要内容分为:HTML(layout)、CSS、JS、性能优化问题、算法、网络安全、HTTP、浏览器、React 、闲聊问题。 HTML(layout)| 区域 ...

    flex-layout:基于 Flexbox 的网格布局抽象

    弹性布局 基于 Flexbox 的网格布局抽象。 没有浮动、清除或空白注释。 BYO 宽度和媒体查询以使其具有响应性。 受和启发。

Global site tag (gtag.js) - Google Analytics