CSS可以分为4部分
1. CSS样式
1. 文字属性
格式：非连写---> font-family：设置文字的字体；例如：font-family:"宋体";
font-size：设置文字的到大小；例如：font-size:16px;
font-style：设置文字的显示风格；例如：font-style:italic/oblique; 斜体/倾斜
font-weight：设置文字的粗细；例如：font-weight:bold;
以上属性也可简写为
font：font-style font-weight font-size/line-height font-family；
可以不设置其中的某个值
注意点：简写只有同时指定字号和字体时才起作用
2. 文本属性
格式：非连写---> color：设置文本颜色
direction：设置文本方向。
line-height：设置行高。这里有个小巧决，单行文本设置高度和行高一样可以让文本垂直居中；
letter-spacing：设置字符间距。
text-align：对齐元素中的文本。值有：left/center/right；
text-decoration：向文本添加修饰。
none 默认。定义标准的文本。这里可以用来取消a标签的下划线；
underline 设置下划线。
overline 设置上划线。
line-through 可以设置文本删除线。
blink 设置文本闪烁。
inherit 设置从父元素继承 text-decoration 属性的值。
text-indent：设置文本（中文的）首行缩进。通常设置为：2em；
text-shadow：设置文本阴影。
----->格式：text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；
注意点：快速添加阴影只需要编写三个参数即可，text-shadow:水平偏移 垂直偏移 模糊度；
默认情况下阴影的颜色和文字的颜色一致
3. 背景
格式：非连写---> background-attachment：设置背景图片是否会设置滚动条的滚动而滚动，也叫关联方式；
scroll:默认值，会滚动；
fixed:不会滚动；
background-color：设置元素的背景颜色。
background-image：设置元素背景为图片。
background-position：设置背景图像的位置，也叫背景的定位方式。
background-position：水平方向(left/center/right) 垂直方向(top/center/bottom)；
background-repeat:设置背景图片是否平铺，也叫平铺方式；
repeat 默认，平铺
repeat-x 设置背景图将在水平方向平铺。
repeat-y 设置背景图将在垂直方向平铺。
no-repeat 设置背景图不平铺。
以上的属性可以简写为：
background:背景颜色 背景图片 平铺方式 关联方式 定位方式；
注意点：任何一个属性都可以省略；
4. 链接
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
5. 列表
列表 分为无序列表、有序列表和自定义列表,这里就不细讲列表是什么了；
格式：非连写---> list-style-image：将图象设置为列表项标志。
list-style-image:url(路径记全称);
list-style-position：设置列表中列表项标志的位置。
list-style-position:outside(外边)/inside(里边);
list-style-type：设置列表项标志的类型。
list-style-type:disc/circle/square/none;
中文意思就是：list-style-type:实心圆/空心圆/实心方块/去掉列表符号；`
以上样式也可以简写为：
list-style:url(路径记全称)/disc inside。
6. 表格
格式：非连写---> border-collapse:设置是否把表格边框合并为单一的边框。
border-spacing:设置分隔单元格边框的距离。
caption-side:设置表格标题的位置。
empty-cells:设置是否显示表格中的空单元格。
table-layout:设置显示单元、行和列的算法。
2. CSS盒模型
1.CSS 盒模型概述
规定了元素框处理元素内容、内边距、边框和外边距的方式。
2.内边距--padding
边框和内容之间的距离就是内边距
格式：非连写---> padding-top: ;内容距离顶部的距离
padding-right: ;内容距离右边的距离 padding-left:; padding -bottom:;
连写-->padding:上右下左;
这三个属性的取值省略时的规律
上右下左>上右下>左边的取值和右边的一样
上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
上右下左>上>右下左边取值和上边一样
注意点：1、给标签设置内边距后,标签占有的宽度和高度会发生变化
2、padding 属性接受长度值或百分比值，但不允许使用负值。
3、内边距也会有背景颜色
3.边框--boder
快捷键
bd+ border:1px solid #000;实线
bt+ 顶部边框 bl+左边边框 br+右边边框 bb+底部边框
格式：非连写---> border-width:设置边框宽度;
border-style:设置边框显示线形;
border-style:dashed(虚线)/dotted(小圆点)/double(双线)/solid(实线);
border-color:设置边框颜色;
同时分别设置四边不同的边框样式
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
以上样式也可以简写
border：颜色 宽度 线类型;
注意点：1、颜色（默认黑色）和宽度可以省略，但是样式里的线类型不可以省略。
2、这三个属性的取值省略时的规律
2.1、上右下左>上右下>左边的取值和右边的一样
2.2、上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
2.3、上右下左>上>右下左边取值和上边一样
4.外边距--margin
围绕在元素边框的空白区域是外边距,也可以通俗的说就是标签和标签之间的距离就是外边距
格式：非连写---> margin-top:;
连写--->margin:上右下左;
注意点：1、外边距的那一部分是没有颜色的
2、这三个属性的取值省略时的规律
上右下左>上右下>左边的取值和右边的一样
上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
上右下左>上>右下左边取值和上边一样
5.CSS 外边距合并
默认情况下外边距是不会叠加的，而在默认布局的垂直方向上，会出现合并现象，谁的外边距比较大就听谁的
3.定位
定位流首先可以分为四类
相对定位->relative
绝对定位->absolute
固定定位->fixed
静态定位->static
相对定位 就是相对于自己以前在标准流中的位置来移动
position:relative;
top/bottom:
left/right:
注意点：1、相对定位是 不 脱离标准流的，还是会占用一份空间的
2、相对定位.在同一个方向上的定位属性只能使用一个
3、区分 块级元素/行内元素/行内块级元素
4、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局------>意思就是当给相对定位的元素添加margin/padding属性的时候，是会先添加到定位之前的盒子，而不是定位之后的盒子。
相对定位应用场景 1.用于对元素进行微调 2.配合后面学习的绝对定位来使用
绝对定位 相对于body来定位
position:absolute;
top/bottom:
left/right:
注意点：1、绝对定位的元素是脱离标准流的
2、绝对定位的元素是不区分 块级元素/行内元素/行内块级元素
绝对定位参考点
1、规律
1).默认所有绝对定位的元素，无论有没有祖先元素，都会以body为参考点
2).如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流(除了静态定位)，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
2.1).只要是这个绝对定位元素的祖先元素都可以
2.2). 指的定位流是指------->绝对定位/相对定位/固定定位
2.3).定位流中只有静态定位不行
3).如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点
注意点：1.如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点
2、一个绝对定位的元素会忽略祖先元素的padding
绝对定位里面常用的一些方法技巧：
绝对定位--子绝父相
子元素用绝对定位 父元素用相对定位
绝对定位--水平居中
position:absolute;
left:50%;
margin-left:负的(元素宽度的一半);
固定定位
position:fixed;
top/bottom:
left/right:
固定定位和背景关联方式很像。
背景定位可以让背景图片不随着滚动条的滚蛋而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动
注意点：1、固定定位的元素是脱离标准流的，不会占用标准流中的空间
2、固定定位和绝对定位一样不区分 行内/块级/行内块级
固定定位和绝对定位的区别：固定定位不会随着滚动条的滚动而滚动；
固定定位应用场景:导航栏 、广告
z-index属性
作用：专门用于控制定位流的覆盖关系
默认情况下所有元素都有一个默认的z-index属性，取值是0。
1、默认情况下定位流的元素会盖住标准流的元素
2、默认情况下定位流元素后面编写的会盖住前面编写的
3、如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就是显示在上面
注意点：从父现象
1）如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。
2）如果两个元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面
浮动
浮动流排版方式 float:left/right;
浮动元素排序规则
1.相同方向上的浮动元素，先浮动的元素会显示在前;面，后浮动的元素会显示在后面。
2.不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3.浮动元素之后的位置，由浮动元素浮动之前在标准流中的位置来确定。
注意点：
1.浮动流中没有居中对齐,也就是没有center这个取值
2.在浮动流中是不可以使用margin:0 auto;
特点：
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 ,无论是块级元素/行内元素/行内块级元素都可以水平排版
2在浮动流中无论是.块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
脱标：脱离标准流
有浮动流 就有清除浮动流的方式
1.清除浮动的第一种方式
给前面一个父元素设置高度
注意点:在实际开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
2.清除浮动的第二种方式
给后面的盒子添加clear属性
CSS clear属性
取值：left 告诉浏览器不要去找前面的左浮动元素
right 告诉浏览器不要去找前面的右浮动元素
both 不要去找前面的左浮动和有浮动元素
none 默认取值，按照浮动元素的排序规则来排序
注意：使用这种清除浮动方式会使margin属性会失效
3.清除浮动的第三种方式
隔墙法：（在实际开发中不常用）
1)、外墙法：在2个盒子之间添加一个额外的块级元素，给这个额外的块级元素添加clear: both;属性
注意点：外墙法它可以让第二个和i子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性
这个额外的盒子可以设置多个类名 第一个类名可以设置clear属性 第二个类名可以设置高度
2)、内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外添加的块级元素设置clear: both;属性
注意点:内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
4.清除浮动的第四种方式
使用伪元素选择器的方式可以清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
5.清除浮动的第五种方式
overflow:hidden；
作用：1.可以将超出标签范围的内容裁剪掉 2.可以清除浮动
3.如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来，如果外面的盒子不想被一起顶下来，那么可以通过overflow:hidden；让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
4. CSS选择器
1、id选择器
格式：#id名称{属性：值;}
命名规则：由字母、数字、下划线组成，但是不能以数字开头；
建议:在实际开发中，不建议使用，留给js用
2、类选择器
格式：.类名{属性：值;}
class="nac";//定义一个类名
.nac{属性:值;}//在CSS里面用
命名规则与id一样，一个标签可以有多个类名；class="nav1 nav2 nav3"
3、后代选择器
格式：标签名称1 标签名称2{属性:值;}
4、子元素选择器
格式：标签名称1>标签名称2{属性:值;}
div>ul>li>p{属性:值;}
注意：用>符号好连接，不能有空格
后代选择器和子元素选择器的区别
后代选择器会选中指定标签中，所有的特定后代标签
子元素选择器只会选中指定标签中，所有的特定的直接标签；
5、交集选择器
格式：选择器1选择器2{属性:值;}
注意点：选择器之间没有任何符号连接
6、并集选择器
格式：选择器1，选择器2{属性:值;}
使用,连接
7、兄弟选择器
兄弟选择器又分为2类：
1、相邻兄弟选择器
作用：给指定选择器后面紧跟的哪个选择器选中的标签设置属性
格式：选择器1+选择器2{属性:值;}
2、通用兄弟选择器
作用：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：选择器1~选择器2{属性:值;}
8、序选择器
序选择器也分为两类：
1、同级别
不区分类型，用来选择器同级别的第几个标签；
例如：p:first-child{属性:值};意思就是选中同级别中的第一个p标签
2、同类型
用来选中同级别中同类型的第几个标签
例如:p:first-of-type{属性:值;}意思就是选中同级别中同类型的第一个p标签
9、伪元素选择器
作用：就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。
格式:
标签名称::brfore{属性:值; }
标签名称::after{ 属性:值; }
visibility:hidden; 防止内容溢出
10、伪类选择器
修改a标签不同状态的样式
a:link{} 修改从未被访问过状态下的样式
a:visited{} 修改被访问过状态下的样式
a:hover{} 修改鼠标悬停在a标签上状态下的样式
a:active{} 修改鼠标长按状态下的样式
注意点：1、a标签的伪类选择器可以单独出现也可以同时一起出现
2、a标签的伪类选择器如果一起出现，那么有严格的顺序要求，
编写顺序必须要遵守爱恨原则 love hate
l(link)ov(visited)e h(hover)a(active)te
3、如果默认状态的样式和被访问过状态的样式一样，那么可以缩写
a:link{color:green;}
a:visited{color:green;}
------>可简写为 a{color:green;}
建议：
1.在实际开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在实际开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/margin）
3.在实际开发中和a标签文字/背景相关的都写在伪类选择器中