一.浮动:让原本竖着排列的元素横着排列

float:left right none
浮动的影响:
1.左浮动找左浮动,右浮动找右浮动
2.脱离文档流,脱离半层,不占位
3.先写的靠边,后写的紧挨着上一个元素

二.清除浮动(高度塌陷问题)

    clear:left right both none(不清除)

1.内容区,内边距,边框,外边距

padding-left,padding-right,padding-top,padding-bottom
padding:四个方向(上右下左)
padding:上下 左右
padding:上 左右 下
[注]撑大元素大小,没有负数和auto

margin-left,margin-right ,margin-top,margin-bottom
margin:上右下左
margin:上下 左右
margin:上 左右 下
[注]不会撑大元素大小
可以为负数
有auto,表示自适应

一.嵌套关系:
1.给父元素添加padding或者边框
2.给父子元素添加浮动
二.并列关系:
只给一个方向设置边距

borde:边框大小 形态 颜色
border-top
border-top-width
border-top-color
border-top-style:solid dashed dotted double

border:30px solid transparent:设置边框透明度
border-left-color:red;
width:0;
height:0;

w=width+左右内边距+左右边框
h=height+上下内边距+上下边框

w=width+左右内边距+左右边框+左右外边距
h=height+上下内边距+左右边框+上下外边距