一、布局相关属性
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