CSS 盒模型

盒模型

• box：盒子，每个元素在页面中都会会生成一个矩形区域（盒子，容器）

  • 在游览器按F12或者右击检查可以在Elements的Styles找到盒模型

• 盒子类型

1. 行盒，display等于inline的元素

   • 行盒在页面中不换行、块盒独占一行
   • 常见的行盒：span、a、img、video、audio

2. 块盒，display等于block的元素

   • 游览器默认样式表设置的块盒：容器元素、h1~h6、p

盒子的组成部分

• 无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是:

1. 内容 content

   • width、height，设置的是盒子内容的宽高
   • 内容部分通常叫做整个盒子的内容盒 content-box

2. 填充 padding

   • 盒子边框到盒子内容的距离
     • padding-left 左边
     • padding-right 右边
     • padding-top 上面
     • padding-bottom 下面
     • 速写属性padding:1px 1px 1px 1px;
       • 四个值：分别代表上右下左
       • 三个值：分别代表上(左右)下
       • 两个值：分别代表(上下)(左右)

3. 边框 border

• 边框 = 边框样式 + 边框宽度 + 边框颜色

1. 边框样式：border-style
2. 边框宽度：border-width
3. 边框颜色：border-color
4. 速写属性: 宽度，样式，颜色

边框 + 填充区 + 内容区 = 边框盒 border-box

4. 外边距 margin

• 边框到其它盒子的距离

  • margin-left 左边
  • marging-right 右边
  • marging-top 上面
  • marging-bottom 下面
  • 速写属性marginmargin:1px 1px 1px 1px;
    • 四个值：分别代表上右下左
    • 三个值：分别代表上(左右)下
    • 两个值：分别代表(上下)(左右)

改变宽高范围

• 默认情况下width和height设置的是内容盒宽高
• 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
• 解决方案

1. 精确计算
2. 使用CSS3属性:box-sizing 允许我们在元素的总宽度和高度中包含填充和边框。
   • 可选值 border-box
   • 可选值 content-box

背景覆盖范围

• 默认情况下，背景覆盖边框盒
• 可以通过background-clip进行修改
  • 可选值 border-box
  • 可选值 padding-box
  • 可选值 默认值 content-box

溢出处理

• overflow控制内容溢出边框盒后的处理方式
• overflow:hidden溢出隐藏

断词处理

• word-brack会影响文字在什么位置被截断换行
• normal普通。 CJK字符（文字位置阶段），非CJK字符（单词位置截断）
• break-all截断所有。所有字符都在文字处截断
• keep-all保持所有。所有文字都在单词之间截断

空白字符

• white-soace:nowrap 空白字符的处理规则是不换行
• text-overflow:ellipsis 三个圆点

行盒的盒模型

• 常见的行盒：包含具体内容的元素
  span、strong、em、i、img、video、audio、a

显著特点

1. 盒子沿着内容延申

2. 行盒不能设置宽高

   • 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整

3. 内边距（填充区）

   • 水平方向有效，垂直方向仅会影响背景，不会占据空间

4. 边框

   • 水平方向有效，垂直方向仅会影响背景，不会占据空间

5. 外边距

   • 水平方向有效，垂直方向仅会影响背景，不会占据空间

行块盒

• display：inline-block

1. 不独占一行
2. 盒模型中所有的尺寸都有效

空白折叠，发生在行盒内部 和 行盒之间（行块盒）之间

可替换元素 和 非可替换元素

• 大部分元素，页面上现实的结果，取决于元素内容，称为非可替换元素
• 少部分元素，页面上显示的结构，取决于元素属性，称为可替换元素
• 可替换元素：img、video、audio
• 绝大部分可替换元素都是行盒
• 可替换元素类似于行快盒，盒模型中所有尺寸都有效