CSS3学习总结——盒模型与布局

一、布局相关属性

1、float: 设置对象浮动后，该对象会被当做块组件处理（相当于display: block，即使display设为其他属性值，display的属性值也依然是block）。浮动HTML组件会漂浮紧紧跟随它的前一个组件，直到遇到边框、padding、margin或另一个块组件为止，属性值：

left/right 表示向左或向右浮动

2、clear: 设置组件的左右是否允许出现浮动现象

none 默认，表示两边都允许出现浮动
left 左边抗浮动（如果自身被迫向左浮动，就拒绝）
right 同理如上
both 两边都不允许出现浮动

3、overflow: 设置当HTML组件不够容纳内容时的显示方式。属性值：

visible 默认，不剪切内容，也不会添加滚动条
auto 超出区域自动添加滚动条
hidden 超出区域隐藏
scroll 总是显示滚动条

4、visibility: 设置隐藏方式，属性值

visible 默认，显示
hidden 如果隐藏后，元素占据的页面空间仍然还在（而display: none则是消失）

二、盒模型

1、常用的盒模型

我们可以把HTML中的区域想象成一个盒子，区域中可以有内容、外边距（margin）、内边距（padding）、边框等，我们把这样子的一个模型称之为盒模型。而CSS主要通过display:来控制盒模型的外观，它的属性值如下：

block 块级元素，默认占据一行，可以通过CSS设置宽度、高度（如<div>、<p>）
inline 行级元素，一行里可以放置多个组件，即使用CSS设置宽高也不会生效（如<span>、<a>）
none 隐藏元素（所占据的区域也消失）
inline-block 不会占据一行，但是可以通过CSS设置宽、高；默认情况下，inline-block采取底端对齐的方式（底部将会位于同一条水平线上），如果想要实现顶部对齐，则添加vertical-align: top
inline-table 默认的<table>属于block盒模型，会独自占据一行（不允许左右出现内容），而inline-table 则允许使<table>的左右出现内容，效果上是何inline-block类似的，只不过它是专门针对<table>标签的，如果要控制对齐方式，也是使用vertical-align
list-item 显示为ul、li的效果
run-in 被放入后面为display: block的盒子中

2、表格相关的盒模型
在CSS3中，为display:提供了众多的属性值，其中有一部分属性值是和表格相关的，比如说我们可以不用使用<table>标签，也能实现tr、td的效果：

table 将目标组件显示为表格
table-caption 将目标组件显示为表格标题
table-cell 显示为td的效果
table-column 显示为表格列的效果
table-row 显示为表格行的效果（相当于tr）
table-column-group 显示为表格列组
table-row-group 显示为表格行组
table-header-group 显示为表格头部分
table-footer-group 显示为表格页脚部分

综合运用如下（将显示一个有表头的，两行两列的table效果）：

<style type="text/css">
.table { display: table; width: 400px; border: 1px solid #CCC }
    .table .caption { display: table-caption; }
    .table .tr { display: table-row; padding: 5px }
    .table .tr .td { display: table-cell; }
</style>

<div class="table">
    <div class="caption">课程表</div>
    <div class="tr">
        <div class="td">周一</div>
        <div class="td">周二</div>
    </div>
    <div class="tr">
        <div class="td">语文</div>
        <div class="td">数学</div>
    </div>
</div>

3、为盒模型添加阴影
CSS3支持为所有的盒模型添加阴影，其通过box-shadow来实现，其语法格式为：

box-shadow: 水平偏移 垂直偏移 模糊距离 阴影大小 阴影颜色

三、CSS3分栏布局与多栏布局

分栏布局

1、使用column-count实现分栏布局

使用column-count: 栏目数，指定当前宽度下分为几个栏目
使用column-width: 栏目宽度，指定每个栏目的宽度
使用columns同时指定栏目数和宽度（相当于上面两个的复合），注意： 栏目数和栏目宽度不是固定不变的，当当前所在容器宽度 > 栏目宽度 × 栏目数 + 栏目间距时，会进行动态调整（有的浏览器会添加栏目数量，有的浏览器会改变栏目宽度）
2、使用column-rule是一个复合属性，可以指定栏目之间的分隔条宽度、样式、颜色
使用column-rule-width，设置栏目之间分隔条的宽度
使用column-rule-style，设置分隔条的样式（none/dotted/dashed/solid/double/groove/ridge/inset/outset）
3、使用column-gap指定栏目之间的间距
4、使用column-fill控制栏目的高度：
auto 各栏目的高度随着内容的多少自动变化
balance 各栏目的高度会统一称为内容最多的那一栏的高度

多栏布局

1、使用display: box实现多栏布局，如：

<style type="text/css">
.pbox { width: 700px; display: -webkit-box; }
    .pbox .box1 { width: 100px; }
    .pbox .box2 { width: 400px; }
    .pbox .box3 { width: 200px; }
</style>

<div class="pbox">
    <div class="box1">a</div>
    <div class="box2">b</div>
    <div class="box3">c</div>
</div>

可以实现从左到右分别占据100px、400px、200px区域的多栏目效果
2、box盒模型还具有如下属性进行控制：

box-orient 设置子元素的排列方向，属性值为horizontal（水平）、vertical（垂直）
box-ordinal-group 设置子元素的显示顺序，如：

.pbox { width: 700px; display: -webkit-box }
    .pbox .box1 { -webkit-box-ordinal-group: 3; width: 100px; height: 40px; background: #777 }
    .pbox .box2 { -webkit-box-ordinal-group: 2; width: 400px; height: 50px; background: #888 }
    .pbox .box3 { -webkit-box-ordinal-group: 1; width: 200px; height: 60px; background: #999 }

会导致页面显示的顺序是c、b、a

box-flex，设置盒子里剩余元素自适应的比例，比如：

<style type="text/css">
.pbox { width: 700px; display: -webkit-box }
    .pbox .box1 { -webkit-box-flex: 5; width: 100px; height: 40px; background: #777 }
    .pbox .box2 { -webkit-box-flex: 3; width: 300px; height: 50px; background: #888 }
    .pbox .box3 { -webkit-box-flex: 2; width: 200px; height: 60px; background: #999 }
</style>

<div class="pbox">
    <div class="box1">a</div>
    <div class="box2">b</div>
    <div class="box3">c</div>
</div>

pbox的宽度是700px，box1+box2+box3的宽度是600px，还剩下100px，然后他们各自的box-flex分别是5、3、2，所以每份的宽度为5+3+2=10，100 / 10 = 10px，再各自乘以比例系数5、3、2，那么100px可以分给box150px，box230px，box320px