1CSS选择器
| css选择器 | 代码（以class="nav"<p>为例 |
|---|---|
| (直系)后代选择器 | .nav>p |
| (所有)后代选择器 | .nav p |
| 所有奇数后代选择器 | .nav p:nth-child(odd){} |
| 所有偶数后代选择器 | .nav p:nth-child(even){} |
2 content+padding+bolder+margin 结构
由外到内：
margin 外边距，改变元素的位置
border 边框
padding 填充改变元素的宽度OR高度
3选择器的权重
class选择器的权重大于元素选择器
后代选择器的权重大于单纯的class选择器
4 块标签、内联标签
块标签①独占一行②可以设置width和height
内联标签①并排显示②不可以设置width和height
可以通过“display”属性相互转化
常用的转换： display: inline-block 既有block的宽度高度特性，又有inline的同行特性vertical-align: top;(使元素顶部对齐)
注:
1简便的对齐margin:0 auto;(即上下外边距为0，左右对齐，广泛用于div中)
2border-radius圆角
3background-position-x: center;和background-position-y: center;让背景图水平、垂直方向居中。
4阿里矢量符号库iconfont的使用(www.iconfont.cn/)
fontclass的方法，通过link进行在线引用,eg:
<link rel="stylesheet" type="text/css" href="http:+复制的链接"></link>。 直接在body里面引用即可，eg:<i class="iconfont icon-QQ"></i>
5单位图像拼接形成图像时，横向铺满repeat-xeg:background: #333 url("C:\\Users\\31412\\Desktop\\html\\D2\\t1.png" )repeat-x;同时还有repeat-y\repeat\no-repeat
6透明度 opacity取0到1
7给盒子加阴影 box-shadow:0 0 5px 3px #333;5个参数分别为：阴影水平方向的位移、竖直方向的位移、高斯模糊、阴影的尺寸和阴影颜色。
8font-style: italic; 倾斜
9letter-spacing: 3px; 字体间距
10对于一张图片在水平方向占满一个div:
html
<div class="cont">
<h4 class="title">这是标题</h4>
<img src="C:\Users\31412\Desktop\html\D2\02.png">
</div>
css
.cont{
width: 600px;
height: 1000px;
border: 1px solid #333;
margin: 0 auto; /*左右+上下*/
}
.cont img{width: 100%;}
11可以通过给一个div加背景颜色从而知道它的位置分布
12布局的平均分配
母块dispaly：flex;子块display:flex:1实现布局的平均分配
.sub-nav{ /*母块*/
background-color: red;
display: flex;/*添加*/
flex-wrap: wrap;/*添加*/
line-height: 40px;
}
.sub-nav a{ /*子块*/
text-decoration: none;
color: aliceblue;
display: inline-block;
width: 100px;
font-size: 12px;
text-align: center;
flex: 1;/*添加*/
}