整理css基础篇----盒模型（类型+组成+应用+行盒盒模型）

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

一：盒子类型：

1：行盒：
（1）display：inline的元素。
（2）页面中不换行。
（3）常见行盒：包含具体内容的内容如span、a、img、video、audio
2：块盒：
（1）display：block的元素。
（2）页面中独占一行。
（3）浏览器默认样式表设置的块盒：容器元素，h1~h6、P

二：盒子组成部分：

1：内容：content
（1）width、height。设置盒子内容的宽高。
（2）内容部分通常叫整个盒子的内容盒。
2：填充：padding
（1）盒子内容到盒子边框的距离。简写：padding：上右下左！！
（2）内容部分加填充部分为填充盒。
3：边框：border
（1）边框样式（border-style（简写：上右下左））
（2）边框宽度（border-width（简写：上右下左））
（3）边框颜色（border-color默认为字体颜色）。

（4）边框+填充+内容=边框盒
**4：外边距：margin**
（1）简写：上右下左

## 三：盒模型应用
**1：改变宽高范围。**
（1）默认情况下更改的是内容盒的宽高。
		》页面重构师：将psd稿设计为静态页面
（2）衡量设计尺寸的时候，往往使用的是边框盒，但设置的宽高是内容盒
        精确计算：
        Css3：box-sizing
**2：改变背景覆盖范围**
·（1）默认情况下，背景覆盖边框盒。》》》可以通过background-clip进行盒子覆盖选择修改。
**3：溢出**
 （1）overflow：控制内容溢出边框盒子的处理。带值：visible：溢出可见（默认）。hidden：溢出隐藏。scroll：溢出滚动；可控制横向overflow-x、纵向overflow-y。auto：溢出自动处理。
**4：断词规则**（决定字段换行位置）
 （1）word-break，影响文字在什么位置被截断换行。
		 带值：
		 normal：普通，CJK字符（文字位置截断），非CJK字符（词语截断）。
		 break-all：截断所有。不管什么文字都会在换行处文字截断。
		 keep-all：截断所有。不管什么文字会在词语截断
**5：空白处理**（溢出的不换行处理）
 （1）white-space：nowrap；overflow：hidden；text-overflow：ellipsis；
		 其中write-space：pre、normal、nowrap
		 示例：对溢出的文字进行“.....”处理。
		 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200215172116974.png)
 

## 四：行盒盒模型
1：行盒特点：
（1）不能直接设置宽高。调整时应使用字体大小、行高、字体类型来间接调整。
（2）盒子沿着内容延伸（由于行盒一般是是具体撑起来的如span、strong、a）
（3）内边距（填充区）padding。水平方向有效，垂直方向会影响背景但实际不会占据空间。
（4）边框border。水平方向有效，垂直方向会影响背景但实际不会占据空间。
（5）外边距 margin：水平方向有效，垂直方向会影响背景但实际不会占据空间。
2：行块盒
（1）：特点：不独占一行。
display：inline-block。水平排列，可设置宽高。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200215175723932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDUzNTYy,size_16,color_FFFFFF,t_70)


**补充：行盒的垂直对齐**
  vertical_align：位置，数字，百分比