CSS——盒模型

盒模型

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

盒子类型：

1. 行盒：display属性等于inline的元素
2. 块盒：display属性等于block的元素

行盒在页面中不换行，块盒独占一行

display默认值为inline

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

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都有下面几个部分组成，从内到外分别是：

1. 内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

2. 填充 padding

padding-left、padding-top、padding-bottom、padding-right

padding简写属性：上 右 下 左

padding:100px 100px 100px 100px
上下一样/左右一样 padding:100px 100px
上下左右都一样 padding：100px

填充区+内容区=填充盒 padding-box

3. 边框 border

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

border-style=border-top-style border-right-style border-bottom-style border-left-style
border-width=border-top-width border-right-width border-bottom-width border-left-width
order-color=border-top-color border-right-color border-bottom-color border-left-color

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

4. 外边距 margin

边框到其他盒子的距离

盒模型应用

改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒。

1. 精确设计
2. CSS3：box-sizing

改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

溢出处理

overflow，内容溢出边框盒外面的

断词规则

word-break，会影响文字在什么位置被截断换行

normal：普通。CJK字符（文字位置截断）；非CJK字符（单词位置截断）

break-all：截断所有。所有字符都在文字处截断

keep-all：保持所有。所有文字都在单词之间截断

空白处理

whitespace：nowrap

text-overflow：ellipsis

只能控制单行文本，多行文本的处理要用JS处理。

行盒的盒模型

常见的行盒：包含具体内容的模型

span、strong、em、i、img、video、audio

显著特点

1. 盒子沿着内容延伸

2. 行盒不能设置宽高

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

3. 内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

4. 边框

水平方向有效，垂直方向不会实际占据空间。

5. 外边距

水平方向有效，垂直方向不会实际占据空间。

行块盒

display：inline-block的盒子

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

空白折叠

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

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

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio

绝大部分可替换元素均为行盒。

可替换元素类似于行块盒，盒模型中所有尺寸都有效。