css盒模型

盒模型:
盒模型--边框：围绕着内容和补白的线，可以设置它的粗细，样式和颜色这是边框的三个属性
如：div{border:2px solid red;}
也就是div{
border-width:2px;边框为2px
border-style:solid;样式为实心
border-color:red颜色为红色
}
border-style的样式有:dashed虚线，dotted点线，solid实线
border-width:可以设置为：thin,medium,thick(一般都用像素)
border-color:是十六进制的颜色
只设置一个方向或多个方向的边框：
div{border-bottom:1px solid red;}

盒模型的高度和宽度：


盒子的宽度=左边界+左边框+左填充+内容宽度+右边界+右边框+右填充
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}


盒模型的填充：元素内容与边框之间的距离
div{padding:20px 10px 10px 30px;}顺序与下面相对应
div{
padding-top:20px;
padding-right:10px;
padding-bottom:10px;
padding-left:30px;
}
如果上下左右都相同则可以这么写：
div{padding:10px;}
上下相同，左右相同时可以这样：
div{padding:10px 20px;}

盒模型边界：元素与其他元素之间的距离（内容与padding基本一样）