[CSS学习笔记]盒子模型

MDN官方文档(来自goodle翻译，部分不通顺语句有修改)

布局文档时，浏览器的渲染引擎根据标准CSS基本框模型将每个元素表示为一个矩形框。CSS确定这些框的大小，位置和属性（颜色，背景，边框大小等）。

每个盒子由四个部分（或区域）组成，分别由它们各自的边缘定义：内容边缘(content)，填充边缘(padding)，边框边缘(border)和边距边缘(margin)。

以内容边缘为边界的内容区域包含元素的“真实”内容，例如文本，图像或视频播放器。它的尺寸是内容宽度（或content-box width）和内容高度（或content-box height）。它通常具有背景色或背景图像。

如果该box-sizing属性被设置为content-box（默认值），并且如果元素是块元件，所述内容区域的大小可以明确地与所定义的width，min-width，max-width，height，min-height，和max-height特性。

以填充边缘为边界的填充区域扩展了内容区域，以包括元素的填充。它的尺寸是padding-box width和padding-box height。

填充的厚度由所确定的padding-top，padding-right，padding-bottom，padding-left，和速记padding属性。

在边境地区，由边缘边界为界，扩展填充区域包括元素的边界。它的尺寸是border-box width和border-box height。

边框的厚度由border-width和速记border属性确定。如果该box-sizing属性设置为border-box，边界区域的大小可以明确地定义width，min-width，max-width，height，min-height，和max-height属性。如果在框上设置了背景（background-color或background-image），则背景会延伸到边框的外边缘（即以z顺序在边框下方延伸）。可以使用background-clip的css属性更改此默认行为。

边距区域，由所述余量边缘为界，延伸边界区域以包括用于将元素从它的邻居分开的空白区域。它的尺寸是margin-box width和margin-box height。

边距区域的大小由所确定的margin-top，margin-right，margin-bottom，margin-left，和速记margin属性。当边距折叠发生时，空白区域没有被明确定义，因为边距由盒子之间共享。

最后，请注意，对于未替换的内联元素，占用的空间量（对线条高度的贡献）由line-height属性确定，即使边框和填充仍显示在内容周围。

个人笔记

1、CSS将页面中的所有元素都设置为一个矩形的盒子，每一个盒子都由以下几个部分组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。

2、盒子边框中三个要素缺一不可，分别是：border-width（边框的宽度）、border-color（边框的颜色）、border-style（边框的样式）。以border-width为例子，border-width的值指定四个方向上边框的宽度(上 右 下 左：顺时针旋转，下同)。

border简写属性，通过该属性可以同时设置边框所有样式，且没有顺序要求：

      border：solid 10px orange

3、内容区和边框之间的距离是内边距（padding），内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上。盒子可见框的大小由内容区、内边距和边框决定。

4、外边距（margin）不影响盒子可见框的大小，但会影响盒子的位置。元素在页面中按照自左向右的顺序排列，所以默认情况下设置左和上外边距会移动元素本身，而设置下和右外边距会移动其他元素。

margin会影响盒子实际占用空间。

5、盒子水平方向的布局
元素在其父元素中水平方向的位置由以下几个属性决定：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right，要求上述七个元素的和要等于父元素的宽度，如果不相等，则会出现过度约束，其意思就是浏览器会自动调整属性的值。

那么如何调整属性的值呢？如果上述七个属性值中没有出现auto的，浏览器会自动调整margin-right的值以满足等式。其中，只有三个值可以设置为auto，分别是width、margin-left、margin-right。浏览器会自动调整auto的那个属性的值以使等式成立。如果将宽度和外边距设置为auto，宽度会调整为最大，外边距为0；如果两个边距设置为auto，两者设置为相同的值(即等分)；如果三个值都为auto，同理宽度取最大，两个边距都取为0。

6、垂直方向的布局
默认情况下父元素的高度被内容撑开。若子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性可以处理父元素溢出的元素。
overflow:visible hidden scroll(生成两个滚动条,通过滚动条来查看完整的内容) auto(按需生成滚动条)

7、垂直外边距的折叠
兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。特殊情况:一正一负时，则取两者的和；如果都是负值，取绝对值较大的；兄弟元素之间外边距的重叠，对开发有利，所以不需要处理。

父子元素间相邻外边距，子元素会传递给父元素。父子外边距的折叠影响页面的布局，可以使用padding或者margin灵活处理，当然这种方法并非最好。

8、行内元素的盒模型
行内元素不支持设置宽度和高度，行内元素可以设置padding，垂直方向padding不会影响页面的布局，同理border、margin也是一样。

属性display：用来设置元素显示的类型
display可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素（既可以设置宽度和高度又不会独占一行，但要谨慎使用）
table 将元素设置为表格
none 元素不在页面中显示

visibility 用来设置元素的显示状态
visibility可选值：
visible 默认值，在页面正常显示
hidden 隐藏不显示，但是依然占据页面的位置

9、浏览器的默认样式
浏览器默认样式的存在会影响页面的布局，通常情况下编写网页时必须要去除默认样式。
例如使用margin：0；padding：0；
又或者用专门的css文件清除样式。

10、最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距