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:位置,数字,百分比