初相识——HTML5 盒模型

目录

1.关于什么是盒模型

2.每个盒模型的基本组成：

3.内边距的注意事项：

 4.边框（border）的主要实现属性：

               （1）一些线的实现                                               

5.外边距（margin）的主要实现属性：

              （1）.叠压现象

              （2）.塌陷问题                                       

---

1.关于什么是盒模型

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

2.每个盒模型的基本组成：

宽度（width）、高度（height）、内边距（padding）、边框（border）、外边距（margin）。

3.内边距的注意事项：

Padding 的赋值有4位，从上开始顺时针（上、右、下、左）赋值，并且padding会增加盒模型的面积。

·padding-top

·padding-left

·padding-bottom

·padding-right

4.边框（border）的主要实现属性：

它本身具有一些复合属性：border-width border-style border-color。而且它也会增加盒模型的面积。

其中

border-radius是设置盒模型的边框，其大小是盒模型长度、高度的一半，

border-right-color:transparent是设置边框右边的颜色为透明色。

（1）一些线的实现

dashed	虚线
dotted	点线
solied	实线
double	双线

 

5.外边距（margin）的主要实现属性：

margin的赋值有4位，从上开始顺时针从上开始赋值，

注意：

在使用Margin时要注意两个问题

（1）.叠压现象

在常态下，兄弟标签的上下间距以大值为准。

（2）.塌陷问题

因为，在常态下，父级的第一个子级标签是一个快标签，并且使用了margin或者margin_top.

解决方案：

1）：在父级使用border(但会增加盒模型面积)。

2）：不使用margin-top,在父级使用paddind-top(会增加盒模型的面积)

3）：在父级使用overflow:hidden