字体属性：
font-family
font-size
font-weight
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
- rgba(255,0,0,0.3)
text-align # 对齐方式 left,right,center,justify
text-decoration # 装饰
text-decoration:none 常用来去掉a标签下划线
text-indent # 首行缩进
背景属性：
background-color
background-image
background-repeat:
repeat
repeat-x
repeat-y
no-repeat
background-position:
right top
200px 200px;
简写：
background: #ffffff url('1.png') no-repeat right top;
边框：
boder-width
boder-weight
boder-color
简写：
boder: 2px solid red;
单独设计样式：
boder-top-style:dotted
boder-top-color:red
boder-right-style:dashed
boder-bottom-style:none
boder-left-style:solid
display属性：
display:none 隐藏元素且不占用空间, visibility:hidden隐藏但占用空间
block 菜单里的a标签可以做成block
inline
inline-block
CSS盒子模型：
margin-top: 5px;
margin:5px,10px,15px,20px; 简写
magin:0,auto 常用居中
padding同理
padding:用于调整内容和边框之间的距离
margin:多用于调整标签之间的距离(相邻标签取margin最大值)
浮动：
div配合float做页面布局
任何标签都可以浮动，浮动之后变成块级，a标签浮动之后可以设置高和宽
float:left right none
clear:
clear: left right both none
清除浮动：
副作用：父标签塌陷问题
1.固定高度
2.overflow:hidden
3.伪元素清除法：
.clearfix:after {
content:"";
display:block;
clear:both;
}
overflow:
visible hidden scroll auto
圆形头像：
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
max-width: 100%;
}
定位：
relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute（绝对定位）
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed（固定）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
返回顶部按钮：
.scrollTop {
background-color: darkgrey;
padding: 10px;
text-align: center;
position: fixed;
right: 10px;
bottom: 20px;
}
脱离文档流：
浮动
绝对定位
固定定位
opacity不透明度：
取值0~1
注意和rgba的区别：opacity改变元素\子元素的透明效果，background-color只改变自身
z-index:
1.数值越大越靠近你
2.只能作用于定位过的元素
position:relative;
z-index:2;
多用于弹框
.modal {
width: 600px;
height: 400px;
background-color:white;
position:fixed;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -300px;
z-index: 1000;
