CSS盒模型
- 在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。两种盒子模型都包括
padding、margin、border、content。不同之处在于后者的宽高定义的是可见元素框的尺寸（content还包括border和padding），而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如 input 里的 radio、checkbox、button 等元素，如果给其设置 border 和 padding 它们也只会往元素盒内延伸
- 那么我们如何进行选择了，通常我们选择“标准W3C盒子模型”，通过在网页的顶部加上DOCTYPE声明，如下：
<!DOCTYPE html>
- 如果不加DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释你的盒子，而Chrome、Firefox等浏览器会采用标准W3C盒子模型解释你的盒子，这就导致不同的浏览器中显示的样式有差异。反之，如果加上了DOCTYPE声明，那么所有浏览器都会采用标准W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了
-
盒子3D模型，由上到下（由表及里）为：
- 边框（border）
- 内容＋填充（content＋padding）
- 背景图片（background-image）
- 背景颜色（background-color）
- 边界（margin）
- 叠加之后就形成我们所看到了盒子模型的平面图
元素分类
- 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素
-
常用的块状元素有：
<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
1 <address>//定义地址
2 <blockcode> // 定义计算机长代码文本
3 <caption>//定义表格标题
4 <dd> //定义列表中定义条目
5 <div> //定义文档中的分区或节
6 <dl> //定义列表
7 <dt> //定义列表中的项目
8 <fieldset> //定义一个框架集
9 <form> //创建 HTML 表单
10 <h1> //定义最大的标题
11 <h2> // 定义副标题
12 <h3> //定义标题
13 <h4> //定义标题
14 <h5> //定义标题
15 <h6> //定义最小的标题
16 <hr> //创建一条水平线
17 <legend> //元素为 fieldset 元素定义标题
18 <li> //标签定义列表项目
19 <noframes> //为那些不支持框架的浏览器显示文本，于 frameset 元素内部
20 <noscript> //定义在脚本未被执行时的替代内容
21 <ol> //定义有序列表
22 <ul> //定义无序列表
23 <p> //标签定义段落
24 <pre> //定义预格式化的文本
25 <table> //标签定义 HTML 表格
26 <tbody> //标签表格主体（正文）
27 <td> //表格中的标准单元格
28 <tfoot> //定义表格的页脚（脚注或表注）
29 <th> //定义表头单元格
30 <thead> //标签定义表格的表头
31 <tr> //定义表格中的行
-
常用的内联元素有：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
1 <a> // 可定义超链接
2 <abbr> // 表示一个缩写形式
3 <acronym> // 定义只取首字母缩写
4 <b> // 字体加粗
5 <bdo> // 可覆盖默认的文本方向
6 <big> // 大号字体加粗
7 <br> // 换行
8 <cite> // 引用进行定义
9 <code> // 定义计算机代码文本
10 <dfn> // 定义一个定义项目
11 <em> // 定义为强调的内容
12 <i> // 斜体文本效果
13 <kbd> // 定义键盘文本
14 <label> // 自动选中和该label标签相关联的表单控件上
15 <q> // 定义短的引用
16 <samp> // 定义样本文本
17 <small> // 呈现小号字体效果
18 <span> // 组合文档中的行内元素
19 <strong> // 加粗
20 <sub> // 定义下标文本
21 <sup> // 定义上标文本
22 <tt> // 打字机或者等宽的文本效果
23 <var> // 定义变量
-
常用的内联块状元素有：
<img> <input> <textarea> <select> <button> <caption>
1 <caption> // 定义表格的标题
2 <img> // 向网页中嵌入一幅图像
3 <input> // 输入框
4 <textarea> // 多行的文本输入控件
5 <select> // 创建单选或多选菜单
6 <button> // 创建按钮
块状元素（也称块级元素，block）
- 块状元素特点：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行
- 元素的高度、宽度、行高以及顶和底边距都可以设置
- 绝大部分块状元素宽度在不设置的情况下，是它本身父容器的100%（和父容器的宽度一致），除非设定一个宽度，即从左到右撑满页面，独占一行。也有例外的，比如 table，占据一行的空间，但是宽度是根据内容来定的
- 元素触碰到页面边缘时，会自动换行
- 块状元素都具有盒模型的特征
- 设置
display: block就是将元素显示为块状元素
- 例如
a {display: block;}代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点
- 注意：
- 有时我们看到块级元素并没有从左到右撑满页面，那是因为浏览器通常会给标签赋予默认的样式
内联元素（也称行内元素，inline）
- 内联元素特点：
- 和其它元素都在一行上，不会改变HTML文档结构
- 元素的高度、宽度及顶部和底部填充、边距不可设置（左右填充
padding-left``padding-right及左右间距margin-left``margin-right是可以设置的）。但如果设置了顶部、底部的填充、间距，对行内元素的边框、背景色会有影响
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
height: 50px;
background-color: pink;
}
span {
padding: 25px;
margin: 25px;
border: 1px solid red;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>block-1</p>
<span>inline-1</span><span>inline-2</span>
<p>block-2</p>
</body>
- 设置
display: inline就是将元素显示为内联元素
- 例如
div {display: inline;}代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点
- 注意：
- 盒子模型，意思是指具备内容、填充、边框、边界这些属性，行内元素也拥有，所以具备盒子模型的特征，但是默认情况下是无法对宽度、高度以及顶部、底部的填充、间距进行设置的，需要设置
display:block;，改变行内元素以块状元素呈现，从而进行设置
- 块状元素可以包含行内元素和块状元素，行内元素只能包含文本和行内元素。但是在HTML5中，由于使用了内容模型，
<a>元素也可以包含块级元素
<style type="text/css">
* {padding: 0; margin: 0;}
a h4 {
width: 100px;
height: 50px;
background-color: lightblue;
}
a p {
height: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<a href="#">
<h4>Headline text</h4>
<p>Paragraph text</p>
</a>
</body>
内联元素之间的间距问题
- 当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙
- 解决办法：
- 写在一行，之间不要有空格之类的符号
- 使用
font-size，设置内联元素的父元素字体大小为 0，然后设置内联元素字体大小。如下
// 举例
<title>行内元素</title>
<style type="text/css">
body {
font-size: 0px;
}
a, span, em {
background: pink; /*设置a、span、em标签背景颜色都为粉色*/
font-size: 16px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em> // 写在一行
</body>
内联块状元素（inline－block）
- 内联块状元素就是同时具备内联元素、块状元素的特点，代码
display: inline-block就是将元素设置为内联块状元素（CSS2.1新增）
- 内联块状元素特性：
- 默认不占据一行，默认宽度为内容宽度
- 设置的上下 padding、margin、border 占据文档空间
- 水平排列按照 base-line 对齐，且元素之间会存在一个“空”元素的缝隙
- 可以用 vertical-align 设置垂直对齐
- 可以设置 text-align 属性有效
- 会形成一个BFC（块级格式化上下文）
- 总结：一个拥有正常盒模型的行内元素，既拥有 inline 的特点，也有 block 的特性
- 如何去除缝隙？
- 修改 html 不换行
- 父元素设置
font-size: 0;
- 设置负margin值
- 元素设置浮动
- 高度不一致的 inline-block 的对齐，设置 vertical-align ，比如顶端对齐
vertical-align: top;
如何实现浏览器兼容版的inline-block显示？
-
display:inline-block;在IE6、IE7下只有设置在默认显示方式为inline的元素上才会生效，该如何实现兼容IE6、IE7的通用的方式？
- IE6、IE7支持对HTML行内元素设置
inline-block。实际上只是看起来支持而已，IE6、IE7并不识别inline-block这个属性值，只是触发了layout，让行内元素有了inline-block的表征，比如说：行内显示且可设置宽高等等。而对HTML块级元素设置inline-block，也只是触发了layout，对块级元素设置行内块级属性的目的没有达到。
- 那么在IE6、IE7下，怎么实现块级元素的
inline-block属性值设置呢？
- 常见有2种方法：
- 1.先使用
display:inline-block;属性触发块元素，然后再定义display:inline，让块元素呈递为行内对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block;然后再将display设回inline或block，layout不会消失），代码如下：
div {display:inline-block;}
div {display:inline;}
- 2.直接让块元素设置为行内对象呈递（设置属性
display:inline），然后触发块元素的layout（如：zoom:1 或float属性等），代码如下：
div { display:inline-block; _zoom:1; _display:inline;} /* 推荐IE6 */
div { display:inline-block; *zoom:1; *display:inline;} /* 推荐IE6或IE7 */
inline-block底部空隙
- inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐（基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐）；而匿名文本是有行高的，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙
- 解决这个问题有以下几个解决办法：
-
display: block; ：因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效
- 父级的
line-height: 0;：这样使匿名文本与行框的距离为0
vertical-align: top/middle/bottom;
<style type="text/css">
/*
使用 inline-block 元素的时候，常会遇到两个 bug：
1. 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
解决办法：将父元素的 font-size 设置为 0，然后在 inline-block 元素中将 font-size 设置为需要的大小
2. 两个不同高度的 inline-block 元素无法对齐，或者下面无缘无故多出几像素
解决办法：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
*/
.box {
font-size: 0;
background-color: lightblue;
}
.box > img {
vertical-align: top;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
<\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>
盒模型－宽度和高度（width、height）
- 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充里的内容范围
- 因此一个元素实际宽度（盒子的宽度）= 左边界
margin-left＋左边框border-left＋左填充padding-left＋内容宽度width＋右填充padding-right＋右边框border-right＋右边界margin-right
-
width／height可设置的属性值：
-
auto：默认值，浏览器可计算出实际的宽度／高度
-
length：使用px、cm等单位定义宽度／高度
-
%：定义基于包含块（父元素）宽度的百分比宽度／高度
-
inherit：从父元素继承width／height属性的值
- 应用于块状元素和内联块状元素。无继承性
- 引申：
-
max-width：设置元素的最大宽度（不包括填充、边框或页边距）
-
min-width：设置元素的最小宽度（不包括填充、边框或页边距）
-
max-height：设置元素的最大高度（不包括填充、边框或页边距）
-
min-height：设置元素的最小高度（不包括填充、边框或页边距）
- 当最小宽度（高度）大于最大宽度（高度）时，以最小宽高的值为准
- 应用于块状元素和内联块状元素。无继承性
关于Div的宽度与高度的100%设定
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
}
/*这里为什么不是我们预想的那样，.container 高度并没有充满父元素 body*/
/*事实上，由于 .container 中没有内容，我们都看不到它*/
.container{
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
- div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小（宽300高200），在尝试中我们还会发现，div显示会受自身和其上一级div的
padding和margin影响，而其实际宽高不受影响
- 前面总得有个容器说明它的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度，而不是100%。但是只要为html和body设置高度为100%就可以了：
html,body{ height:100%; }，这样之后div会按比例来继承上一级的高度了，仅仅设置的div元素的height: 100%;没有效果
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*有一点需要注意的是，html 元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已*/
/*所以要想实现撑满整个页面，必须显式地设置高度为100%*/
html, body, .container{
height: 100%;
}
body{
background-color: #ccc;
}
.container{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
盒模型－填充（padding）
- 元素内容与边框之间是可以设置距离的，称之为填充。填充也可以分为上、右、下、左（顺时针），该属性可以有1到4个值
// 顺序一定不要搞混
div {padding: 20px 10px 15px 30px;}
// 分开写，如下
div {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
// 如果上、右、下、左的填充都为10px，可以这样写
div {padding:10px;}
// 如果上下填充一样为10px，左右一样为20px，可以这样写
div {padding:10px 20px;}
// 如果上填充是10px，左右一样为20px，下填充为5px，可以这样写
div {padding:10px 20px 5px;}
- 可以设置的值包括：
-
length：规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
-
%：基于父元素的宽度的百分比的填充
-
inherit：从父元素继承 padding值
- 应用于所有元素。无继承性
- 注意：
- 对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，上下内边距不影响行高
- 负值是不允许的
.box a{display: inline-block; width: 50px; height: 25px; padding-top: 40px;｝
// 如上，padding的设置会影响元素实际的显示效果，浏览器中显示 a 元素对象的高为 65px，但实际上，a的height还是为 25px
盒模型－边框（border）
- 边框是一条以空格分隔的集合样式，包括边框粗细（边框宽度）、边框颜色和边框样式，且先后顺序无关
border: border-width border-color border-style
border: 1px solid red;
// border-width：设置一个元素的四个边框的宽度。此属性可以有一到四个值
// 可设置的属性值包括：this（细的边框）、medium（默认值。中等的边框）、thick（定义粗的边框）、length（自定义边框的宽度）、inherit
border-width: thin medium thick 10px;
// 边框的宽度不能为负，不能指定为百分比值
// border-style：设置一个元素的四个边框的样式。此属性可以有一到四个值
// 如果一个边框没有样式，边框将根本不会存在
// 可设置的属性值包括：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-style: dotted solid double;
// border-color：设置一个元素的四个边框颜色。此属性可以有一到四个值
// 可设置的属性值包括：color（通常设为十六进制颜色）、transparent（指定边框的颜色应该是透明的）、inherit
// 默认的边框颜色是元素本身的前景色，即元素的文本颜色；如果元素没有任何文本，则边框颜色是其父元素的文本颜色
// 但是，在表格中，若只设置 border-style，而不设置 border，则边框颜色为黑色，而不与文本颜色相同
// border-style 属性要声明到 border-color 属性之前。元素必须在改变其颜色之前获得边框
border-color: red green;
// 如下面代码为 div标签来设置边框粗细为2px、样式为实心的红色边框
div {
border:2px solid red;
}
上面是border代码的缩写形式，也可以分开写成
div {
border-width: 2px;
border-style: solid;
border-color: red;
}
// border属性除了可以设置上面的三个属性值，还可以设置 inherit（指定应该从父元素继承border属性值）
// 缩写：下面这三种属性都是可以缩写的，顺序依次为 上、右、下、左
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red orange yellow green;
// 注意：boder 它是 border-width、border-style、border-color的缩写形式，针对的是上、右、下、左四个方向的边框，并不能单独为各个方向设置边框样式
border-top/border-right/border-bottom/border-left
border-width:
border-top-width border-right-width
border-bottom-width border-left-width
border-style:
border-top-style border-right-style
border-bottom-style border-left-style
border-color：
border-top-color border-right-color
border-bottom-color border-left-color
border-colors:<color><color>……
border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;
// 只有firefox支持，需要加 -moz- 前缀，且只能四条边分开写，否则无效
- 注意：
- 边框绘制在元素背景之上（有兼容问题）
- 同一元素的边框相交处是斜线
- 可以用边框实现三角形
- 行内元素的上下边框由于不影响行高，不影响布局；左右边框会影响布局
盒模型－边界（margin）
- 设置外边距 margin 会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景。边界也可以分为上、右、下、左（顺时针）
- 填充（padding）与边界（margin）的区别：padding在边框里，margin在边框外
// 顺序一定不要搞混
div{margin:20px 10px 15px 30px;}
// 分开写，如下
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
// 如果上、右、下、左的边界都为10px，可以这样写
div{margin:10px;}
// 如果上下边界一样为10px，左右一样为20px，可以这样写
div{margin:10px 20px;}
// 如果上边界是10px，左右一样为20px，下边界为5px，可以这样写
div{margin:10px 20px 5px;}
- 可以设置的值包括：
-
auto：浏览器计算外边距
-
length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
-
%：基于父元素的宽度的百分比的外边距
-
inherit：从父元素继承 margin值
- 应用于所有元素。无继承性
- 注意：
- 外边距可以应用到行内元素，上下外边距对行高没有任何影响。由于上下外边距实际上是透明的，所以这个声明没有任何视觉效果。左外边距应用到元素开始处；右外边距应用到元素结束处
- 负值是允许的
- 相邻元素（毗邻元素）的的边界会被合并（以值大的为准），更多详见：MDN 外边距合并
引申
// border-radius 圆角边框：是一个最多可指定四个 border -*- radius 属性的复合属性。每个半径的四个值的顺序是：左上角，右上角，右下角，左下角（顺时针）
// 语法： border-radius: <length>{1,4}[/<length>{1,4}]?
// 实例：
border-radius: 10px; // 注意：设置的是圆角直径
border-radius: 10px 20px; // 如果没有反斜杠则水平和垂直方向相等。这里表示左上角和右下角圆角半径为10px，右上角和左下角半径为20px
border-radius: 10px/20px; // 如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。这里表示四个圆角的半径均为 10px/20px
// 圆角单角：
// border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius
border-top-left-radius: 10px 20px; // 圆角根据水平方向的半径和竖直方向的半径来确定。注意：写圆角单角时不可加反斜杠 /
// 可设置的属性值包括：none（默认）、length（可以是具体值，也可以是百分比，但不是负数）
// border-radius 是否生效与是否设置了边框 border 无关
// 重置 border-radius 没有圆角，使用 none 无效，需要取值 0
// border-radius对 <img> 没有任何效果
// 兼容性：IE8-不支持
// 内径外径：border-radius内径 = 外径 - 对应的边框宽度。当border-radius半径值小于等于边框宽度时，元素没有内径效果
// 特殊图形：
// 圆形：元素的宽高相同，且圆角半径为宽高的一半
div{
width: 100px;
height: 100px;
border-radius: 50%;
}
// 半圆：元素宽高不同，且圆角半径与宽高要配合
div{
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
// 扇形：元素宽高及一个圆角半径相同
div{
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
// 椭圆：元素宽高不同，且水平和垂直半径分别对应宽高
div{
width: 120px;
height: 80px;
border-radius: 120px/80px;
}
// border-image 边界图片：速记属性
// 语法：
border-image: none; // 默认
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
// 兼容性：IE10-不支持
// 该属性的作用是用来替代 border-style 的，若 border-image 为 none，则显示border-style 的值
// 实例：
border-image: url('img.img') 27 fill / 27 / 27px repeat;
// border-image-source：边框的图片路径
border-image-source:url('test.img');
// border-image-slice：图片边框四条切割线的位置
border-image-slice: <number> | <percentage> fill
// 不给写单位，具体值默认单位是 px
// 四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽
// 图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内
// 若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片
// 若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空
// border-image-width：边框宽度
border-image-width: <length> | <percentage> | <number> | auto
// 若指定则边框图片宽度由该值确定，否则由盒子的边框宽度来确定
// 可以用具体像素、数字(表示几倍)以及百分比来表示
// 遵循四值顺序
// border-image-outset：边框图像区域超出边框的量
border-image-outset: 0; // 默认
border-image-outset: <length> | <number>
// 可以用具体像素和数字(表示几倍)来表示
// 遵循四值顺序
// border-image-repeat：边框图片的排列方式
border-image-repeat: stretch(拉伸，默认值) | repeat(重复) | round(平铺) [1,2]
// 第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式
// repeat 是边框中间向两端平铺，可能造成两端边缘被切的现象
// round会对边框背景图的切片进行缩放，使其正好显示
// 轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。利用轮廓，浏览器可以合并部分轮廓，创建一个连续但非矩形的形状。默认地，轮廓是一个动态样式，只有元素获取到焦点或被激活时呈现
// outline 轮廓：轮廓 outline 类似于边框样式的 border 属性，允许一次完成轮廓样式、宽度和颜色的设置
// 由于给定轮廓必须采用某种统一的样式、宽度和颜色，所以 outline 是关于轮廓的唯一简写属性
// 对于轮廓没有诸如 outline-top 或 outline-right 之类的属性
// outline中并没有包括outline-offset，需要对outline-offset进行单独设置
// 语法：
outline: [<outline-color> || <outline-style> || <outline-width>] | inherit
// 无初始值
// 兼容性：IE7-浏览器不支持
// 应用于所有元素，无继承性
// 实例：
outline: green dotted thick;
// 注意：outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
// outline 和 box-shadow 一样不会占据文档流空间
/*
轮廓样式
outline-style: none（默认） | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit（与边框不同的是，值少了一个 hidden）
应用于所有元素，无继承性
轮廓宽度
与边框类似，轮廓宽度不能为负数，也不能指定为百分比值
outline-width: thin | medium（默认） | thick | <length> | inherit
应用于所有元素，无继承性
如果轮廓的样式是 none，则轮廓宽度计算值为 0
初始值: invert（IE）、前景色（其它浏览器）
应用于所有元素，无继承性
轮廓颜色
与边框不同，轮廓颜色有关键字 invert 反色轮廓，代表对轮廓所在的像素完全反色转换，使轮廓在不同的背景颜色中都可见
但实际上invert关键字只有IE浏览器支持，其它浏览器的轮廓颜色是元素本身的前景色
outline-color: <color> | invert | inherit
轮廓偏移
轮廓偏移用来定义轮廓的偏移位置的数值。当参数值为正数时，表示轮廓向外偏移；当参数值为负值时，表示轮廓向内偏移
outline-offset: length | inherit
默认值为 0
应用于所有元素，无继承性
兼容性：IE浏览器不支持
*/
// box-shadow 盒阴影：可设置一个或多个下拉阴影的框，该属性是一个用逗号分隔阴影的列表（即可叠加，形成多阴影），每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
box-shadow: none; // 默认
box-shadow: 10px 10px 4px 3px #ccc; // 外阴影，此例中各个参数分别代表：水平偏移（必需）、垂直偏移（必需）、模糊半径（可选）、阴影大小（可选）、阴影颜色（可选，默认和文本颜色一致）
box-shadow: inset 0px 0px 4px #red; // 内阴影
// 注意：阴影只是一种修饰，不占用空间
// 可以使用多重阴影，但使用过多会造成性能差
// 最先写的阴影在最顶层
// 边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上
// 内阴影对 <img> 元素没有任何效果
// 该属性与 border-radius 一脉相承，若通过 border-radius 设置为圆角，则 box-shadow 的最终呈现也将是圆角
// 模拟边框
border: 1px solid #000;
box-shadow: 0 0 0 1px #000;
// 在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦
// box-sizing：CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式（设置width、height指定的区域）
box-sizing: border-box; // 此时给元素设置的宽度除了原先的内容 content，还包括填充 padding 以及边框 border
// 可设置的属性值包括：content-box（默认值。这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外）、border-box（指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括 padding 和border 的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算）、inherit
// 应用于块级元素和内联块状元素。无继承性
// 兼容性：IE7-浏览器不支持
// 只有firefox浏览器支持 padding-box 属性值
// IE浏览器在 getComputedStyle 得到 width/height 是按照标准模式计算的，而不论 box-sizing 的取值
