CSS基础 - 页面布局

盒模型

content宽度
1) 块元素width/clientWidth值（CSS3: box-sizing为content-box时）

padding以内的区域
1) background区域

border外边框以内的区域
1) background-color区域；
2) 宽度等于块元素offsetWidth（CSS3: box-sizing为border-box时；IE6）；

margin折叠
1) 场景：垂直相临元素的外边距；父子元素的外边距；同一元素的上下外边距；
2) 条件：没有被非空内容/padding/border/clear分隔开；BFC之间及BFC父子（浮动/inline-block/绝对定位/overflow）不叠加；

无margin/padding
1) 行内非替换元素垂直方向；
2) table无padding，table其它元素无margin；

盒子内布局

块元素
1) 垂直排列
2) 填满包含块的宽度区域

行内元素
1) 水平排列；
2) 非替换元素不能直接设置高宽；
3) 替换元素布局行为类似inline-block；

盒子间布局

浮动
1) 范围：左(右)浮动元素不会超出包含容器的左(右)边界和上边界（负外边距除外），浮动元素会脱离普通流；
2) 层叠：见下文层叠内容；
3) 清除浮动：
效果一：父容器包含浮动元素。方法：父容器生成BFC（例如：设置overflow非visible）；
效果二：相邻块级元素换行排列。方法：增加clear元素；

定位
1) relative：不脱离普通流定位；相对最近上级定位元素的content框定位；
2) absolute：脱离普通流定位；相对最近上级定位元素的padding框定位；
3) fixed：脱离普通流定位；相对页面可视区域定位；

BFC
1) 页面一个独立的类似行级块的空间，与其它元素不发生重叠（定位/负外边距的移动除外）
例： 包含浮动元素，不被浮动元素覆盖，阻止父子元素的margin叠加。
2) 生成条件：
2.1) 浮动；
2.2) 绝对定位；
2.3) inline-block/table-cells/table-captions/flex等非块元素的块盒子；
2.4) overflow非visible；
2.5) 触发hasLayout（IE7及以下）；

IFC
1) 若干行内元素布局的包含区域，这个包含区域框也叫行框；
2) 行框：行框内的行内框的上下边极值确定高度；行内框对齐的依据；vertical-align引起行内框上下偏移，可能会影响行框的高度变化；

3) 字符框（em框）：font-size确定高度；
4) 行内框：line-height确定高度；

表格布局
1) 写法
table/th/tr/td

Grid布局
1) 写法
display: table/table-row/table-column/table-cell/table-caption

Flex布局
1) 写法
display: flex
align-items: stretch/center/flex-start/flex-end
justify-content: stretch/center/flex-start/flex-end
flex-flow: row/column
flex: 1

层叠上下文

概念
1) 页面元素生成了层叠上下文，则子元素按指定的顺序来渲染；
2) 一个层叠上下文内的子元素，作为整体，按顺序一个接一个渲染，渲染过程不会被外部元素的渲染而中断；

产生条件
1) 根元素（HTML）；
2) 定位元素，且z-index不为auto的元素（IE7及以下，只看是否是定位元素）；
3) flex-item元素，且z-index不为auto的元素；
4) opacity小于1的元素；
5) transform属性不为none的元素；

渲染顺序
1) 创建层叠上下文的元素的背景和边界；
2) z-index为负值的子元素；
3) 非定位元素（块元素 > 浮动元素 > 行内元素）；
4) z-index大于等于0的定位元素（按z-index从小到大层叠）；

布局应用

垂直居中对齐
1) vertical-align：
1.1) 单个行内元素：line-heigth与容器高度一致，设置vertical-align:middle；
1.2) 非单个行内元素：对齐元素至少有一个高度占满容器（没有则添加一个额外行级块空元素，设置width:1px;），这个元素设置vertical-align:middle，实现将布局区域的baseline固定在容器的垂直中心下方0.5ex处，其他对齐元素都设置vertical-align:middle；
2) 绝对定位：容器设置position:relative，对齐元素设置position:absolute;top:50%;margin-top:-[元素height/2]px
3) flex布局：容器设置display:flex，对齐元素设置align-items:center;flex-flow:column