CSS 0 to 1：踏出第一步

CSS 有很多坑，不同的属性和不同的元素搭配会出现不一样的效果，通过经验来学习会花费很多时间，但有一个方法可以解决这个问题，那就是学习 CSS 设计模式（CSS Design Pattern）。

MDN 和 Can I Use 这两个网站在前端开发中非常重要。

设置一个代码样板可以帮助我们更快的开始设计一个页面，避免重复的工作，代码样板包含以下元素：

1. 设置 doctype
2. 设置页面编码
3. 引入初始化 CSS

  
    

    
    

    

    
    

    
    

    
    
  
  
    put content here
  

设置固定背景

固定背景有以下特征：

1. 页面的背景是固定的，不随页面的滚动而滚动
2. 同时放大和缩小窗口可以发现页面背景也会随之放大和缩小

背景固定有两种方式，一种是元素设置为 fixed，背景不做任何处理；

另一种是背景固定，元素不做特殊处理；

在这里使用第二种方式，在 body 元素中使背景固定

background-attachment 定义页面滚动时背景的行为。

background-size 定义缩放时背景图的效果。

background-position 指定背景图片的初始位置。

居中外包围框

外包围框内元素的宽度默认为外包围框的宽度，不需要再为子元素设置宽度。

支持响应式布局时只需调整外包围框宽度即可。

margin: 0 auto; 可以使元素自动居中。

居中元素

// 把行元素为块元素后居中
.inline-element {
  display: block;
  margin: 0 auto;
}

// 通过行元素的父元素居中
.inline-element-father {
  text-align: center;
}

使用 text-align 时必须通过一个元素的父元素来居中，这会影响父元素中的所有元素，为了不影响其他元素可以把元素变为块元素后居中。

调整元素间距

父元素和子元素共用一条边或两个元素的 margin 直接接触的话会出现 margin 折叠的情况，如果不想它们折叠的话可以给其中一个元素加上 padding 或者 border。

排序 CSS 属性

一个元素内具体的属性排序可以按照以下的规则：

1. 定位属性: position, float, z-index, clear
2. 盒模型相关属性: padding, margin, display, width, height, border
3. 字体相关
4. CSS2 视觉相关属性 (background)
5. CSS3 属性 (border-radius, box-shadow)