CSS浮动与盒模型知识点

一、浮动

让元素脱离文档流
让块级元素在同行中显示

float:left;
float:right;

改变的是Z轴

清除掉
（1）在浮动元素后清除

class;left;   right;    both;

（2）给浮动元素的父级固定高度（块级一行元素独占）

（3）给父级元素添加元素
overflow:hidden;      （裁剪超出div范围的内容）

二、盒模型
用于控制页面间距

1、外边距
margin-top:                   （上边距）
margin-bottom:                （下边距）
margin-left:                  （左边距）
margin-right:                 （右边距）

margin:0 auto;水平方向上居中

简写
margin:10px 20px 30px 40px;  （上右下左）

例：三个值

margin:10px 20px 30px;   上10px 右20px 下30px 左20px    

（通常需要标明4个值，当数据表达不完整时，系统默认上值与下值相等，右值与左值相等；如果只有一个值，系统默认4个值相等）

2、内边距      （产生的间距要计算到容器中）

padding-top:                   （上边距）
padding-bottom:                （下边距）
padding-left:                  （左边距）
padding-right:                 （右边距）

简写与外边距的基本一致；

3、边框

（1）颜色
border-left-color:             （左边距）
border-right-color:            （右边距）
border-top-color:              （上边距）
border-bottom-color:           （下边距）


（2）宽度
border-left-width:             （左边距）
border-right-width:            （右边距）
border-top-width:              （上边距）
border-bottom-width:           （下边距）


（3）样式
border-left-style:solid;       （细实线）
border-right-style:double;     （双实线）
border-top-style:dotted;       （点线）
border-bottom-style:dashed     （虚线）


简写
例：border:1px solid #aaa


（4）去除边框


 例：border-left:none;


（5）圆角边框  （CSS3的效果）


例：border-radius:10px      （圆角的半径为10px）


（6）阴影      （CSS3的效果）
box-shadow:10px 20px 30px 40px red inset;


10px   在水平方向上的偏移量
20px   在垂直方向上的偏移量
30px   模糊程度
40px   模糊尺寸（将阴影的水平，垂直尺寸扩充40px）
red    阴影的颜色
inset  内部阴影


将页面所有的元素去除边距

*{margin:0;padding:0;}