内容(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，左右内边距为20pxpadding: 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;">