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-right（右边距）、padding-top、padding-botton

padding:简写属性
padding：上 右 下 左

填充区＋内容区=填充盒

3. 边框 border
   边框=边框样式+边框宽度+边框颜色

1)边框样式 border-style

2)边框宽度 border-width

3)边框颜色 border-color

边框+填充区+内容区=边框盒

4. 外边距 margin
   边框到其他盒子的距离
   margin-top、margin-left、margin-reight、margin-botton
   速写属性margin

二、盒模型应用

1、改变宽高范围

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

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

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

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

2、改变背景覆盖范围

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

可以通过backgroud-clip进行修改

3、溢出处理

overflow，控制内容溢出边框盒的处理方式，默认情况下是看得见，还有hidden,scroll…

4、断词规则

word-break,影响文字在声明位置会被截断换行

1. normal:普通，CJK字符（文字位置截断），非CJK字符（单词位置截断）
2. break-all:截断所有。所有字符都在文字处截断
3. keep-all:保持所有。所有文字都在单词之间截断。

5、空白处理

/* 只能控制单行文本 */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

三、行盒盒模型

常见的行盒：包含具体内容的元素

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

1、显著特点

1. 盒子沿着内容沿伸
2. 行盒不能设置宽高

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

3. 内边框（填充区）
   水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

4. 边框
   水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

5. margin
   水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

2、行块盒

display：inline-block 的盒子,常用来做分页。

a{
    background:red;
    color:#fff;
    display:inline-block;
    width:100px;
    text-align:center;
    height:40px;
    line-height:40px;
}

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

3、空白折叠

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

4、可替换元素和非可替换元素

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

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

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

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