高级选择器～伪类～基础样式～盒模型～浮点布局

"""
1、高级选择器：
1) body div 后代，控制后者，前面都是修饰
2) body > div 子代，控制后者，前面都是修饰
3）.d1 ~ .d2 兄弟，控制后者，前面都是修饰
4）.d1 + .d2 相邻，控制后者，前面都是修饰
5）.d1, .d2, body div 群组选择器，控制多个
6）div#div.div 交叉选择器
7）div:nth-child(3n - 1) 先找位置再匹配选择器
8）div:nth-of-type(3n - 1) 先匹配选择器再确定位置
9）[id] [class='d1'] [owen^='o'] [owen*='a'] 属性选择器

2、a的四大伪类
:link 初始
:hover 悬浮，可以运用到一般的标签 cursor：None 没有效果
:active 激活，可以运用到一般的标签
:visited 访问过
text-decoration:none-------下划线无
不能让文本被复制：user-select:None
圆角： border-radius:5px

3、基础样式
1）字体
font: bold 20px/30px '新宋体’, '微软雅黑';
color: red;
font-size：大小
font-family:字族
font-weight: lighter | normal | bolder字重
font-style:样式（不常用）
text-decoration:underline 下划线
line-through中划线
overline 上划线 默认为none
text-align: center;|left |right
line-hegiht： 行高
text-indent:首行缩进
letter-spacing:字间距
2）背景图片
background-image:url()
1显示比屏幕大的图片--缩放尺寸
background-size: 显示的和图片大小基本要一致1:1
尽量只设置宽，高等比缩放 不会失真
2显示比屏幕小的图片--处理平铺
backfround-image:url()
background-repeat:repeat-x | repeat-y | no-repeat |repeat
只设置x轴，y轴默认center
x轴：left center right 具体像素 百分比
y轴：top center bottom 具体像素 百分比
background-position: left top 左上| left bottom 左下|left center
background-position:center center 居中

精灵图案例：资源整合，降低io

3）边界圆角
	border-radius: (固定的值 或者百分比)
	四个角-->按照顺时针方向转动 左上问第一个角
	若不足 找对角
	横纵分离  先横后纵
    border-radius:50px/50%
	
4）显示方式
	inline:不支持设置宽高，不带换行，宽高只能有文本撑开 只能由文本撑开，一行显示不下会自动换行，保留数据的整体性，数字字母 异于 文本  
	inline-block：支持设置宽高，一行显示不下的话不会自动换行（以标签整体换行，标签整体之间有间隙） ----------不好用
	block：换行显示原理  支持设置宽高，自带换行

4、盒模型
广义上任何一个标签都有盒模型
组成：margin + border + padding + content
content: width x height ，作为内容或子标签的显示区域
padding: 上右下左----内边距，没有自身颜色，完成内容的内移（保证显示区域大小不变，可以相应减小content）
border: 1px solid black; | border-bottom: 1px solid black;
宽度，样式（none dashed,solid,dotted-点状线)，颜色（transparent-自身透明，透出背景颜色）
border: 10px orange solid;(顺序可调)
margin: 控制盒子显示位置，left 和top 控制自身，bottom 和right控制兄弟
注：margin的偏移依据当前所在位置
上右下左 | margin: 0 auto

5、浮动布局---（父级的宽度不固定时高度不能设置死）--采用请浮动

				就是在自己宽度是否确定下，保证父级的高度刚刚好包裹好子集
子集浮动参照父级宽度
子集浮动不在撑开父级高度
父级的高度需要子集处理，否则影响兄弟布局
float: left | right

:after {
	content: '';
	display: block;
	clear: both;
}

快速实现水平居中 margin：0 auto

盒模型：margin，padding协调操作，上下位置能用padding尽量用padding，在考虑margin
浮动：需要左右排列的block采用浮动布局，且父级一定要清浮动