1、页面的背景是固定的，不随页面的滚动而滚动

背景固定有两种实现方式，一种是元素 fixed，其背景不做特殊处理；另一种是背景固定，元素不做特殊处理。

2、同时放大和缩小窗口可以发现页面背景也会随之放大和缩小

第二种实现方式

3、居中外包围框

页面的外包围框有几个作用：

（1）居中内容

（2）围框里所有 block 元素的默认宽度是充满父容器的宽度，不需要个别为每个元素设置宽度。

我们之后支持响应式布局只需要调整外包围框的宽度即可改变内部所有元素的宽度，非常方便。

居中外包围框

width:960px;设置外包围框的宽度。之所以设置为960px,是因为一般浏览器宽为1024，加上滚动条就为1000-1004。960给滚动条和其他浏览器UI预留了足够的空间，并且960这个数字可以被2,3,4,5,6,8,10,12等数字除尽，方便做网络。

margin:0 auto;让浏览器自动计算左右边距，使外包围框居中。这个居中技巧这能在设置了宽度的容器时使用。

3、针对块级元素，行元素的不同居中技巧。

块级元素：p, div, h1, h2, table, ol 等等。

行元素：在文字流里面显示，浏览器不会添加断行。默认宽度刚好适应内容。span, img, a, button, input 等等。

居中

centered-image是将一个行元素居中，首先将img用display:block;变为块级元素，再用margin: 0 auto;居中块元素（元素一定要有width属性）。如果想要居中一个行元素（比如img），但不影响同个容器里面的其他元素，那你可以选择把它设定为块元素来居中。

centered-container使用text-align居中,必须经过一个元素的父元素来居中(这里的父元素为contianer,子元素是包含在里面的p,h,img，进过对父元素设置center来使p,h,img居中，所以text-aligh是设置在父元素上的属性)，这会影响在这个容器里所有的元素。 

4、text-shadow属性

      text-shadow:h-shadow v-shadow blur color；

      border-radius属性

      border-radius:1-4 length|%/1-4 length|%;

如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

5、用 margin 调整间距（解决 margin collapse 的问题）

margin调整间距

在 .container 上面加上的padding: 1px;有点神奇。假如没有加上这个padding: 1px;，你会发现效果变成了这样：

没有padding:1px;

这是因为容器本身的 margin-top 会和第一个子元素的 margin-top 折叠在一起。在容器和top这个字符之间的空白其实是 子元素的 margin-top。同样的，父元素的 margin-bottom 会和最后一个子元素的 margin-bottom 也折叠一起了。

6、CSS属性排列顺序规则

定位属性: position, float, z-index, clear

盒模型相关属性: padding, margin, display, width, height, border

字体相关

CSS2 视觉相关属性 (background)

CSS3 属性 (border-radius, box-shadow)

7、

分页

8、

面包屑

9、

下拉菜单

10、去除列表风格，且同行展示

列表

list-style是针对整个列表样式而言的，display针对ul里的li而言的。li默认是块元素，需要元素在同行显示的把它们变成行元素即可。

11、inline-block

 inline 元素只能设置左右内边距和外边距，而不能设置其高度和上下内外边距。和垂直高度有关的 padding, margin, height 都无效。这时可以使用display: inline-block。inline-block元素可以简单理解为对外表现为行元素，而对内表现为块元素。上下 padding, margin 有效,容器的 text-align 会对它居中。

12、用 Float 布局来占满父容器的宽度

html部分

CSS部分

overflow: hidden 强制容器有足够的高度包围飘动元素.

13、clearfix

overflow:visible

上图是将overflow的属性设置为visible的效果，此时容器高度为0。另外一个常见的解决方案 clearfix。

clearfix

content:""在 clearfix 这个元素内部最后加上一个空的伪元素该元素与.child类并列

clear:both使伪元素清除飘动元素

这里display:table是为了处理margin collapse，参考这篇文章http://nicolasgallagher.com/micro-clearfix-hack/

想要撑高容器的话，我们可以在飘动元素后面加上一个普通元素。clearfix 利用 :after 伪元素创建了一个看不到的元素。clearfix 和之前介绍的overflow: hidden效果一模一样，但背后的原理其实不一样。你在实现的时候可以按情况选一个方便的来使用。

伪元素：CSS 伪元素用于向某些选择器设置特殊效果。":after" 伪元素可以在元素的内容之后插入新内容。

伪元素的用法

使用伪类

14、float 布局避免内容包围飘动元素

文字部分包围了图片

想要的效果

实现

html部分

CSS样式

15、全局使用 border-box 简化布局

border-box的特性是 padding 和 border 算在你指定的宽度里面，所以宽度你说多少就是多少。下面这张图对比两个宽度同样是 '200px' 的盒子：

正常情况下的盒模型

border-box下的盒模型

html{

box-sizing: border-box

}/*设定 html 为 border-box，通常在图片布局的时候使用*/

16、使用绝对定位

绝对定位的的适用情况大概是

有一个主要组件，在文件流里面正常布局；这个组件有一个附属组件 (它的小伙伴)；这个附属组件的位置相对于主要组件的位置。

使用绝对定位的例子

按钮是正常布局的主要组件（relative），菜单附属在按钮上用绝对定位(absolute)。给绝对定位元素加上宽度就可以避免奇怪的坑。