Div{
Width:300px；
Height:400px；
Background:red；
Border:5px,blue solid；
Margin:20px；
Padding:30px；} 普通的是宽370,px，高470px。（宽度就是center+border+padding）
加上box-sizing:border-box 怪异盒模型就是宽300px 高400px
行内块元素，可以设置宽高但是不换行。Display:inline-bolck
Padding :10px 10px 10px 10px 上右下左
Padding：10px 10px
10px 上 左右 下 padding:10px 10px上下 左右
Margin可以给负，会超出边界。
写在下面的会把之前同属性覆盖。
Display: block可以将行内元素变成块元素 inline-block将块变成行内。
行内样式左右的margin生效，上下不生效
Vertical-align:middle 文字居中，可用于图片中，Vertical-align:text-top文字靠上部
Vertical-align:表示文字以什么方式对齐
Ul li:first-child表示在ul中的第一个li
Ul li:nth-child(10)指的是ul中第10个li
Background-position-y:-20px在hover中使用，表示鼠标悬停时跳转到y轴的-20px
Ui li是后代选择器，所有的后代都管用 ui>li{ }这个是子选择器，只有儿子管用。
盒子
Padding 内边距，会改变div显示的宽高，margin外边距
Solid表示实线，broder表示边框
Border-top-width:10px
Border-top-height:10px
Border-top-style:solid这三个组成了broder，需要先固定样式
盒子模型是由margin,padding,content,border组成的
Border,background,font都是复合属性
