盒子模型和列表符样式笔记

盒子模型

外边距
margin:10px;四边外边距为10px *

margin:10px 20px;上下 左右

*容器居中 margin:0 auto;上下 左右，需要注意：容器居中，必须给容器设置宽度

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

margin:10px 20px 30px 40px;上 右 下 左 *顺时针方向

margin-left:10px;左边距
margin-right:10px;右边距
margin-top:10px;上边距
margin-bottom:10px;下边距

内填充，文字与容器之间填充的距离
padding:10px; 设置四边
padding:10px 20px;上下 左右
padding:10px 20px 30px;上 左右 下
padding:10px 20px 30px 40px;上 右 下 左 *顺时针方向

padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

实际div的width=width+padding;
保证div实际的宽是200
.div1{padding:20px; width:160px;}

CSS3中box-sizing: border-box;可以解决此问题，填充padding时不加宽容器
.div1{padding:20px; width:200px; box-sizing:border-box;}

边框，边框也会加宽容器，如果不想书写边框后加宽容器使用box-sizing:border-box;

border:表框粗细 边框样式 颜色;
border:1px solid red