css盒子模型

上图为盒子模型的结构图由4个部分组成
 

Margin(外边距) - 清除边框外的区域，外边距是透明的。

如果此数值为0 内部会紧贴页面边缘

Border(边框) - 围绕在内边距和内容外的边框。

可以显示块元素或者转换为块元素的大小

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

内容到边框的距离

优化视图 可以使内容不会紧贴边框

Content(内容) - 盒子的内容，显示文本和图像。

你所展示的内容

快速查看方式 

可以提供鼠标右键进入网页检查页面 找到已计算选项查看盒子模型

常见选项

border: 10px solid red; 表示border部分为10个像素大小 为实线 颜色为红色

box-sizing: border-box; 使盒子不会自行变大 

比如盒子为width: 100px; height: 60px; 那边框+内边距+内容一共为100像素宽 60像素高

如果不设置 那只有内容为100像素宽 60像素高

margin/border/padding/content-top/bottom/left/right:大小：

每部分都可以设置大小

输入1个值表示上下左右

输入2个值表示上下+左右

输入3个值表示上+左右+下

输入4个值表示上+右+下+左

特殊

互相嵌套的块级元素,子元素的margin-top 会作用在父元素上面

解决方法:

给父元素设置border-top或者padding-top

给父元素设置overflow：hidden：

设置浮动

转成行内块元素