前端开发基础之

CSS进阶

CaelumTIan@SIPC115

这节课讲什么？

• 基础盒模型
• 视觉格式化模型

盒模型基础

盒模型

width

• 指定 content box宽度
• 百分数相对于父容器（包含块）的content box宽度
• 无继承性

height

• 指定 content box  高度
• 百分数相对于父容器（包含块）的content box高度
• 只有当包含块的高度不依赖该元素时，百分比高度才生效
• 无继承性

margin

• 外边距
• margin-top、margin-right、margin-bottom、margin-left
• 缩写：margin
• 百分数：相对于父元素width
• margin 中 auto的计算

外边距折叠（正负）

<style>
    .a {
      background: orange;
      height: 100px;
      margin-bottom: 100px;
    }
    .b {
      background: purple;
      height: 100px;
      margin-top: 100px;
    }
</style>

<div class="a"></div>
<div class="b"></div>

padding

• 内边距
• padding-top、padding-right、padding-bottom、padding-left
• 缩写：padding（上，右，下，左） 两两相对应
• 百分数：相对于父元素width

border

• 边框
• border-width: 1px
• border-style: solid | dashed | dotted
• border-color: #f00
• border: 1px solid #ccc
• border-left-width: 4px
• 不会继承

浏览器是如何排版的

视觉格式化模型

块级元素(Block-level Elements)

• 会被格式化成块状的元素
• 例如p、div、section等
• 将display设置为block、list-item、table使元素变为块级

行级元素（内联元素）

• 不会为其内容生成块级框
• 让其内容分布在多行中
• display设置为inline, inline-block, inline-table使元素变为行级

水平格式化

垂直格式化

display属性

• block 块级
• inline 行级
• inline-block 元素本身是行级，为其内容生成块级框
• none 在排版时将元素忽略

定位方案

• 正常流
• 浮动
• 绝对定位

排版流（文档流）

• 除根元素、浮动元素和绝对定位元素外， 其它元素都在排版流之内
• 而根元素、 浮动和绝对定位的元素会脱离文档流
• 在排版流中块级元素独占一行；行级元素可以水平并排摆放

浮动（float）

• 浮动可以实现将多个块级框并排显示
• 浮动元素从排版流中脱离，被漂浮在容器左边或右边
• 浮动元素不会影响其后面的块级框
• 但是浮动元素后面的行级元素会避开浮动元素

clear

• 指定元素哪一边不能与之前的浮动框相邻
• clear: left | right | both
• 清除浮动的常用方案

position

• static，非定位，默认值
• relative，相对定位（相对自己）
• absolute，绝对定位，相对非static父级元素定位

自动计算

• 这些值都可以不指定
  • top
  • left
  • right
  • bottom
  • width
  • height
• 如果冲突了怎么办?

position:fixed

• 相对于Viewport定位
• 不会随页面滚动发生位置变化

堆叠层次

• z-index指定元素在所属堆叠上下文中的层次
• 堆叠上下文的形成
  • z-index值为非auto的定位元素

绘制顺序

• 每个堆叠上下文中， 从下到上的顺序显示：
• background, boder
• z-index为负值的定位元素
• 正常块级元素
• 浮动
• 行级元素
• z-index为0
• z-index为正数