【无标题】HTML5基础——盒模型

一、什么是盒模型

每一个标签都是一个矩形，就像一个盒子，HTML页面的布局就可以理解为多个盒子组合嵌套排列而成的。

二、盒模型的组成

1.width

width为宽度，单位为px(像素)

2.height

height为高度，单位为（像素）

3.padding

padding为内边距，可以设置一到四个值，顺时针赋值，从上开始，可以增加盒模型的面积。
盒模型面积公式：S = (border-left+ padding-left+ width + padding-right + border-right) *
(border-top + padding-top + height + padding-bottom + border-bottom)

4.border

border为边框，他有三个属性，分别为线宽（border-width）、线型（border-style）、线色（border-color）。
线型分为实线（solid）、虚线（dashed）、点线（dotted）、双线（double）。边框同样会增大盒模型的面积。
变为圆角：border-radius：px;(""为圆角弧度)，当_px换成50%时且标签长宽为0时，图形为圆。
当标签长宽为0，边框四边其中三边换成透明颜色是，所运行出来的图为三角形。（透明色：transparent）

5.margin

margin为外边距，外边距同内边距一样，可以设置1~4个值，顺时针赋值，从上开始。
注意：叠压现象，常态下，兄弟标签间的上下间距以大值为准。
塌陷问题产生的原因：常态下，父级的第一个子级标签是个块标签，并且使用了margin或者margin-top;解决方案：1、在父级使用border；2、不使用margin，在父级使用padding-top；3、父级使用overflow：hidden。

三、怪异盒模型

正常盒模型向外扩展，怪异盒模型向内压缩。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了盒模型的使用，虽然简单，但都很重要。