今日所学内容：
一、css选择器
1、基础选择器：通配选择器 | 标签选择器 | class(类)选择器 | id选择器
2、复杂选择器：
一、css选择器
css选择器的本质就是css与html两种语法建立关联的特定标识符,在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们，每一种名字在css语法中都对应这一种特定标识符。
1、基础选择器
1）通配选择器
特定标识符 星号(*) -- 可以表示页面所有标签的名字
通配选择器控制页面中所有的标签(不建议使用)
* {
样式块
}
页面中的所有标签都能被匹配
2）标签选择器
特定标识符 标签名
标签选择器控制页面中标签名为标签选择器名的所有标签
div {
样式块
}
页面中的所有div标签都能被匹配
3）class(类)选择器（提倡使用）
特定标识符 点(.)
class选择器控制页面中标签全局属性class值为class择器名的所有标签
.box {
样式块
}
页面中class属性值为box的标签都能被匹配
4）id选择器
特定标识符 井号(#)
id选择器控制页面中标签全局属性id值为id择器名的唯一标签
#box {
样式块 */
}
页面中id属性值为box的唯一标签匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名
基础选择器的优先级
优先级：通配选择器 < 标签选择器 < class(类)选择器 < id选择器 < 行间式 < import
2、复杂选择器
1）群组选择器
连接标识符逗号(,) ，群组选择器就是一套样式块同时控制几个目标标签，这几个目标标签可以是id，class，标签用逗号连接(,)
2）后代选择器(父，子/孙)
连接标识符 空格( )，后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰
3）子代选择器(父子)
连接标识符 大于号(>)，子代选择器控制的是 最后置位的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰
4）兄弟选择器
连接标识符 波浪号(~)，兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰
5）相邻选择器
连接标识符 加号(+)，相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰
6）交叉选择器
连接标识符 紧挨着(没有任何连接符)，交叉选择器本质上是对一个目标标签的多个名字的同时表示
高级选择器通过权重 同级的个数来区别优先级
id > class > 标签
种类相同：比个数 | 个数相同：比顺序
高级选择器种类是同级别不影响优先级
3、伪类选择器
4、标签的四大伪类
1）链接的初始状态
.类名：link{样式块}
2）链接的悬浮状态
.类名：hover{样式块}
3）连接的激活状态
.类名：active{样式块}
4）连接的已访问状态
.类名：visited{样式块}
普通标签都可以去使用 :hover :active
二、css 具体样式
1、文本样式
文字样式是用来控制字体或文本的显示方式的
字族：STSong作为首选字体, 微软雅黑作为备用字体
font-family: "STSong", "微软雅黑";
字体大小 最小为12px，想要再小的字体，更换字库
font-size: 40px;
字重： lighter 100~900，值越大字越粗，只能为整百
font-weight: 600;
行高: 字体文本默认在行高中垂直居中显示
line-height: 200px;
字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线)
text-decoration: overline;
字间距
letter-spacing: 2px;
词间距
word-spacing: 5px;
首行缩进：1em相当于一个字的宽度
text-indent: 2em;
字体颜色
color: red;
文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右)
text-align: center;
2、背景样式
背景颜色
background-color: red;
背景图片：url函数可以链接网络或本地图片
background-image: url('https://www.baidu.com/favicon.ico');
background-image: url("img/001.png")
平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
指定位置偏移：正值往右偏移，负值往左偏移 | 正值往下偏移，负值往上偏移
background-position: 10px 30px
背景定位： x轴（left center right） y轴（top center(默认) buttom）
background-position: right top
边界圆角：
broder_radius: 50%; 是以长宽一半为半径的圆弧
左上是第一个角。顺时针编号，不足找对角数值，只有一个值时能同时控制四个角
broder_radius: 10px 20px 30px 40px;
broder_radius: 10px 20px 30px;
broder_radius: 10px 20px;
broder_radius: 10px;
横向 |纵向
broder_radius: 50% / 30px;
最多8个数据
broder_radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
3、显示样式 display:
block div li
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式，可以自定义标签的宽高
4. block方式显示的标签，用来搭构架，可以嵌套所有显示方式的标签,
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
inline span i b em strong
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：宽高由文本撑开，不支持手动设置该标签的宽高)
4. inline方式显示的标签，只用来嵌套所有inline显示方式的标签
inline-block img input
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，自定义标签的宽高，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
vertical-align baseline 基线 | Middle 中线 | top 顶线
vertical-align：top
overflow 父级的宽高限制子级
hidden:隐藏超出内容 scroll:以滚动显示超出内容 auto:有超出内容才滚动
4、盒模型
什么是盒模型：标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)、外边局(margin)以及内容(content)由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
1）content区域 效果：在最左上角显示一个100*100区域面积的橘色正方形
.box {
width: 100px;
height: 100px;
background-color: orange;
}
content区域就是width x height的面积区域，是用来显示标签内容的区域
2）padding区域
效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形
.box {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的
3）border区域
效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域
.box { /*solid:实线 | dashed:虚线 | dotted:点状线*/
border-style: solid;
border-color: red;
border-width: 20px;
}
padding区域控制着盒模型的边框
4）margin区域
效果：在所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示，而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘
.box {
margin-top: 150px;
margin-right: 150px;
margin-bottom: 150px;
margin-left: 150px;
}
padding区域控制着盒模型的外边距
盒模型布局的地位，盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调
5、浮动
浮动布局，不再撑开父级高度，但浮动受父级宽度影响
float: right
1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示
2. float可以设置left与fight两个值，决定了起始排列的位置与方向
3. 父标签的宽度决定了一行可以排列的子标签个数
清浮动
父级刚刚包含所有字标签，清浮动并不是清除字标签的浮动效果，而是让父级获得一个刚好的高度
clear: both ——清浮动的关键