盒模型

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-bottom
   padding：简写属性
   padding：转换成 上右下左

如果上和下，左和右的值分别相等那就只需要书写两组像素值，第一组代表上和下，第二组代表左和右；若四个值都相当，那就可以只书写一个值
填充区+内容区=填充盒 padding-box

3.边框 border
边框=边框样式（border-style）+边框宽度（border-width）+边框颜色（border-color）
solid表示粗实线 dashed表示虚线
border-style、border-width、border-color也是简写属性

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

4. 外边距 margin
   边框与其他盒子的距离
   和padding一样
   margin-top、margin-left、margin-right、margin-bottom
   速写属性margin
   

盒模型的应用

改变宽高范围

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

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

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

1. 精确计算：用量取的实际数据减去边框盒border和填充盒padding-left的宽高为内容盒的宽高
2. css3：通过box-sizing属性 更改width和height为content-box、border-box的宽高。

改变背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过background-clip进行修改，具体和box-sizing类似

溢出处理

溢出内容在默认情况下是可见的
overflow,控制内容溢出边框盒后的处理方式

溢出部分是可见的overflow:visible;

表示溢出部分隐藏  overflow:hidden;

表示生成滚动条
xy分别表示生成横向滚动条和纵向滚动条
auto,表示自动当你需要的时候，滚动条才会出现。
overflow-x:auto，overflow-y
overflow:scroll;

断词规则

用处不大，了解即可`
在盒子不够大，需要进行换行时，从哪里断词的规则

word-break:会影响文字在什么位置被截断换行
normal:普通，CJK字符(中文，日文，韩文)文字位置截断，非CJK字符(如英文)，在单词位置截断。
break-all:截断所有，所有字符都在文字处截断,无论中文还是英文，在所有位置都会被截断
keep-all:保持所有，所有文字都在单词之间截断

word-break：keep-all
汉字句子会在空格处被截断

空白处理

表示溢出部分做不换行处理 即空白折叠仍会发生，但不会换行

white-space:nowrap;

对于单行文本，表示文本溢出后，（显示不完的地方）对溢出部分用三个点表示

text-overflow: ellipsis;

pre里面的元素不会发生空白折叠

white-space:pre;
这个属性所选中的不会进行空白折叠
white-space:nowrop;
表示空白折叠仍会发生但不会换行