盒模型

盒模型

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：上 右 下 左 // 上下 左右
• 填充区+内容区 = ”填充盒 padding-box
• padding：简写属性

3、边框：border

• 边框 = 边框样式 + 边框宽度 + 边框颜色
• 边框样式：border-style
• 边框宽度：border-width
• 边框颜色：border-color

边框 + 填充区 + 内容区 = 边框盒
4、 外边距：margin（盒子与盒子之间的距离）

• 边框到其他盒子的区域

盒模型应用

改变宽高范围

默认情况下，width盒height设置是容宽
面构重构师：将psd文件（设计稿）制作成静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置宽度和高度的时候，设置的是内容盒
解决方法：
1、精确计算
2、box-sizing // 改变宽高的影响范围

改变背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过background-clip进行修改

溢出处理

overflow。控制内容溢出边框盒
overflow：scroll生成滚动条
overflow：hidden隐藏
overflow：auto表示自动，需要时就可以出现，不需要就不会出现

断词规则

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

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

空白处理

单行处理
white-space ： nowrap 不换行
overflow：hidden，溢出隐藏
text-overflow：ellipsis，文本溢出用原点来代替