-CSS盒模型和float
一、盒模型
1、margin 外边距(能使用负值,也可用像素值、百分比)
1参数 上右下左
2参数 上下 左右
3参数 上 左右 下
4参数 上 右 下 左
2、border 边框
3参数
(大小 类型 颜色)
solid(实线)
dotted(虚线)
double(双实线)
3、padding内填充(不能使用负值,可用像素值、百分比)
1参数 上右下左
2参数 上下 左右
3参数 上 左右 下
4参数 上 右 下 左
4、display :设置框的类型
inline 行级
block 块级
inline-block 内联块
table-cell 表格单元格
(vertical-align:middle 垂直居中)
二、浮动
float: 定义元素(块区域)的浮动方向
1、 float:left (right none)
2、清除:(left、right、both)浮动布局完成后使用clear加浮动的元素拉回流文档
(1)在之后添加空标签,并用为样式添加clear:both;
(2)伪类,在浮动元素父级添加
#warp:after{
content: "";
display: block;
clear: both;
/*模拟空标签*/
}
(3)浮动元素父级添加float,能够消除子级的float
(4)浮动元素父级加overflow:auto
overflow:scroll(hidden 、 auto)
(5) 给父级加display:inline-block;