CSS 有很多坑，不同的属性和不同的元素搭配会出现不一样的效果，通过经验来学习会花费很多时间，但有一个方法可以解决这个问题，那就是学习 CSS 设计模式（CSS Design Pattern）。
MDN 和 Can I Use 这两个网站在前端开发中非常重要。
设置一个代码样板可以帮助我们更快的开始设计一个页面，避免重复的工作，代码样板包含以下元素：
- 设置 doctype
- 设置页面编码
- 引入初始化 CSS
<!--
HTML5. Use tags like <article>, <section>, etc.
See: http://www.sitepoint.com/web-foundations/doctypes/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
Ask IE to behave like a modern browser
See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Site</title>
<!--
Disables zooming on mobile devices.
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--
Stylesheet that minimizes browser differences.
See: http://necolas.github.io/normalize.css/
-->
<link rel="stylesheet" href="css/normalize.css">
<!--
Our own stylesheet.
-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
put content here
</body>
</html>
设置固定背景
固定背景有以下特征：
- 页面的背景是固定的，不随页面的滚动而滚动
- 同时放大和缩小窗口可以发现页面背景也会随之放大和缩小
背景固定有两种方式，一种是元素设置为 fixed，背景不做任何处理；
另一种是背景固定，元素不做特殊处理；
在这里使用第二种方式，在 body 元素中使背景固定
<body>
</body>
<style>
body {
background-image: url();
background-attachment: fixed;
background-size: cover;
background-position: center;
}
</style>
background-attachment 定义页面滚动时背景的行为。
background-size 定义缩放时背景图的效果。
background-position 指定背景图片的初始位置。
居中外包围框
外包围框内元素的宽度默认为外包围框的宽度，不需要再为子元素设置宽度。
支持响应式布局时只需调整外包围框宽度即可。
<body>
<div class="container">
</div>
</body>
<style>
.container {
width: 960px;
margin: 0 auto;
}
</style>
margin: 0 auto; 可以使元素自动居中。
居中元素
// 把行元素为块元素后居中
.inline-element {
display: block;
margin: 0 auto;
}
// 通过行元素的父元素居中
.inline-element-father {
text-align: center;
}
使用 text-align 时必须通过一个元素的父元素来居中，这会影响父元素中的所有元素，为了不影响其他元素可以把元素变为块元素后居中。
调整元素间距
父元素和子元素共用一条边或两个元素的 margin 直接接触的话会出现 margin 折叠的情况，如果不想它们折叠的话可以给其中一个元素加上 padding 或者 border。
排序 CSS 属性
一个元素内具体的属性排序可以按照以下的规则：
- 定位属性: position, float, z-index, clear
- 盒模型相关属性: padding, margin, display, width, height, border
- 字体相关
- CSS2 视觉相关属性 (background)
- CSS3 属性 (border-radius, box-shadow)
网友评论