上篇介绍了HTML基础，这里主要是介绍CSS基础。
一、什么是CSS
1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
3. CSS 是用来表现HTML或XML的标记语言。
4. CSS语法由三部分构成：选择器、属性和值： selector {property: value}
二、如何使用CSS
有三种方法可以在站点网页上使用样式表：
1. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
3. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
三、CSS语法
CSS 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：p{font-size:12px;color:red;}。
四、CSS选择器
最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。
一些的不常见的选择器包括伪类选择器(:hover)，很多复杂的CSS3和正则选择器，比如：first-child，class ^= “grid-”。CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover, li:nth-child）
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。
对于什么情况下使用什么选择器，用不同选择器的原则是：
1、准确的选到要控制的标签；
2、使用最合理优先级的选择器；
3、HTML和CSS代码尽量简洁美观。通常：
①最常用的选择器是类选择器。
②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
③极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。
五、CSS盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
1、W3C标准盒模型
盒子在页面占据的大小包括了margin，border，padding以及content。而盒子的实际大小（这里的实际大小，通过调试工具inspect可以看出来）包括border，padding以及内容区域content，但是不包括margin。
2、IE盒模型
IE盒模型与标准盒模型的核心差异是：IE盒模型的content部分包含了border和padding。
box-sizing是CSS3的Box Model（盒模型）属性之一。
box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。其语法如下，
box-sizing: content-box | border-box | inherit例如，假如您需要并排放置两个带边框的框，可通过将box-sizing设置为border-box。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
其取值说明如下：
| 值 | 描述 | 说明 |
|---|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 | 此值为其默认值，其让元素维持W3C的标准盒模型 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 | 此值让元素维持IE传统的Box Model（IE6以下版本） |
| inherit | 规定应从父元素继承 box-sizing 属性的值 | – |
六、CSS布局模型
CSS包含3种基本的布局模型，分别为：Flow（流动布局模型）、Float（浮动布局模型）、Layer（层级布局模型）。
1、Flow布局
流动布局模型其实是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
流动布局将会有两个比较典型的特征，
第一，块级元素都会在所处的最近父级容器元素内自上而下按顺序垂直顺延分布，因为在默认状态下，块级元素的宽度都是100%（即父级元素宽度的100%）。实际上，块状元素都会以行的形式占据位置。第二，在流动模型下，内联元素都会在所处的最近父级容器元素内从左到右水平分布显示。内联元素不会像块级元素那样独自的占据一行。
2、Float布局
任何元素在默认的情况下都是处于整个文档流中的，不会浮动的。当我们给某一个元素设置浮动时，即可让该元素摆脱当前文档流，成为浮动元素。
3、Layer布局
什么是层级布局模型？
层级布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层级布局模型没能受到热捧。但是在网页上局部使用层级布局还是有其方便之处的。
应用层级布局，往往需要定位属性的配合。CSS中有3种定位类型，
- 绝对定位(
position: absolute) - 相对定位(
position: relative) - 固定定位(
position: fixed)
绝对定位
如果想为元素设置层级布局模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位
如果想为元素设置层级布局模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。相对定位与绝对定位最大的区别在于，前者没有脱离当前文档流而后者已经脱离了当前文档流。脱离当前文档流的意思是，该元素的前后元素在计算位置和偏移时将不再计算该元素的大小和位置。
固定定位
position: fixed，表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;（用于定位背景图片的位置）属性功能相同。
固定定位在某一种场景下很有用，当我们需要在页面的某一位置固定的展示某一元素，且不受页面滚动条的影响。比如，常见的“返回顶部”之类的按钮。