十：以理论结合实践方式梳理前端 CSS 3 ——

CSS 3 样式归纳

在学习过程中没必要把所有 CSS 选择器和样式属性全部记住，只需要掌握最基本的使用即可，能够理解盒子模型以及页面样式基本呈现，对于一些复杂的 CSS 3 效果可以去查询一些网上资料，没必要花时间去学习，业余时间可以研究。

另外，随着互联联网的高速发展，前端框架更是如井喷涌而出，没必要增加学习成本，对于 HTML 5 和 CSS 3 只要求了解即可，现在的前端工程师大部分都要求懂点后端编程，要善于借用别人的代码，站在别人的肩膀上肯定能看的远些。

显示方式

元素的显示方式由 CSS display 属性控制

如果 display 属性的值为 block，那么该元素被称为 块级元素，它们表现出来的特点如下：

独占一行，前后都有换行符
width 和 height 都能生效

如果没有设置宽高，那么宽度默认占满父级元素宽度，高度由内容撑开
margin 和 padding 都能生效

如果 display 属性的值为 inline，那么该元素被称为 行内元素，它们表现出来的特点如下：

不会独占一行，前后没有换行符
width 和 height 都会失效，元素的宽高都由内容撑开
margin 和 padding 在水平方向上可以生效，但是在垂直方向上都会失效

如果 display 属性的值为 inline-block，那么该元素被称为 行内块级元素，它们表现出来的特点如下：

不会独占一行，前后没有换行符
width 和 height 都能生效
margin 和 padding 都能生效

此外，display 属性还能设置为其它值，这里也不一一进行列举

若未设置 display 属性的值，那么会根据元素的类型给 display 属性设置一个默认值，一般是 block 或 inline

讲到这里，关于元素显示方式，其实我们就差不多讲完了，直至我们遇到一道面试题，题目如下：

嗯？刚刚不是说行内元素的 width 和 height 属性都会失效吗，但是为什么还能设置宽高呀

解决这个问题，我们还需要知道一个知识点，可替换元素和不可替换元素

不可替换元素 是指那些元素的展示内容就是标签之间的文本的元素，例如：

：`
元素的展示内容
`
：<span>元素的展示内容</span>

可替换元素 是指那些根据元素的属性决定元素的展示内容的元素，例如：

：根据 src 属性，决定图片的实际内容
：根据 type 属性，决定表单的实际类型

不难发现，可替换元素大多是空元素，正因为元素里面没有内容，所以才需要通过属性决定展示的内容

可替换元素有内置宽高，它们的显示方式和 inline-block 元素一致，因此可以设置 width 和 height

样式初始化

一般标签在浏览器中都有默认样式，例 body 标签有默认的外边距，ul有默认的小黑点和内边距，前端程序员在写页面的时候会把这些默认的样式都清除掉，让所有标签的外观效果在所有浏览器表现一致，这个步骤就是 css 的初始化

html { line-height: 1.15; } main { display: block; } h1 { margin: 0.67em 0; font-size: 2em; } hr { overflow: visible; height: 0; } pre { font-size: 1em; font-family: monospace, monospace; } a { background-color: transparent; color: inherit; text-decoration: none; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-size: 1em; font-family: monospace, monospace; } small { font-size: 80%; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { margin: 0; font-size: 100%; font-family: inherit; line-height: 1.15; } button, input { overflow: visible; } button, select { text-transform: none; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { display: table; padding: 0; max-width: 100%; color: inherit; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { padding: 0; } [type="search"] { outline-offset: -2px; appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0px; padding: 0px; border: none; font-size: 14px; font-family: "微软雅黑","黑体","宋体"; } html, body { width: 100%; height: 100%; } address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; } input { margin: 0; padding: 0; outline: none; } input[type=submit], input[type=button] { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } img { border: none; } ul, ol ,li { list-style-type: none; }

属性兼容

属性	IE	Firefox	Chrome	Safari	Opera
@keyframes	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-name	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-duration	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-timing-function	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-delay	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-iteration-count	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-direction	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
animation-play-state	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
appearance	不支持	-moz-	-webkit-	-webkit-	不支持
backface-visibility	-ms-	-moz-	-webkit-	-webkit-	-webkit-
background-clip	>= 9+	>= 4+	>= 4+	>= 5+	>= 10+
background-origin	>= 9+	>= 4+	>= 4+	>= 5+	>= 10+
background-size	>= 9+	>= 4+	>= 4+	>= 5+	>= 10+
border-bottom-left-radius	>= 9+	>= 4+	>= 5+	>= 5+	>= 10+
border-bottom-right-radius	>= 9+	>= 4+	>= 5+	>= 5+	>= 10+
border-image	>= 11+	>= 15+	>= 16+	>= 6+	>= 11+
border-image-outset	>= 11+	>= 15+	>= 15+	>= 6+	>= 15+
border-image-repeat	>= 11+	>= 15+	>= 15+	>= 6+	>= 15+
border-image-slice	>= 11+	>= 15+	>= 15+	>= 6+	>= 15+
border-image-source	>= 11+	>= 15+	>= 15+	>= 6+	>= 15+
border-image-width	>= 11+	>= 13+	>= 15+	>= 6+	>= 15+
border-radius	>= 9+	>= 4+	>= 5+	>= 5+	>= 10+
border-top-left-radius	>= 9+	>= 4+	>= 5+	>= 5+	>= 10+
border-top-right-radius	>= 9+	>= 4+	>= 5+	>= 5+	>= 10+
box-align	不支持	-moz-	-webkit-	-webkit-	不支持
box-direction	不支持	-moz-	-webkit-	-webkit-	不支持
box-flex	不支持	-moz-	-webkit-	-webkit-	不支持
box-flex-group	不支持	不支持	不支持	不支持	不支持
box-lines	不支持	不支持	不支持	不支持	不支持
box-ordinal-group	不支持	-moz-	-webkit-	-webkit-	不支持
box-orient	不支持	-moz-	-webkit-	-webkit-	不支持
box-pack	不支持	-moz-	-webkit-	-webkit-	不支持
box-shadow	>= 9+	>= 4+	>= 10+	>= 5+	>= 10+
box-sizing	>= 8+	-moz-	>= 10+	>= 5+	>= 9+
column-fill	不支持	-moz-	不支持	不支持	不支持
column-gap	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-rule	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-rule-color	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-rule-style	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-rule-width	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-span	>= 10+	不支持	-webkit-	-webkit-	>= 11+
column-width	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
columns	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
column-count	>= 10+	-moz-	-webkit-	-webkit-	>= 11+
@font-face	>= 9+	>= 3+	>= 4+	>= 3+	>= 10+
font-size-adjust	不支持	>= 2+	不支持	不支持	不支持
font-stretch	不支持	不支持	不支持	不支持	不支持
grid-columns	不支持	不支持	不支持	不支持	不支持
grid-rows	不支持	不支持	不支持	不支持	不支持
hanging-punctuation	不支持	不支持	不支持	不支持	不支持
icon	不支持	不支持	不支持	不支持	不支持
nav-down	不支持	不支持	不支持	不支持	>= 11+
nav-index	不支持	不支持	不支持	不支持	>= 11+
nav-left	不支持	不支持	不支持	不支持	>= 11+
nav-right	不支持	不支持	不支持	不支持	>= 11+
nav-up	不支持	不支持	不支持	不支持	>= 11+
opacity	>= 9+	>= 2+	>= 4+	>= 3+	>= 9+
outline-offset	不支持	>= 3+	>= 4+	>= 3+	>= 11+
overflow-style	不支持	不支持	不支持	不支持	不支持
overflow-x	>= 9+	>= 2+	>= 4+	>= 3+	>= 9+
overflow-y	>= 9+	>= 2+	>= 4+	>= 3+	>= 9+
perspective	>= 10+	>= 16+	-webkit-	-webkit-	>= 23+
perspective-origin	>= 10+	-moz-	-webkit-	-webkit-	>= 23+
perspective-trim	不支持	不支持	不支持	不支持	不支持
resize	不支持	-moz-	>= 4+	>= 4+	>= 15+
rotation	不支持	不支持	不支持	不支持	不支持
rotation-point	不支持	不支持	不支持	不支持	不支持
target	不支持	不支持	不支持	不支持	不支持
target-name	不支持	不支持	不支持	不支持	不支持
target-new	不支持	不支持	不支持	不支持	不支持
target-position	不支持	不支持	不支持	不支持	不支持
text-emphasis	不支持	不支持	不支持	不支持	不支持
text-justify	>= 5+	不支持	不支持	不支持	不支持
text-outline	不支持	不支持	不支持	不支持	不支持
text-overflow	>= 6+	>= 7+	>=4+	>= 3+	>= 11+
text-shadow	>= 10+	>= 3+	>= 4+	>= 4+	>= 9+
text-wrap	不支持	不支持	不支持	不支持	不支持
transform	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
transform-origin	>= 10+	>= 16+	-webkit-	-webkit-	>= 12+
transform-style	>= 11+	>= 16+	-webkit-	-webkit-	>= 23+
transition	>= 10+	>= 16+	>= 26+	-webkit-	>= 12+
transition-property	>= 10+	>= 16+	>= 26+	-webkit-	>= 12+
transition-duration	>= 10+	>= 16+	>= 26+	-webkit-	>= 12+
transition-timing-function	>= 10+	>= 16+	>= 26+	-webkit-	>= 12+
transition-delay	>= 10+	>= 16+	>= 26+	-webkit-	>= 12+
word-break	>= 5+	>= 15+	>=4+	>= 3+	>= 15+
word-wrap	>=5+	>=3+	>=4+	>= 3+	>=10+