css-4

列表
list-style:none; 去除标志  disc square circle
浮动
让元素脱离文档流
让块级元素在同行中显示
float:left;
float:right;
改变的是z轴

 清除浮动
(1)在浮动元素后清除
 clear:left;  right;  both;
(2)给浮动元素的父级固定高度（块级元素独占一行）
(3)给父级元素(height:auto;)
   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
两个值
margin:10px 20px; 上10px 下10px 左右20px
一个值
margin:10px  所有的10px

行级元素
margin-left   margin-right

2、内边距(产生的间距要计算到容器中)
padding-top:
padding-bottom:
padding-left:
padding-right:
padding:10px 20px 30px 40px ；(上右下左)
padding:10px 20px 30px; 第四值等于第二值
padding:10px 20px ;上下10 左右20
padding:10px 所有的值


3、边框（计算到容器中）
颜色
border-left-color:
border-right-color:
border-top-color:
border-bottom-color:

宽度
border-left-width:1px
border-right-width:
border-top-width:
border-bottom-width:

样式
border-left-style:solid 细实线
double  双实线
dotted  点线
dashed  虚线

简写：
border:1px solid #aaa;

去除边框
border-left:none

圆角边框
border-radius:10px;  圆角的半径

阴影
box-shadow:10px 20px 30px 40px red inset;
10px 在水平方向上的偏移量
20px 在垂直方向上的偏移量
30px 模糊程度
40px 模糊尺寸（将阴影的水平，垂直尺寸扩充40px）
red  阴影的颜色
inset  内部阴影(不写时默认为外部阴影)

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

*{margin:0;padding:0}

小结：主要练习了浮动，外边距、内边距、边框（注意其简写方式）