CSS
CSS简介
CSS：层叠样式表
网页是一个多层的结构，通过CSS可以分别为每一个层来设置样式
修改方式：
1、 标签内部使用style属性设置元素的样式(样式只能对一个标签生效)
2、 将样式编写到head中的style标签里（内部样式表）
3、 将CSS样式编写到外部CSS文件中，通过link标签进行引入（外部样式表）
注：style内部不遵循HTML规范编写代码，例：不能使用<!-->注释，应用/* */注释
CSS的基本语法
1、 选择器：通过选择器可以选中页面中的指定元素
例如：p的作用就是选中页面的所有p元素
2、 声明块：通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成，是一个名值对结构
常用选择器
1、 元素选择器：根据标签名选中指定的元素。语法：标签名{}
2、id选择器：根据元素的id属性值选中一个元素。语法：#id属性值{}
3、类选择器：根据元素的类选中一组元素。语法：.class属性值{}
Class是一个标签的属性，可以为多个元素设置一个class，也可以给一个元素设置多个class
4、 通配选择器：选择页面中的所有元素。语法：*{}
5、 交集选择器：同时选择同时符合多个条件的元素。语法：选择器1选择器2选择器3{}
6、 并集选择器：同时选择每个符合条件的元素。语法：选择器1,选择器2,选择器3{}
父元素：直接包含子元素的元素叫做父元素
子元素、祖先元素（including父元素）、后代元素（including子元素）、兄弟元素
关系选择器：
子元素选择器：选中指定父元素的指定子元素。语法：父元素>子元素{}
后代元素选择器：选中指定元素的指定后代元素。语法：父元素 【空格】子元素{}
选择下一个兄弟。语法：元素 + 兄弟元素{}
选择下边所有的兄弟。语法：元素 ~ 兄弟元素
属性选择器：
在选择器中加[attribution]可以选择所有该属性的元素。语法[ATTR]{}
在选择器中加[attribution=value]可以选择拥有该属性值的元素。
在选择器中加[attribution^=value]可以选择拥有以该属性值开头的元素。
在选择器中加[attribution$=value]可以选择拥有以该属性值结尾的元素。
在选择器中加[attribution*=]可以选择所有含有该属性值的元素。
伪类选择器（pseudo-class）：不存在的类，用来描述元素的特殊状态，一般使用冒号开头
:first-child{}，第一个子元素
:last-child{}，最后一个子元素
:nth-child(n)，选中第n个元素，直接写n表示全选，2n表示偶数位元素，以此类推。
以上伪类均根据所有的子元素进行排序
:first-of-type{}
:lost-of-type{}
:nth-of-type(n){}
以上伪类根据同类型元素排序
:not() 否定伪类，将符合条件的元素从选择器中去除
超链接的伪类
a:link 用来表示没访问过的链接（正常的链接）
a:visited 用来表示访问过的链接（由于隐私原因，visited只能修改链接的颜色）
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态
伪元素选择器（pseudo-element）, 一般使用双冒号（double-colon）开头
::first-letter 用来表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始位置
::after 元素的最后位置（Before和after必须结合content属性使用）
可以注引号等内容
继承：我们给一个元素设计的样式，会应用到它的后代上
并非所有的样式都能继承，如布局、背景等不会被继承
冲突：当通过不同的选择器选中相同的元素，并且为其设置不同的值时，此时产生样式的冲突
当发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重：
| 内联样式 | 1,0,0,0 |
|---|---|
| Id选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
| 通配选择器 | 0,0,0,0 |
| 继承的样式 | 没有优先级 |
比较优先级时，需要将所有的选择器优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）.选择器的累加不会超过最大的数量级，如类选择器再高也不会超过id选择器。
当优先级一样时，选择源码位置靠下的选择器
在声明器样式后面添加 !important , 样式会获取到最高的优先级，甚至超过内联样式（慎用）
长度单位：1、像素；2、百分比；3、em：相对元素字体大小计算，1em=1font-size；4、rem：相对根元素的字体大小计算
颜色单位：1、颜色名；2、RGB值：R红G绿B蓝。语法rgb(r,g,b)，值位于0-255之间；3、RGBA，语法(r,g,b,a)，a为透明度；4、十六进制的RGB值：#RGB；5、HSL值，HSLA值：H色相(0-360)S饱和度(0-100%)L亮度(0-100%)
文档流（normal flow）：网页是一个多层结构，这些层中最底下一层称为文档流，文档流是网页的基础。元素默认在文档流中进行排列。
元素在文档流特点：
块元素：会在页面中独占一行（自上到下）；默认宽度时父元素的全部；默认高度被子元素撑开
行内元素：不在页面独占一行，只占自身的大小（自左向右），若一行之中不够容纳所有的行内元素，则元素会换到第二行继续自左向右排列；行内元素的默认宽度和高度被内容撑开。
盒子模型（box model）：CSS将页面中所有元素设置为了一个矩形的盒子，将元素设置成盒子后，对页面的布局就变成了将不同的盒子摆放到了不同的位置。
盒子模型组成：
内容区（content）：由width、height等设置
内边距（padding）：内容区和边框之间的距离，内边距设置会影响到盒子的大小，背景颜色会延伸到内边距上
Padding-top
Padding-bottom
Padding-left
Padding-right
Padding简写属性，语法同border-width
边框（border）：
边框的宽度border-width，可以用来指定四个方向的边框宽度（顺时针）
Border-xxx-width，xxx可以是top、bottom、right、left单独指定某个边宽度
边框的颜色border-color
边框的样式border-style
None无线、solid实线、dotted点划线、dashed虚线、double双线
Border简写属性：border:[width] [color] [style]，无顺序要求，使用空格隔开
Border-xxx:[] [] []，单独设置某条边
外边距（margin）：不会影响盒子的可见框大小，影响盒子的位置
Margin-top
Margin-bottom
Margin-left
Margin-right
margin简写属性，语法同border-width
默认情况下，设置左上外边距会移动自身，设置右下外边距会移动其他元素。
元素水平方向的布局由以下几个属性共同决定：margin-left, border-left, padding-left, width, padding-right, border-right, margin-right。水平布局应当满足
父元素内容区宽度=sumOf(margin-left, border-left, padding-left, width, padding-right, border-right, margin-right)
当结果不满足时，则称为过度约束，等式调整margin-right使得等式满足
以上七个值中，width, margin-left, margin-right值可以设置为auto，系统自动调整auto值使得等式成立。将margin两个值设置为auto，width设置为固定值，可将内容居中。
元素竖直方向的高度被内容撑开。若子元素大小超过了父元素，则子元素会从父元素中溢出。
使用overflow属性来设置父元素
可选值：visible 默认值，溢出在父元素外部位置显示
Hidden：溢出内容不显示
Scroll：生成两个滚动条来查看完整的内容
Auto：根据需要生成滚动条
衍生属性：overflow-x，overflow-y
外边距的折叠（仅垂直方向）：相邻的垂直方向外边距会发生重叠现象
兄弟元素：兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
若为一正一负，两者取和；若为两负，取绝对值较大
父子元素：父子元素之间的相邻垂直外边距，子元素的会传递给父元素。父子外边距的折叠会影响到页面的布局，需要进行处理
行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding，border，margin，但是垂直方向padding，border，margin不会影响页面布局
Display属性：用来设置元素显示的属性
可选值：inline设置成行内元素
Block设置成块元素
Inline-block 设置成行内块元素：既可以设置宽度和高度，也不会独占一行
Table设置为一个表格
None不在页面中显示
Visibility属性：用来设置元素的显示状态
可选值：visible 默认值，元素在页面正常显示
Hidden 不显示元素，但仍然占据页面的位置
浏览器的默认样式：通常情况浏览器会为元素设置一些默认样式，会影响到页面的布局
Body{margin=8px;}p{margin:16px};ul{margin=8px;padding=24px;list-style:visible}
去除所有默认样式：
1、*{margin:0;padding:0}
2、导入重置样式表（css文件）
Reset.css去除了所有默认样式
Normalize.css对默认样式进行统一
