css盒子模型

CSS盒子模型是一种描述HTML元素如何在网页上布局的理论框架，每个元素都被视为一个矩形的框，由四个部分组成：

1. 内容（Content）：实际显示的文本、图片或其他生成的内容。
2. 内边距（Padding）：位于内容区四周的空白区域，用于增加元素与内容之间的空间。
3. 边框（Border）：围绕着内容和内边距的线条，可以有不同的样式、宽度和颜色。
4. 外边距（Margin）：边界之外的空白区域，影响元素与其他元素的距离。

盒子的大小指的是盒子的宽度和高度。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

上面是默认情况下的计算方法，另外一种width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值
content-box：默认值，width和height属性分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值

当box-sizing:content-box时，这种盒子模型成为标准盒子模型，当box-sizing:border-box时，这种盒子模型称为IE盒子模型。

margin盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

margin: 100px 200px 300px 400px;

1:上下左右 2:上下/左右 3:上/左右/下 4:上右下左 */

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

开发者也可以直接使用简写属性padding同时设置四条边的宽度，与margin一样。 

border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置

border-width：边界宽度 ；border-style：边界样式 ；border-color：边界颜色；边框粗细border-width：边框粗细；

border-radius：边界半径：边界半径可以使用 px、em 等长度单位，也可以使用百分数。

border-sytle属性可取值： 

• none：定义无边框。
• hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
• dotted：定义点状边框。在大多数浏览器中呈现为实线。
• dashed：定义虚线。在大多数浏览器中呈现为实线。
• solid：定义实线。 double：定义双线。双线的宽度等于 border-width 的值。
• groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
• ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
• inset：定义 3D inset 边框。其效果取决于 border-color 的值。
• outset：定义 3D outset 边框。其效果取决于 border-color 的值。
• inherit：规定应该从父元素继承边框样式。

图形边界是用图形来作为盒子的边界border。在这只图形边界之前，需要先设置一个边界，让图形有显示的空间，同时也可以让不支持图形边界的浏览器显示这个预先设定好的非图形边界。然后，还需要将背景颜色和背景图片限制在填充和内容之内（默认情况下，背景颜色和背景图片作用在border，padding和content，边界的样式浮在背景之上），这需要用到background-clip属性。 

background-clip属性的值
border-box：背景延伸到边框外沿（但是在边框之下）。
padding-box：边框下面没有背景，即背景延伸到内边距外沿。
content-box：背景裁剪到内容区 (content) 外沿。
text：背景被裁剪为文字的前景色(只有chrome支持)。

在图形边界中用到以下属性：

• border-image：设置图形边界，简写属性
• border-image-source：图形的来源（路径），可以接收一个URL函数或一个渐变作为值。
• border-image-slice：图形的切片大小
• border-image-width：图形边界的宽度
• border-image-repeat：定义图片如何填充边框
• border-image-outset：定义边界内部和内边距之间的额外空间的大小

在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样 。

该属性的正规语法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

• inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
• offset-x, offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。
• blur-radius：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
• spread-radius：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大
• color：如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明