CSS 盒子模型与布局

1. 盒子模型的宽度计算

1.1 通过设置 box-sizing 属性来设置盒子模型

• 普通盒子: box-sizing: content-box (W3C 标准盒子)
  • 宽度计算: width + padding + border
• 怪异盒子: box-sizing: border-box (IE 使用的盒子)
  • 宽度计算: width
• margin 也算作总宽度

2. margin 纵向重叠

• 纵向 margin 会选取最大值而不是相加
• 水平 margin 会相加

3. margin 负值的问题

• margin-top 和 margin-left 为负值时，元素会向上或左移动
• margin-bottom 和 margin-right 为负值时，本元素不变，它下面或右侧的元素会靠近当前元素

4. BFC (Block Formatting Context)

• 一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素

4.1 形成 BFC 的条件

• float 不设置为 none
• position 设置为 absolute 或 fixed
• overflow 不是 visible
• display 是 flex 或 inline-block 等

4.2 浮动带来的高度塌陷问题

• 子元素全部浮动时，父元素无法感知到子元素的高度，导致父元素高度塌陷 (高度为 0)

4.3 清除浮动 (clearfix)

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
/* 兼容低版本 */
.clearfix {
    *zoom: 1;
}

• 伪元素是不存在的元素，::after 会在当前元素后面添加一个伪元素，::before 是在前面
• clear 属性用于清除浮动，防止浮动元素与非浮动元素重叠

5. 浮动布局

5.1 圣杯布局

• 
• HTML 中中间盒子先写，实现中间盒子先渲染
• 让三个盒子都浮动，最外层盒子设置 padding，中间盒子设置 width
• 左边盒子: margin-left: -200px; position: relative; right: 200px
• 右边盒子: margin-right: -200px
• 中间盒子: 设置 margin-right: -200px 使右盒子向左移动

5.2 双飞翼布局

• 中间部分有一个外盒子，中间部分设置左右 margin
• 左盒子: margin-left: -100%
• 右盒子: margin-left: -200px

6. 清除浮动的方法

• 使用 overflow: hidden 可能会导致一些元素不能正常显示，比如右上角的 x
• 使用伪元素进行清除 clearfix

7. flex 布局

7.1 容器常用属性

• flex-direction: 主轴方向，column 或 row
• justify-content: 元素在容器主轴方向上的排列，center, space-around 等
• flex-wrap: 换行 (默认不换行，展示在一行，宽度可能被压缩)
• align-items: 在副轴的排列，center
• align-content: 在副轴上多组元素的排列，center, space-around 等

7.2 子元素常用属性

• order
• align-self: 修改自身所在的位置，不影响其他元素

8. 元素居中

8.1 行内元素居中

• 在外层容器设置
  • text-align: center
  • line-height: 外层容器高度

8.2 块级元素居中

• 水平居中: margin: 0 auto
• 水平垂直居中
  • 外层盒子: position: relative 内部盒子: position: absolute; transform: translate(-50%, -50%);
  • 外层盒子: display: flex; justify-content: center; align-items: center
  • 外层盒子: display: table-cell; text-align: center; vertical-align: middle 内部盒子: display: inline-block

9. 样式单位

• px: 根据分辨率不同而不同
• em: 相对于当前元素的字体大小 (font-size) 的倍数
• rem: 相对于 HTML 中 font-size 的倍数
• vh: 当前视高的百分之一
• vw: 当前视宽的百分之一

10. 移动端布局方案

• 流式布局 (百分比): 尺寸赋值为百分比，不能改变字体大小
• flex 布局 (弹性盒子): 一般与其他布局一起使用
• rem + 媒体查询/flexible.js (已弃用): 根据设备分辨率设置 HTML 中 font-size (rem) 的值
• rem + vw: 直接将 rem 设置为 n*vw

11. Sass 的作用

• CSS 中设置变量，可以嵌套 CSS
• 混合: 相当于函数
• 加减法运算

12. 图标库的使用 (阿里巴巴的 iconfont)

• 字体图标: 轻量级，灵活，兼容性高
• 颜色单调: 字体颜色只有单色或渐变色

13. 事件: 用户的交互就是事件

13.1 DOM 事件流

• 捕获阶段: 从文档 -> html -> body -> 找到事件所在的元素
• 目标阶段: 元素执行事件 (如点击)
• 冒泡阶段: 如果该元素有事件，那么它的父元素中如果有相同事件也会被触发

13.2 阻止冒泡

• event.stopPropagation(): 阻止这个元素之后的冒泡事件 (当前元素的事件仍然会被触发)

13.3 event.target 和 this 的区别

• event.target: 点击的最近的元素，可以把事件绑定给父元素，然后通过 event.target 得到真正被点击的子元素
• this: 当前执行事件的元素

13.4 阻止默认事件

• event.preventDefault(): 阻止默认事件 (如 herf 的默认跳转)

14. 移动事件

• 点击有 300ms 延迟，需要判断是否双击
• 长按上层元素可能会触发下层的点击事件
• 使用 fastclick.js 解决