前言：
CSS，层叠样式表，用于美化网页的。
分为：行内样式，行间样式，外部样式。
(1).行内样式：直接在元素标签中写"style="xxx:yyy;""
(2).行间样式：在<head>标签的<style></style>中写样式代码。
<head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head>
(3).外部样式：把很多CSS写成一个文件，在<link>标签中的href属性里引入这个CSS文件。注意：要把这个标签写在<style>标签的外面。
<head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> <link rel="stylesheet" href="css/index.css"> </head>
(4).优先级问题
行内样式>行间样式=外部样式。（级别一样，哪个样式离这个标签最近就用那个，就近原则）
一、常见的选择器
用处：用于精准地选中元素，并赋予样式。
（一）.元素选择器。
<style> /*星号*通配符，匹配所有元素*/ * { margin: 0; padding: 0; } /*该样式，匹配所有的p标签*/ p { text-align: center; } </style>
（二）.class选择器
借助了一个"类"（python中的类），一处定义，可以多处使用。
语法：".classname{}"
<style> /*这是类选择器*/ .bigbox { width: 100px; height: 100px; } </style>
（三）.id选择器
用过标签的id属性，选择对应的元素。id选择器唯一！
语法："#idname{}"
<style> /*这是id选择器*/ #banner { width: 100px; height: 100px; } </style>
（四）.群组选择器
可以同时选择多个标签的选择器。（同时选中多个，把多个选择器放在一起）
<style> /*群组选择器*/ p, span, .num { } </style>
（五）.层次选择器
(1).子代。只能选择儿子这一代。
<style> /*子代*/ /*只能选中div下一级的span。如果有嵌套，就选不了*/ div > span { } </style>
(2).后代。儿子、孙子都能选中。
<style> /*后代*/ /*div下面，所有的span都能被选中。不管套得多深*/ div span { } </style>
(3).兄弟。（同级别）
<style> /*兄弟*/ div ~ p { font-size: 12px; color: red; } </style>
(4).相邻。（隔壁）
<style> /*相邻*/ div + p { font-size: 12px; color: red; } </style>
（六）.属性选择器
<style> /*属性选择器*/ div[class=box] { width: 200px; } </style>
（七）.选择器的优先级
id>class>元素
可以把id想像成数值100，class为10，元素为1
针对选中同一个样式的情况下，有多个选择器时，不知道该如何判断优先级。把上面想像的数值加一下，数字谁大，用谁的。（不过提醒一点：10个class也没有一个id来得大）
二、字体样式
常见的属性：
（一）.font-family
<style> .font_example { font-family: "微软雅黑", "楷体"; /*浏览器会一个个地去找字体，如果都没有找到，则使用默认字体*/ } </style>
（二）.font-size
(1).px代表像素
(2).em表示父级倍数。如：20em等价于20*父级倍数。
(3).rem是根字大小，用于移动端的。如：2rem等价于2*根字大小。
（三）.font-weight
(1).bold变粗
(2).lighter变细
(3).0-900的整数
（四）.font-indent:2em;首行缩进2个空格
（五）.text-decoration:none;去掉下划线
（六）.word-spacing:20px;词距！根据空格决定的！英文是以空格为区分一个个单词。
（七）.letter-spacing:2px;字距！
（八）.text-transform:uppercase/lower;只针对英文，全转成大写或者小写。
（九）.vertial-align:center;只能垂直对齐。
三、背景样式
先补充一点：div的高度如果设置为100%，则盒子的高度会根据内容来决定。
常用的属性：
（一）.background-color:rgba(0-255,0-255,0-255,0-1);
rgba()当中，前三个值的范围都是0-255，分别代表三原色：红绿蓝。第四个值的范围是0-1，代表透明度，0完全透明，1不透明。
（二）.background-image:url("");
（三）.background-repeat:xxx;
(1).默认是平铺，如果要这个效果，不用写这条代码。
(2).no-repeat不重复。
(3).repeat-x横坐标重复。
(4).repeat-y纵坐标重复。
（四）.background-size:xxx;
(1).填写固定的像素值，图片则等比例缩放，是宽度的值。
(2).conver是将图片等比例放大到盒子宽度的最大值，铺满，超出不显示。
(3).contain则是等比例放大到盒子的高度。
（五）.background-position:xxx;
(1).top顶部
(2).bottom底部
(3).分别指定x值和y值
（六）.复合样式
就这么写：background: url("") no-repeat center top;
四、超链接样式
针对的是<a>标签，必须按下面这样的顺序写，不然没有任何效果。
<style> a:link{} a:visited{} a:hover{} a:active{} </style>
我个人推荐的记忆方式：LV HA
四个伪类单词各自的开头。LV：著名的奢侈品；HA：哈哈的拼音。合起来：LV哈
五、盒子模型
盒子模型由padding、margin、border组成。
（一）.边框：border
(1).复合样式
<style> .border_example { border: 1px solid skyblue; /*边框粗细宽度，边框样式，颜色*/ } </style>
如果遇到具体要设置某一边的边框，那只能分开写了。
(2).border-radius:50%;会把边框变圆了，变成一个圆。
（二）.内边距：padding
内边里面的距离，撑开、撑大，是填充，把盒子变大。内边距针对的是内容，背景不是内容。
(1).padding:30px;同时给了4个方向的内边距。
(2).padding:30px 40px;分别是：上下，左右。
(3).padding:30px 40px 50px;分别是：上，左右，下。
(4).padding:30px 40px 50px 60px;分别是：上、右、下、左。
(5).注意：值不能给负数，只能给正数，不管多大的负数都等同于0.
（三）.外边距：margin
盒子外的距离，盒子与盒子之间的距离，可以给负数。
数值的给定，同理于padding。但是，父盒子与子盒子共用一个margin-top时，需要在父盒子中写上"overflow:hidden;"
(1).小技巧
margin:0 auto;可以水平居中对齐，前提是盒子要有宽度。
(2).display属性改变元素成块级、行内、行内块
display:block;改成块级、display:inline;改成行内、display:inline-block;改成行内块。
六、reset css
浏览器在解析某些标签时，本身就自带了一些样式，导致我们写样式的时候会效果不一致。因此需要根据具体业务，来自己写一套reset.css！
这里有一个通用的reset.css可供参考：https://meyerweb.com/eric/tools/css/reset/
比较偷懒的方式如下：
<style> * { margin: 0; padding: 0; } </style>
七、浮动
当正常文档布局不能解决的时候，需要浮动，就是让元素脱离文档流。（行内元素给浮动后，可以给高宽了）
当一个元素脱离文档流，飘了起来后，另一个元素则趁虚而入。
语法：float:left/right;
不过浮动会产生一个问题：高度崩塌。解决方案：每次浮动后，第一时间在父盒子中清除浮动。
<style> .baseboxname::after { content: ""; display: block; clear: both; } </style>
八、定位
记住一个事儿：定位，定位，是相对什么来定位的，它的参照物是什么。
（一）.四种定位模式：
(1).static，默认。遵循文档流，写了等于没写，因为默认就是这个值。
(2).relative：相对。没有脱离文档流，以自己本身为参照物。
(3).absolute：绝对。脱离了文档流，不能清除。如果没有定义父盒子，以整个body元素为参照物；如果定位了父盒子，则以父级元素为参照物。
(4).fixed：固定。永远以body为参照物，脱离了文档流，窗口滚动，它依然不动。
补充：relative、absolute、fixed，可以给top、left、bottom、right值。
一般来说，top和left用得较多，因为bottom和right相当于给了top和left的负值。
（二）.z-index
只能给定位的元素用，数字越大，层级越高。一般会设置1-99。