---恢复内容开始---
作用：结构和样式相分离，用样式控制结构，是页面更加好看
简介：CSS通常称为层叠样式表，主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能、如字体、颜色、背景的控制及整体排版等
一、CSS选择器
1.语法
选择器 {
属性1：属性值1；
属性2：属性值2；
}
F12打开开发者调试工具，ctrl +/- 可以放大/缩小视图
多类名之间用空格隔开，顺序与css样式表中顺序有关
2.选择器分类
伪类选择器也是选择器，用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，也可以选择，第一个，第n个元素
l类选择器是一个点，伪类选择器是2个点
2.1类选择器：.red {color:red}
2.2伪类选择器： a:hover {color:purple} :hover 是链接伪类选择器
2.2.1链接伪类选择器
2.2.2结构（位置）伪类选择器
:first-child 选取属于其父元素的首个子元素的指定选择器
:first-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始
:nth-last-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始
语法：li:first-child {color:red}
2.2.3目标伪类选择器：选择器可以选择当前活动的目标元素
::target {color:red}当前被选中元素设置样式
3.css外观样式及应用
width、height：宽高属性只适应于块级元素或行内块级元素（img、input），对行内元素无效
color：文本颜色，取值方式有3种（英文字母颜色、十六进制、rgb)
line-height：行间距，就是行与行之间的距离，即字符的垂直距离，一般情况下，行距比字号大7/8 像素就可以了（上一行底边缘的到下一行底边缘的高度）
行高撑开的是内容区域，与padding无关系
test-aline：水平对齐方式，属性用来设置文本内容的水平对齐（在浏览器中的）
test-indent：首行缩进，用于设置首行文本的缩进，一般使用em作为单位，1em就是1个子的宽度，如果是汉字的段落，1em就是1个汉字的宽度
letter-spacing：字间距。就是字符与字符之间的空白（英文字母之间的空白）
word-spacing：单词之间的间距，仅针对英文
rgba(255,0,0,0.5):半透明
test-shadow：文字阴影，4个参数：水平位置、垂直位置、模糊距离、阴影颜色，前2个参数必须写
test-decoration：none取消下划线
line-height=height 可让文本垂直居中
4.元素分类（标签）
常见的块级元素：h1-h6，div，p，ul，ol，li等
常见的行内元素有：a，strong，em，i，del，ins，span等
常见的行内块元素有：img、input、td等
4.1块级元素：每个块级元素通常会独自占据一整行或多整行可以设置宽度、高度、对齐等属性，通常用来网页布局和网页结构的搭建。
特点：
（1）单独占一行，总是从新行开始
（2）宽高、行高、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他元素（h1-h6，p，dt都是文字类的块级元素，里面不能放其他块级元素 ）
4.2行内元素（内联元素）：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽高、行高、对齐等属性，常用于控制页面中文本的样式。
特点：
（1）和相邻行内元素在一行上
（2）宽高无效，但水平方向的padding、margin可以设置，垂直方向上设置无效
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素（a标签例外）
4.3行内块元素（内联元素）：既有块级元素的特点又有行内元素的特点
特点：
（1）和相邻行内（行内块）元素在一行上，但是之间会有空白缝隙。（例如img图片是行内块元素，span是行内元素，同行排列时会形成间隙，且底部对齐）
（2）默认宽度就是它本身内容的宽度。
（3）高度、行高、内边距、外边距都可以控制。
4.4标签显示模式转换display
5.CSS盒模型及应用
网页布局的本质：把网页元素比如文字图片等等放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
盒模型中，content为浅蓝色，padding为青色，border为淡黄色，margin为黄色，width为content宽度，盒子的宽度=contrnt+padding+border
5.1边框（相当于橘子皮）：border-width,border=style,border-color
border：0 没有边框
border-style:none,没有边框，即忽略所有边框的宽度
table(border-collapse:collapse)表示表格的边框合并在一起
border-radius：圆角，顺序：左上角、右上角、右下角、左下角 2个值代表：左上角/右下角，右上角/左下角 3个值代表：左上角，右上角./左下角，右下角
5.2内边距padding，padding会撑开盒子
4个值表示上右下左顺时针的顺序，3个值表示上，左右，下；2个值表示上下，左右
5.3外边距margin
5.3.1外边距实现盒子居中
1）.盒子必须是块级元素且指定了宽度
2）.margin ：0 auto；
5.3.2文本水平居中和盒子居中
文本水平居中：test-align：center，文本垂直居中：line=height等于height，盒子水平居中margin：0 auto；
5.4插入图片和背景图片的区别
1.img相当于一个小盒子，占据位置，背景图不占位置。
2.img可通过width和height更改大小，背景图只能通过background-size 改变大小（宽高）
3.img可通过margin和padding更改位置，背景图只能通过background-position 改变位置（2个值分别表示到盒子左边、上边距离）
5.5清除元素内外边距body,ul,li{margin:0;padding:0}
谷歌浏览器中，body默认含有8px的margin，ul标签含有16px的上下margin和40px的左padding
行内元素只有左右外边距，上下外边距设置无效，行内元素可以设置左右内边距，上下内间距会有显示问题，所以尽量不要给行内元素设置上下的内外边距
5.6外边距合并
1）垂直的块级盒子会出现外边距合并的现象，以最大的外边距为准
2）嵌套结构中，子元素设置margin会传递到父级，父级带着子级一起向下移动，解决办法是给父级设置边框或内边距，或者给父级设置overflow：hidden
5.7盒子的尺寸
1）内盒尺寸：width+padding+border
2）外盒尺寸：width+padding+border+margin
5.8盒模型注意点
5.8.1width、height：宽高属性只适应于块级元素或行内块级元素（img、input），对行内元素无效
5.8.2计算盒模型的总高度时，还应考虑上下2个盒子垂直外边距合并的情况
5.8.3如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小(还是父级盒子的宽度，不会撑开父级盒子)
5.8盒模型布局稳定性width>padding>margin
5.9标准盒模型和诡异盒模型
box-sizing：content-box
box-sizing：border-box padding和border不会撑开盒子大小
6.hover
6.1 选择器:hover{样式}，鼠标悬停在选择器对应的盒子上时，选中该标签，给该标签设置样式
6.2鼠标移到父级上，让子级样式发生改变(可以1对多，给不同的子级设置不同的hover效果)
父级选择器:hover 子级选择器{样式}
7.盒子透明度和背景透明度opacity rgba()
8.transition：过度效果，一个盒子从一个样式变为另一种样式所需要的时间
9.选择器的优先级:j级数越高，选择器优先级越高，同级数的情况下，从最外层 一层一层进行比较
---恢复内容结束---