简述html盒模型原理,简述盒子模型

什么是盒子模型？：

标签是矩形的，这个矩形的标签就是一个盒子，也就是说我们一张

网页，就是一个一个盒子堆起来。把所有的网页元素都看成一个盒子，

它具有：content，padding，border，margin四个属性，这就是盒

子模型。

当我们打开浏览器查看元素时，会显示如下图所示的盒子模型：

盒子模型的属性:学习盒子模型也就是说需要学习几个属性，来设置这个盒子模型(美化，布局)

Content：

盒子的内容 width 盒子内容宽度 height 盒子内容高度，注意块标签可以设置宽度和高度；行内标签不能设置宽度和高度，行内它的宽度由内容决定，高度由font-size决定 。width和height可以设置百分比，是父元素的百分比。

Padding：

盒子的内边距(补白)，盒子内容与盒子边框之间的距离，上下左右都有padding，有些标签有默认的padding *{padding：0}值的设置按顺时针。主要用于

调整内容与border之间的间隙 padding在页面是占空间的

。

Margin：

盒子的外边距

盒子边框之外的距离，也分上右下左，值的设置按顺时针。有些标签有默认的margin， *{margin:0}、margin-top margin-right 、margin-bottom 、margin-left。主要应用：*{margin:0} 水平居中 网站顶部背景100%宽 版心最新版居中margin对于块标签在四个方向上都有作用，对于行内标签，只在水平方向上有效，在垂直方向上无效。

margin重叠(塌陷)：

2个前提：男标签，垂直方向。

兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先。

解决方法：

方法1：给男的变成不男不女的。

方法2：浮动(浮动元素是不会塌陷的)。

父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠。

解决方法：

方法1：给父元素设置border-top，不想要边框，使用transparent。

方法2：给父元素设置padding-top。

方法3：给男的变成不男不女的。

Border：

盒子的边框，盒子的边框也是有上边框，右边框，下边框，左边框。border:粗细 线型 颜色 例子；border:1px solid red;border-top 、border-right 、border-bottom 、border-left 、border-width 、border-style 、border-color、border-top-width xxx  border在页面是占空间的，border可以实现小三角{border: 10px solid transparent;border-top: 10px solid red;}。

Background：

盒子背景

背景默认情况下会填充内容和padding

background-color:

background-image:

1，默认水平和垂直方向都会平铺

2，如果空间不足，图片也会显示，只是显示不完整

3，url后面的路径引号可加可不加

4，背景图片默认会填充border,padding,content

background-repeat:、background-position:、background-attactment:

盒子模型需要注意事项：

1，对于女标签来说，

width和height设置无效。

2，width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性。

3，对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定。

4，有些标签有默认的padding值，如ul、ol等。*{padding:0}。