简述
CSS 盒模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。 !(/CSS盒模型/CSS盒模型2.png)
盒模型分为 W3C 标准盒模型和 IE 盒模型：
-
W3C 标准盒模型，又称为 content-box，属性 width,height 只包含内容 content，不包含 border 和 padding。
width = 内容的宽度
height = 内容的高度 -
IE 盒模型，又称为 border-box，属性 width,height 包含 border 和 padding，指的是 content+padding+border。
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
盒模型的相关边框：
- width 和 height 设置了内容框的宽/高;
- padding 家族属性设置内边距的宽度;
- border 家族属性设置边界的宽度、样式和颜色;
- margin 家族属性设置包围 CSS 盒子外部区域的宽度，这个属性推开布局中其他的 CSS 盒子;
边框 border
-
边框颜色：border-color： !(/CSS盒模型/边框颜色.png)
四条边框写颜色时的顺序是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 -
边框粗细：border-width 包含 Thin（细）、medium（中间）、thick（粗）、像素值等。
- border-top-width:5px;
- border-right-width:10px;
- border-bottom-width:8px;
- border-left-width:22px;
四条边框写粗细时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
-
边框样式：border-style 包含 none（没有）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽边框）、ridge（垄状边框）、inset（嵌入边框）、outset（外凸边框）等。
- border-top-style:solid;
- border-right-style:solid;
- border-bottom-style:solid;
- border-left-style:solid; 四条边框写类型时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
-
同时设置边框的粗细、样式和颜色。
border:1px solid #3a6587;
border: 1px dashed red;
外边距 margin
- margin-top、margin-right、margin-bottom、margin-left、margin。
例如：
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
四个外边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 - 外边距的妙用
margin:0px auto;
网页居中对齐的必要条件：块元素并且必须固定宽度。
内边距 padding
- padding-left、padding-right、padding-top、padding-bottom、padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px; padding-bottom:8px;
四个内边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
默认边距
在 HTML5 中很多元素都有默认的外边距或者内边距。 比较特殊的是 div，没有外边距或者内边距，其他的都有。
去掉边距的方法有：
margin:0;
padding:0;
（清除默认样式）
清除所有元素的边距方法：*{ margin:0; padding:0; } （*就是表示包括了所有的元素）
溢流（overflow）
当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。
该属性有几个可能的取值，不过最常用的是：
- auto：如果内容太多，那么超出盒子大小的内容会被隐藏，滚动条显示出来，从而可以让用户滚动看到所有内容。
- hidden：如果内容太多，那么超出盒子大小的内容被隐藏了。
- visible：如果内容太多，超出盒子大小的内容显示在盒子之外（这通常是默认的行为）。
改变盒模型
一个盒子的总宽度是它的 width， padding-right，padding-left，border-right 和 border-left 属性之和。 在某些情况下比较麻烦（例如，要是您想要一个宽度为 50％的盒子（box），边界（border）和内边距（padding）以像素为单位怎么办？）为了避免这种问题，可以使用属性 box-sizing 调整盒模型。 用值 border-box，它将盒模型更改为这样新的模型：
!(/CSS盒模型/border-box.png)
我们将设置两个相同的 div 元素，赋予每个元素相同的 width，border 和 padding。 我们还将使用一些 JavaScript 脚本来打印出每个盒子宽度的计算值（最终屏幕上的像素值）。 唯一的区别是底部的盒子我们给出 box-sizing: border-box，顶部的盒子留着默认行为。
<div class="one"></div>
<div class="two"></div>
html {
font-family: sans-serif;
background: #ccc;
}
.one,
.two {
background: red;
width: 300px;
height: 150px;
padding: 20px;
border: 10px solid black;
margin: 20px auto;
}
.two {
box-sizing: border-box;
}
效果：
第一个框的宽度和高度等于 content + padding + border。 然而，第二个框的宽度和高度等于通过 CSS 设置在 content 的宽度和高度。 padding 和 border 并没有添加到总宽度和高度上; 反而，他们占用一些内容的空间，使内容更小，并保持总体尺寸相同。
盒子显示（display）类型
display 可以有很多种不同的值, 其中三种常见的值为 block, inline, 和 inline-block.
- 块盒(block box)是被定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。
- 行内盒（inline box）与块盒相反：它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。
- 行内块盒（inline-block box）介于前两者之间： 它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）。
块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline; 。
圆角边框
border-radius: 20px 10px 50px 30px;
!(/CSS盒模型/圆角边框.png)
四个属性值按顺时针排列，如果只设置两个值的话看对角。
使用 border-radius 制作特殊图形
- 圆形
利用 border-radius 属性制作圆形的两个要点：
- 元素的宽度和高度必须相同；
- 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为 50%。
div{ width: 100px; height: 100px; border: 4px solid red; border-radius: 50%;}div{ width: 100px; height: 100px; border: 4px solid red ; border-radius: 54px; }
2. 半圆形
利用 border-radius 属性制作半圆形的两个要点：
- 制作上半圆或下半圆时，元素的宽度是高度的 2 倍，而且圆角半径为元素的高度值；
- 制作左半圆或右半圆时，元素的高度是宽度的 2 倍，而且圆角半径为元素的宽度值。
上半圆：
div {
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 54px 54px 0px 0px ;
}
!(/CSS盒模型/上半圆.jpg)
下半圆：
div{
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 54px 54px;
}
左半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 54px 0 0 54px;
}
右半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 0 54px 54px 0;
}
盒子阴影
Inset 是内阴影，不设置就是外阴影。
-
此时有 inset
div{ margin: 20px auto; width: 200px; height: 200px; background-color: lightskyblue; box-shadow: inset 20px 30px 3px blue;; }运行结果：
-
此时没有 inset
div{ margin: 20px auto; width: 200px; height: 200px; background-color: lightskyblue; box-shadow: 10px 20px 30px 3px blue; }
