2021-12-03

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都是复合属性