盒模型与布局相关属性

盒模型与布局相关属性

1.布局相关属性　　

　　所有与布局相关的属性如下：

　　float：该属性控制组件是否符合浮动；以及如何实现浮动，该属性可以设置为left，right。来控制向　　　　哪里浮动；（通过float可以实现多栏布局）

　　clear：该属性与float相反，该属性可以设置为none，left，right，both。（通过clear可以实现换

　　　　　　行）

　　　　none：两边都允许出现浮动组件；

　　　　left：不允许左边出现浮动组件；

　　　　right：不允许右边出现浮动组件；

　　　　both：两边均布允许出现浮动组件；

　　clip：该属性用于对元素进行裁剪，可以设置为auto与rect两个值，auto是自动进行的，而rect是将　　　　元素当成一个矩形进行分割；

　　　　rect（A B C D)其中A是上边界相对于父元素的上边界的距离，B是右边界相对于父元素的左边

　　　　　　界的距离，C是下边界相对于父元素的上边界的距离，D是左边界相对于父元素的左边界的

　　　　　　距离；

　　overflow：当组件不足以显示内容时，通过设置overflow可以进行对内容进行控制，可以设置为：

　　　　visible：既不剪切也不添加滚动条，这是默认值；

　　　　auto：属性将制定自动添加滚动条；

　　　　hidden：属性将自动裁剪不够显示的内容；

　　　　scroll：将总是显示滚动条；

　　　　overlow-x：通过设置hidden将只显示竖直反向的滚动条；

　　　　overflow-y：通过设置hidden将只显示水平方向的滚动条；

　　　　visibility：设置为hidden后将不再显示出来，但是空间还是保留着；

　　　　display：设置为hidden后将不再显示，而且空间也将被占据；

2.盒模型与display属性

　　两种基本的盒模型

　　　　inline：该元素不会占据一行，没有宽度与高度，例如<span../>与<a../>;

　　　　block：该元素可以设置高度与宽度，例如<div../>与<p../>

　　display:

　　　　　　none:与visibility相似，当设置为none时，可以将将其隐藏，但是空间将被占据；

　　　　　　inline-block：是inline与block的综合体，既不会占据一行，还可以设置宽度与高度；

　　　　　　inline-table：默认占据一行，但是可以设置高度与宽度；

　　　　　　与表格相关的盒模型：

　　　　　　　　table：组件将显示为表格；

　　　　　　　　table-caption：组件将显示为表格的标题；

　　　　　　　　table-cell组件将显示为单元格；

　　　　　　　　table-column（-group）组件将显示为单元格列（组）；

　　　　　　　　table-row（-group）组件将显示为单元格的行（组）；

　　　　　　　　table-header：组件将显示为单元格的表头；

　　　　　　　　table-footer：组件将显示为单元格的页脚；

　　　　　　list-item：该模型将会将组件显示为类似于<ul../>的列表形式；

　　　　　　run-in盒模型：组件将显示在它 后面的元素中；

　　　　　　box：将实现多栏布局

　　　　　　　　box-orient：设置对齐方式，可以设置为horizontal与vertical；

　　　　　　　　box-ordinal-grup：子元素的显示顺序；

　　　　　　　　box-flex：设置子元素的自适应宽度的比例；　　

3.对盒模型添加阴影

　　box-shadow它将包含5个值，分别是：

　　　　hOffset：水平方向的偏移；

　　　　vOffset：竖直方向的偏移；

　　　　blurLength：控制阴影的模糊程度；

　　　　scaleLengt：控制阴影的缩放程度；设置为正数则是放大，设置为负数则是缩小；

　　　　color：控制阴影的颜色；

4.css3的多栏功能

　　column涉及到几个属性

　　　　column-width：栏目宽度；

　　　　column-count：栏目数；

　　　　column-rule-(width/style/color)：指定栏目的分隔条的宽度，线型，颜色；

　　　　column-gap：指定栏目间的间距；

　　　　column-fill：控制栏目的高度

　　　　　　auto：自动随内容变化；

　　　　　　balance：自动与最多的一列对齐；