盒模型
-
页面中的所有元素都被看做是一个盒子,这个盒子包括了元素的内容content,内边距padding,边框border,外边距margin。
-
padding
,是内容区周围的空间。给元素应用背景则会作用域元素内容和内边距。主要用于分隔内容,使内容不至于散布到背景的边界影响美观。 -
border
,是在内边距外侧的一条框线。 -
margin
,是在边框外侧,围绕盒子可见部分之外的透明区域,用于控制元素之间的距离。 -
outline
,类似于border,会在border外侧画一条线,但并不属于盒子的一部分,不会影响盒子的宽高。一般用于辅助画线。 -
总结一个盒子从里到外的顺序就是:content>padding>border>margin
盒子大小
-
默认情况(
content-box
),元素盒子的width
和height
设置的就是内容content盒子的宽高。在默认情况下,改变边框和内边距都不会影响内容盒子的大小,但会影响整个元素盒子。 -
通过修改
box-sizing
改变计算盒子大小的方式,该属性默认值为content-box
,设置的宽高都会应用于内容区。当修改为border-box
时,设置的width
和height
将会包括内边距和边框(注意,不包括外边距)。
content-box
下,盒子总长度 = width + (padding + border + >margin) * 2border-box
下,盒子总长度 = width + margin * 2
- 使用百分比作为元素内外边距计算单位时,是基于包含块(父级元素)的宽度来计算的。
可见格式化模型
-
有两种盒子:块级盒子(block box)和行内盒子(inline box)
-
块级盒子沿垂直方向堆叠,盒子在垂直方向上的间距由它们的上、下边距决定。
-
行内盒子沿着文本流水平排列,随文本换行而换行。可以设置水平方向的内边距、边框、外边距,但盒子高度不受垂直方向上的外边距、内边距、边框影响。给行内盒子设置宽高也无效
匿名盒子
- 在屏幕上看到的一切都属于某个盒子,比如,在一个div中的文本时一个匿名块盒子,在p段落中的三行文本,每一行都是一个行内盒子。
外边距折叠
-
垂直方向的两个外边距相遇时,会折叠成一个外边距,折叠后的外边距高度等于两者中较大的那个高度。
-
外边距折叠值发生在常规文本流中块级盒子上,行内盒子、浮动盒子、绝对定位盒子的不会有外边距折叠。
包含块
-
静态定位或者相对定位:包含块的边界就计算到最近的父元素,该父元素的display属性值必须能够提供类似块级的上下文。
-
绝对定位:包含块是距离它最近的定位祖先元素(position不为static的祖先)。如果没有定位祖先,则相对于文档的根元素HTML定位,文档的根元素叫作起始包含块(initial containing block)
-
固定定位:包含块是视口(viewport)
定位
- 相对定位
relative
:该元素还会在原来的地方,通过设置top/right/bottom/left
,让元素相对于初始位置平移一段距离。 - 绝对定位
absolute
:该元素会脱离文档流,在文档中不占用原来的空间。文档中的其他元素会重新定位,当做绝对定位元素不存在。 - 固定定位
fixed
:从属于绝对定位,同样会脱离文档流,区别在于固定定位的包含块是视口(viewport),一般用作创建始终停留在窗口相同位置的浮动元素。
浮动
-
浮动盒子可以向左或者向右移动,知道外边界接触到包含块的外边沿,或接触到另一个浮动盒子的外边沿。跟绝对定位一样,浮动元素也会脱离常规文档流。另外,如果不设置浮动元素的宽度,则浮动元素会收缩为适应其中内容的最小宽度。
-
跟在浮动元素后面的行盒子会缩短,从而为浮动元素留空,造成文本环绕浮动盒子的效果。
-
给包含行盒子的元素应用
clear属性
,能阻止行盒子环绕在浮动盒子外面。clear
,指定盒子的哪一侧不应该紧挨着浮动盒子。
格式化上下文
- 块级格式上下文自动包含浮动。当一个元素具备了触发新块级格式化上下文的条件(比如overflow属性值不是visible的元素,绝对定位的元素),并且挨着一个浮动元素时,它会忽略自己边界必须接触自己的包含块边界的规则,从而达到清除浮动或包含浮动元素的目的。