标签：
布局相关属性
float:控制目标组件是否浮动以及如何浮动，设置浮动后，该组件被当做块组件处理，即相当于display属性为block；可选的属性值
left:指定对象向左浮动
right:指定对象向右浮动
clear:设置组件的左、右是否哪边不允许出现浮动对象。可选属性值：
none:默认值，两边都允许出现浮动组件
left:不允许左边出现浮动组件
right:不允许右边出现浮动组件
both:两边都不允许出现浮动组件
clip:控制对元素进行裁剪
auto:不裁剪
rect(a,b,c,d):定义一个矩形，目标组件只有处于矩形区域中的部分才会显示
overflow:设置组件不够容纳内容时的显示方式，可选属性值：
visible:不剪切内容也不添加滚动条(默认值)
auto:自动添加滚动条
hidden:溢出内容自动裁剪
scroll:总是显示滚动条
overflow-x:只对x横轴方向上设置溢出内容显示方式，可选值同上
overflow-y:只对y纵轴方向上设置溢出内容显示方式，可选值同上
visibility:设置目标对象是否显示，可选值：
visible:显示
hidden:隐藏，但是元素所占空间会保留，此处与display不同
通常使用float来设计基于div元素的导航菜单、多栏布局等效果
盒模型和display属性：
display:改变组件默认的盒模型，可选值有：
block：组件默认占据一行，即自动换行，允许通过CSS设置宽度、高度。类似div,p等元素
inline：默认允许一行放置多个组件，即使CSS设置了宽度、高度也不会起作用。类似span，a元素
none：设置对象隐藏，占用的页面空间也会释放。
inline-block:不会占据一行也可以通过CSS设置高度和宽度
table:组件显示为表格
table-caption:组件显示为表格标题
table-cell:组件显示为单元格
table-column:组件显示为表格列
table-column-group:组件显示为表格列组
table-header-group:组件显示为表格头部分
table-footer-group:组件显示为表格页脚部分
table-row:组件显示为表格行
table-row-group:组件显示为表格行组
list-item:组件转换为类似<ul>的列表元素，list-style-type设置前面的黑色形状(square黑色小方块)
run-in:类似inline模型，组件希望显示在它后面的元素内部；比如，如果run-in组件后跟着一个block模型元素，则run-in元素将被放入后面的元素中显示
对盒添加阴影
box-shadow:为所有盒模型的元素整体增加阴影，包含的属性值：
hOffset:控制阴影在水平方向的偏移
vOffet:控制阴影在垂直方向的偏移
blurLength:控制阴影的模糊程度
scaleLength:控制阴影的缩放程度
color:控制阴影的颜色
box-shadow也可用于表格、单元格元素，为其添加阴影
添加多栏布局
在CSS，或者style中设置column-count，后面跟一个数值
columns:复合属性，指定栏目的宽度，数量
column-width:指定每个栏目的宽度
column-count:指定栏目数
column-rule:复合属性，指定各个栏目之间的分隔条
column-rule-width:指定栏目之间分隔条的宽度
column-rule-style:设置分隔条的线型(none,dotted,dashed,solid,double,groove,ridge,inset,outset)
column-rule-color:设置分隔条的颜色
column-gap:指定各栏目之间的间距
column-fill:控制栏目的高度
auto:各栏目高度随内容自动变化
balance:统一成为内容最多的那一栏的高度
盒模型显示属性：
box-orient:设置box盒模型里子元素的排列方向，可选值
horizontal:水平排列
vertical:垂直排列
box-ordinal-group:设置子元素的显示顺序
box-flex:设置子元素自适应宽度的比例
前端笔记十一，盒模型与布局相关属性
标签：
原文地址：http://www.cnblogs.com/likaopu/p/5170608.html
