float:浮动
none 不浮动
left左浮动
right右浮动
目的:让竖着排列的元素横着排列添加浮动后的元素将脱离文档流
文档流:元素默认从上至下,从左至右的排列顺序
盒模型(div)
任何一个元素都可以看成是盒模型
组成部分:
内容区域: width height
内边距区域:
padding
边框区域: border
外边距区域: margin
margin(外边距)使用方法
margin-left:左外边距;
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
[注]
不会撑大元素的大小
有负数,有auto
margin常见问题:
外边距相遇会重合
解决办法:
兄弟关系:给一个方向足够的值
嵌套关系: 给父元素添加边框或者内边距
padding(内边距)使用方法:
padding-left:左内边距;
padidng-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding:四个方向;
padding:上下左 右;
padding:上左右下;
padding:上右下左;
[注] 会撑大元素的大小 没有负数,没有auto