Css单位
px:像素；cm厘米，mm毫米，
em,%:相对，他爹，父容器，如果他爹宽度100px,设置80%就是80px
rem:相对于根元素（html）
css属性
字体属性
|
属性 |
含义 |
取值 |
|
font-family |
字体体系 |
字体名称，如宋体 |
|
font-size |
字体大小 |
|
|
font-style |
是否倾斜 |
normal/italic/oblique/inherit |
|
font-variant |
是否大写 |
normal/small-caps/inherit |
|
font-weight |
字体粗细 |
normal（400）/bold（700）/bolder/lighter 100/200/300……900 |
文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等。
color：设置文本的颜色
text-decoration:
none：默认值，没有装饰效果
underline：加下划线
overline：加上划线
line-through：加删除线
text-align:文本对齐方式
left 左对齐
right 右对齐
center 居中对齐
direction：
ltr:自左至右；rtl:自右至左
text-indent:首行缩进
letter-spacing:字母之间的间距
word-spacing:字（单词）间距
line-height:设置行高，实际上是调整行间距
背景属性
background-color:背景色
background-image:设定背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性值封装到一个属性background中，书写书序是：
位置backgroud-position
表达更加简洁
background: green url("../pic/js.jpg") no-repeat right top;
显示相关属性
隐藏元素的方法：
（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none，不仅隐藏内容，且不占位置
盒子模型
（1）padding:上 右 下 左；
（2）padding：11px 12px;不管是几个值，按照顺时针方向排起来，没有和对面一样
（3）border:宽度 边框颜色 边框样式（实线、虚线）；border-radio圆角
（4）box-sizing
box-sizing: border-box; /*宽度是边框 */
box-sizing: content-box;/*宽度是内容 */
定位（position）
一般设定了定位属性，会配合top、left、right、bottom等属性来控制位置
Static:没有定位，写不写都一样。
Relative相对
参照物：他自己之前的位置。
设置相对Relative定位之后，对其他元素没有影响：不会脱离文档流
absolute
参照物：设置的定位（relative、absolute、fixed,不能是static）的属性的 最近一个祖宗；父相子绝：（父元素设置相对定位，他自己设置绝对定位）
设置绝对定位之后会脱离文档流，
Fixed
参照物：浏览器，不会随着页面的滚动而滚动。
脱离文档流
z-index：如果2个元素重叠了，可以通过z-index去设定层次，谁的值大谁在上面
浮动
他是布局的一种方式，
（1）脱离文档流
（2）子容器设定浮动之后，将不能再撑起父容器高度
清除浮动
（1）给直接给父容器高度
（2）给他爹设置overflow: hidden;
（3）在子元素 同级的地方 ，添加一个空白元素，空白元素设置clear:both
（4）伪类清除浮动clear: both; ====本质和（3）是一样的
#div0:after{
content: "";
display: block;
clear: both;
}