一、CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
二、CSS初识
CSS英文全称为Cascading Style Sheets，中文译为“层叠样式表（级联样式表）”，主要是对HTML标记的内容进行更加丰富的装饰，并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。
三、CSS选择器
选择器概念
概念：用于找到目标元素
普通选择器
-
id选择器（#）
-
类选择器（.）
-
标签选择器（标签名字）：匹配所有标签
-
通配符选择器（*）：表示所有元素
复合选择器
- 后代选择器（空格）：匹配所有指定元素的后代元素
- 交集选择器（不分割）：由两个选择器构成，其中第一个为标签选择器，第二个为class选择器
- 并集选择器（逗号）：只要逗号隔开的，所有选择器都会执行后面样式。
- 子元素选择器（>）：匹配下一层子元素（只包含亲儿子）
- 相邻兄弟选择器（+）：匹配紧挨的兄弟元素
- 普通兄弟选择器（~）：匹配指定元素的相邻兄弟元素
- 属性选择器（[]）:选取标签带有某些特殊属性的选择器
链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意：书写顺序不能颠倒
四、CSS样式书写位置
内联样式
概念：通过标签的style属性来设置元素的样式。
语法：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内部样式表
概念：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
语法：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
外部样式表
概念：将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
语法：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。 rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
五、CSS三大特性
CSS层叠性
概念：指多种CSS样式的叠加。
现象：相同属性的不同样式作用于同一元素上，例，元素设置了颜色为红色，又设置颜色为蓝色，即样式冲突
规范：按照css书写的顺序，以最后的样式为准
CSS继承性
概念：子标签会继承父标签的某些样式
内容：
1.text‐，font‐，line‐开头的属性可继承，color属性可继承
2.关于文字样式的，都能够继承；
3.所有关于盒子的、定位的、布局的属性都不能继承。
CSS优先级
概念：多规则应用在同一元素上
规则：
1.!important命令最大的优先级。
2.行内样式优先，应用style属性的元素，比选择器高。
3.id选择器>类选择器>标签选择器
选中元素时：
1.当权重不一样时，统计权重（id的数量，类的数量，标签的数量），权重大则优
2.当权重一样时，以最后出现的css样式为准（即覆盖）
没有选中元素时（权重为0）：
1.当描述层数不相同时，依据就近原则：看选择器描述到的层数，描述靠近目标则优先。
2.当描述相同层数时，以最后出现的css样式为准（即覆盖）
六、CSS样式
字体样式属性
font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
font-weight:字体粗细
font‐weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）【数字 400 等价于 normal，而 700 等价于 bold】
font-style:字体风格
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。其可用属性值：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式：选择器{font: font‐style font‐weight font‐size/line‐height font‐family;}
注意：语法格式必须按顺序书写，必须保留font‐size和font‐family属性，否则font不起作用
文本属性
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种： 1.预定义的颜色值，如red，green，blue等。 2.十六进制，如#FF0000，#FF6600，#29D794等。（最常用的定义颜色的方式）。 3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。其常用属性值单位：像素px，相对值em和百分比%。
text-align:水平对齐方式
text‐align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值：left：左对齐（默认值）；right：右对齐；center：居中对齐
vertical-align：垂直对齐
vertical-align属性用于设置或检索对象内容的垂直对其方式。其可用属性值： baseline：基线对齐；top：顶部对齐；middle：垂直对齐；bottom：底部对齐。
注意：vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度。
letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
注意：word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
text-decoration:文本的装饰
text-decoration 通常我们用于给链接修改装饰效果，其可用属性值：none：默认。定义标准的文本；underline：定义文本下的一条线；overline：定义文本上的一条线；line-through：定义穿过文本下的一条线。
text-transform：文本转换
text-transform属性用于转换不同元素中的文本，其可用属性值：uppercase（全部转大写）；lowercase（全部转小写）；capitalize（首字母转大写）。
word-break:自动换行
word-break属性主要用于处理英文单词。其可用属性值：normal 使用浏览器默认的换行规则；break-all 允许在单词内换行；keep-all 只能在半角空格或连字符处换行。
white-space：强制一行显示内容
white-space属性用于设置或检索对象内文本显示方式。其可用属性值：normal : 默认处理方式； nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow ：文字溢出
text-overflow属性用于设置或检索是否使用一个省略标记（...）标示对象内文本的溢出；其可用属性值：clip : 不显示省略标记（...），而是简单的裁切；ellipsis : 当对象内文本溢出时显示省略标记（...）。
注意：一定要强制一行内显示，再和overflow属性搭配使用
背景属性
背景图片(background-image )
语法：background‐image : none | url (url) none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像
背景平铺（background‐repeat）
语法：background‐repeat : repeat | no‐repeat | repeat‐x | repeat‐y
repeat : 背景图像在纵向和横向上平铺（默认的）；no-repeat : 背景图像不平铺；repeat-x : 背景图像在横向上平铺；repeat-y : 背景图像在纵向平铺
背景位置(background‐position)
语法：background‐position : x坐标|| y坐标 单位：百分数|长度值|top | center | bottom| left | center | right
背景附着(background‐attachment)
语法：background‐attachment : scroll | fixed scroll : 背景图像随对象内容滚动 fixed : 背景图像固定
背景简写(background)
建议语法：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
实例：background: transparent url(image.jpg) repeat‐y scroll 50% 0 ;
多背景
以逗号分隔可以设置多背景，可用于自适应布局。
四、标准文档流
标准文档流定义
标准文档流：在排版布局过程中，元素会默认从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。即不使用其他的与排列和定位相关的特殊规则时，各种元素的排列规则
标准文档流微观现象
空白折叠现象
现象：多个空格会被合并成一个空格显示
实例1：img左右空白间隙--img是行内块元素，换行是会显示一个空格字符
解决方案：
-
父级元素设置font-size:0;
-
图片标签连着写，没有空格换行符；
-
设置 浮动float, 但要记得清除掉float。
-
实例2：【拓展】img上下空白间隔：图片默认是按基线对齐方式，基线和底线有一小段间隙
解决方案：
-
图片设置display:block，将图片转为块级元素；
-
图片设置vertical-align:top; 值可以是top,middle,bottom,text-top,text-bottom；（垂直对齐方式）
高矮不齐，底边对齐
现象：当文字和图片在同一行且大小不一时，页面会出现高矮不齐现象，而底边总会对齐（图片置顶对齐，文字置底对齐）
解决方案：
-
图片设置：vertical-align:middle;
-
使用background设置图片为背景图片，再用padding调整文字位置
-
把图片和文字放入不同的div中，再用浮动和margin调整位置
-
自动换行现象
现象：一行内文字过多，浏览器会自动换行。注意：纯英文时不自动换行
解决方案：
父级块元素设置：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;超过宽度用...代替
标准文档流等级
1.块级元素
特性：1) 独占一行，不能与其他任何元素并列；2)可设置宽、高；3) 如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽；4）所有容器级标签都是块级元素
列表：div、h系列、li、dt、dd、p
2.行内元素
特性：1) 与其他元素并排；2)不能设置宽、高。默认的宽度就是文字的宽度3.所有文本级标签都是行内元素，除p以外。
列表：span、a、b、i、u、em
五、浮动
浮动定义
元素的浮动是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。通过float属性来定义浮动。其可用属性值：left：元素向左浮动。right：元素向右浮动。none：元素不浮动（默认值）。
浮动特性
1.浮动的元素脱标
实例：1）浮动元素不区分块级元素或行内元素，浮动后，元素实现并排，并且可以设置宽高。2）浮动元素会渲染在页面上方，和标准文档流不在同一层；
2.浮动的元素互相贴靠：当父元素有足够的空间。浮动元素会贴靠，没有足够空间，往边靠；
3.浮动元素有“字围”效果：其他盒子看不见被float的元素，但是盒子里的文本看得见，图片设置浮动，文本不设置浮动；
4.浮动元素收缩效果：当元素没有设置宽度值，而设置浮动属性，元素的宽度随内容的变化而变化。设置浮动之后，会对紧邻它之后的元素产生影响；
浮动的影响
父模块没有设置浮动，子模块设置浮动，父模块会被影响，不能进行扩展，高度为0。
清除浮动方法
1.给父盒子设置高度
一般不会设置，后期维护很麻烦。常用页面中固定高度的，并且子元素并排显示的布局有：导航栏
2.给浮动的盒子添加clear：both属性
表示内部元素，不受其他盒子影响，其可用属性：left：当前元素左边不允许有浮动元素；right：当前元素右边不允许有浮动元素；both：当前元素左右两边不允许有浮动元素。
缺点：导致margin失效
3.隔墙法
在两个浮动元素的中间新增一个空的div并设置div的高度。
缺点：浮动盒子没有高度
4.额外标签法
在盒子内浮动元素的后面新增一个空的div并且该元素不浮动，设置clear：both
缺点： 添加许多无意义的标签，结构化较差。
5.父元素设置overflow：hidden属性
通过触发BFC的方式，可以实现清除浮动效果。
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
6.伪类清除法（常用）
父元素添加clearfix类，并设置
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* IE6、7 专有 使用 zoom:1触发 hasLayout。*/
六、定位
定位的分类
1.static ：静态定位
移动位置基准：自动定位（默认定位方式）
概念：静态定位是所有元素的默认定位方式，网页中所有元素都默认是静态定位。
特性：不脱标；不可以使用偏移量。
2.relative：相对定位
移动位置基准：相对于它在标准流中的位置进行定位（以自己左上角为基点移动）
特性：不脱标；可以使用偏移量；在文档流中的位置仍然保留；
3.absolute：绝对定位
移动位置基准：相对于最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。若所有父元素都没有定位，以浏览器为准对齐(document文档)。
概念：子绝父相：因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位.
特性：脱标；可以使用偏移量；不占位置；
4.fixed：固定定位
移动位置基准：相对于浏览器窗口进行定位
概念：元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
特性：脱标；可以使用偏移量；不占位置；
定位叠放次序
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意：1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。2. 如果取值相同，则根据书写顺序，后来居上。3. 后面数字一定不能加单位。4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性。
七、元素的显示和隐藏
1.display： 设置或检索对象是否及如何显示。
display : none 隐藏对象
display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
2.visibility ：设置或检索是否显示对象。
visibility ：visible 对象可视
visibility ：hidden 对象隐藏
特点： 隐藏之后，继续保留原有位置。
3.overflow ：检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
overflow ：visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
overflow ：hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow ：scroll : 不管超出内容否，总是显示滚动条
八、CSS精灵技术
精灵图概念
CSS精灵是一种处理网页背景图像的方式式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
精灵图使用
1.使用background-image、background-repeat和background-position属性进行背景定位。
九、字体图标
使用流程
1.获取UI设计的svg格式的图标
2.上传生成兼容性字体文件包
推荐网站：
icomoon字库：icomoon.io
阿里iconfont字库： www.iconfont.cn/
fontello：fontello.com/
Glyphicon Halflings：glyphicons.com/
Icons8：icons8.com/
3.下载兼容字体文件包到本地
网站会把svg图片转换为字体格式，上传完毕后，即可下载
4.把字体文件包引用到页面
（1）把下载下来的文件夹放到项目中，可命名为fonts
（2）引入字体样式文件
