内容(content)、内边距(padding)、边框(border)、外边距(margin)
oder:1px solid red; 边框的粗细 边框的样式（虚线还是实线） 边框的颜色
border中也有一些属性可以直接调某一个方向上的边框的粗细，样式，颜色
border-left\border-right 调左右边框的粗细
border-style:边框样式
solid:实线 dashed:虚线 none:无边框
border- color:边框颜色
boder-radius:边框弧度
.box1{
background-color: aqua;
width:180px;
heigth:180px;
/* 内容区就是放置标签内容的区域
weigthheight 只是设置标签内容区的大小
内边距：内容和边界border的距离
变迁大小=内容区大小+内边距大小+边框*/
padding: 10px;/* 内边距 */
/*padding-left: 20px;
padding: 10px 20px; 上下内边距为10px，左右内边距为20px
padding: 5px 10px 15px 20px; 顺序依次为上右下左（顺时针方向）*/
border:2px red solid;
border-top-left-radius:10px ;
border-top-right-radius:10px ;/*圆弧程度 */
}
.box2{
width:200px;
height: 100px;
background-color: blue;
margin-top: 10px;
margin-bottom: 10px;
/* margin-left: auto;
margin-right:auto;*/
margin:10px auto;
/*
外边距值可以设置为auto:
左右设置auto时,两边外边距相等 标签水平居中
上下没置auto,外边距为0，上下外边距需要给具体的值
外边距不影响标签大小,只是影响标签的位置
外边距是一个标签到另一个标签的距离
*/
}
元素的总宽度计算公式：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浮动：
网页默认是一个二维平面，在网页中一行行摆放标签，块标签会占一行，行标签只占自身大小。
这种情况下实现网页布局就需要一些方法改变默认的摆放顺序，所以这里引入浮动功能
标准文档流：
不采用特殊定位，和其他排列方法的，默认的排列规则（从左至右，从上至下）。//一般默认的在背景框中的元素都属于标准文档流
浮动的元素会和父级元素分层，左右浮动时，直到遇到外边框或其他浮动元素才会停止（背景这个层级的行内元素会被无视，块级元素照样独占一行）
浮动后的标签不占原来的文档流空间
下面的标签就会向上移动会影响后面的网页布局
解决浮动问题:
1.为父级标签设置一个高度，把父级标签撑开
.father{
height: 200px;
line-height: 180px;
}
2.在浮动的标签后，使用清除浮动属性
<div style="clear: left;">
