HTML中盒子问题

子盒子

边框盒

• 由border、padding、content组成，是检查器默认显示的尺寸。

• 背景颜色覆盖默认覆盖边框盒，可通过background-clip属性修改

  background-clip：border-box; 覆盖边框盒
  background-clip：padding-box; 覆盖填充盒
  background-clip：contentr-box; 覆盖内容盒
  

填充盒

*由padding。content组成。严格意义上，overflow（溢出），指溢出填充盒。

    overflow：hidden；溢出部分隐藏（隐藏padding以外的内容）
    overflow：inherit；强制继承父级设置
    overflow：scroll；垂直和水平方向显示滚动条
    overflow：auto；有溢出的方向显示滚动条

内容盒

• 由content组成，默认情况下，width和height属性，是指内容盒的宽度和高度。

• width和height的设置范围可通过box-sizing属性修改

  box-sizing：border-box；IE默认（border、padding、content）
  box-sizing：content-box；谷歌默认（content）
  

outline属性

• 外边框（轮廓），用法和border一样，不占像素（布局时使用）
• 使用outline时，只能同时对四条边同时设置。

---

视觉格式化模型

• 它是CSS的一种机制，它规定了页面中的多个盒子如何布局。

视口

• 可视窗口，通常指浏览器的可视区域。不同设备可视区域不同。

包含块

• 每个元素都有一个包含块，它是指元素在页面中摆放的区域。通常情况下，元素的包含块是它父元素的内容块。包含块会随父元素的内容盒移动。

元素定位 体系：

• 常规流，浮动，绝对定位
• 任何一个元素，必须属于其中的一种定位体系。
• 不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
• 默认情况下，元素为常规流，块盒占满整个可用空间，自动换行。行盒紧挨显示，直到占用完整个可用空间，再换行。

块级元素在不同体系中自动值计算

常规流：普通流，文档流，普通文档流等

水平方向

常规流盒子水平方向的尺寸必须等于包含块的宽度

• margin-left、right，width全取自动，width占满整个空间
• margin一侧自动，一侧设置固定值，width设置自动，margin自动一侧会被width占满
• margin两侧设置固定值，width自动，width占满剩余空间 margin两侧自动，width固定值，width自动居中 margin两侧，width都固定，且三者之和小于父级content，则margin-right变为自动

垂直方向

• margin为auto：0px
• height为auto；适应内容的高度