在网页布局的时候我们会用到盒模型。那什么是盒模型呢？顾名思义，盒子是用来装东西的，网页中的盒子模型也是用来装东西的。在页面中每一个HTML元素都可以看作一个盒子，而我们要展现的内容就是盒子的内容。
盒子模型的介绍
盒子模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin。
盒模型的大小
盒子的大小指的是盒子的宽度和高度，在默认情况下width和height只能设置内容的大小，不包括border，margin，padding。但是有的HTML元素会有默认的margin或padding。这也是为什么明明没有设置页面会和我们设置的有区别的原因。
盒子高度计算
盒子高度 = 上margin + 上border +上padding + 内容height +下margin +下border +下padding
盒子宽度计算
盒子宽度 = 左margin + 左border +左padding + 内容width +右margin +右border +右padding
盒子模型的属性
margin
margin是盒子模型的外边距，也就是盒子和盒子之间的距离。它是完全透明的，开发者只能设置它的距离，margin分为上左下右。
margin的属性写法
四值法：设置四个属性值，分配方向上、右、下、左。
margin ：10px 10px 10px 10px ；
// 上 左 下 右三值法：设置三个值分配给上、左右、下。
margin：10px 10px 10px；
// 上 左右 下二值法： 设置两个值，分配给上下、左右。
margin ： 10px 10px；
// 上下 左右 单值法：设置属性值只有一个，分配方向上右下左，四边的值相同
margin-top //上边距
margin -left //左边距
margin - bottom //下边距
margin-right //右边距属性和属性要用空格隔开
padding
padding是盒子的内边距，它是内容和border之间的距离，和margin不同的是，它还可以设置背景颜色。同样，它也分为上左下右。
padding的属性
四值法：设置四个属性值，分配方向上、右、下、左。
padding ：10px 10px 10px 10px ；
// 上 左 下 右三值法： 设置三个值分配给上、左右、下
padding：10px 10px 10px；
// 上 左右 下二值法： 设置两个值分配给上下、左右
padding：10px 10px
// 上下 左右单值法：设置属性值只有一个，分配方向上右下左，四边的值相同
padding-top //上边距
padding -left //左边距
padding - bottom //下边距
padding-right //右边距width和height
作用：设置可以添加元素内容的区域的宽度和高度
如果一个元素不添加width和height 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width和height 属性的值会自动撑满父元素的 width和height 区域，如果是 <span> 元素等不需要独占一行的，其 width和height属性的值是内部元素内容自动撑开的宽度。<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。
border
border是内边距和外边距之间的，它可以设置的内容相较于margin和padding更多一些，它的属性值由宽度和线型和线的颜色。
border的属性
按照属性值的类型划分
线宽：border-width
线型：border-style
颜色：border-color
线宽 border-width：
作用：设置边框线的宽度。属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法。
四值法：设置四个属性值，分配方向上、右、下、左。
border-width：10px 10px 10px 10px；
// 上 左 下 右三值法： 设置三个属性值，分配方向上、左右、下
border-width：10px 10px 10px
// 上 左右 下 二值法：设置二个属性值，分配方向上下、左右。
border-width：10px 10px
// 上下 左右 单值法：设置属性值只有一个，分配方向上右下左，四边的值相同
border-width：10px ；线型border-style ：
定义border的线型，通过改变属性值来设置需要的线性
border-style的属性
| 属性值 | 注释 |
| none | 定义无边框 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状虚线 |
| double | 双线 |
| groove | 3D凹槽边框 |
| ridge | 3D垄状边框 |
| inset | 3D内容凹陷效果 |
| outset | 3D凸出效果 |
四值法：设置四个属性值，分配方向上、右、下、左。
border-style：none solid dashed dotted ；
// 上 左 下 右三值法：设置三个属性值，分配方向上、左右、下。
border-style：none solid dashed ；
// 上 左右 下 二值法：设置两个属性值，分配方向上下、左右。
border-style：none solid ；
// 上下 左右 单值法：设置属性值只有一个，分配方向上右下左，四边的值相同。
border-style：none ；颜色border-color：
作用：设置边框的颜色。 属性值：颜色名或颜色值，整体类似 padding 综合属性写法。
属性值：它的属性值为色值，可以用rgb，颜色英文，16进制的形式
四值法：设置四个属性值，分配方向上、右、下、左。
border-color：#000 #111 #222 #333
// 上 左 下 右三值法： 设置三个属性值，分配方向上、左右、下。
border-color：#000 #111 #222
// 上 左右 下 二值法：设置两个属性值，分配方向上下、左右。
border-color：#000 #111
// 上下 左右 单值法：设置属性值只有一个，分配方向上右下左，四边的值相同。
border-color：#000
// 上下左右 border的属性简写
border：10px solid #000；
// 宽度 线型 颜色单独设置一条border的简写
border-top: 10px solid #000 ;上
border-left: 10px solid #000 ; 左
border-bottom: 10px solid #000 ; 下
border-right: 10px solid #000 ; 右盒子阴影
在盒子的组成成分之外，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取透明
设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上，如果上层有透明度较低的部分，会与下层的颜色重叠，合成新颜色。
怪异盒模型
怪异盒模型又称IE盒子模型，怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高
属性值：
box-siziing：content-box 可以把怪异盒子变成标准盒子 box-siziing：bober-box 可以把标准盒子变成怪异盒子
怪异盒模型和标准盒模型
怪异盒子 边框和内边距都是往自己内部扩展的 标准盒子 边框和内边距都是往外撑的
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
