float:浮动; none 不浮动 left 左浮动 right 右浮动
目的: 让竖着排列的元素横着排列
添加浮动后的元素将脱离文档流
文档流: 元素默认从上至下,从左至右的排列顺序
继承: 子元素未设置,但是父元素有设置的css属性作用到了子元素身上
盒模型: 任何一个元素都可以看成是盒模型
组成部分:
内容区域: width height
内边距区域: padding
边框区域: border
外边距区域: margin
使用方法:
padding-left:左内边距;
padidng-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding:四个方向;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
【注】
会撑大元素的大小
没有负数,没有auto
margin-left:左外边距;
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
【注】
不会撑大元素的大小
有负数,有auto
margin常见问题:外边距相遇会重合
解决法办法:
兄弟关系: 给一个方向足够的值
嵌套关系:
给父元素添加边框或者内边距
border:边框大小 形态 颜色;
border-color:边框颜色;
border-style:边框形态;
border-color:边框颜色;
border-left-color:左边框颜色;
border-left-style:左边框形态;
border-left-width:左边框大小;
三角形:
border:30px solid transparent; 先设置透明的边框
border-left-color:red;给左边框设置红
盒模型大小计算:
W = width + 左右padding + 左右边框 + 左右外边距
H = height + 上下padding + 上下边框 + 上下外边距