愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

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