深入理解盒模型

这篇文章帮助你深入理解盒模型。

1.生活中的“盒模型”————鱼缸

假设一个“卖鱼缸”的商家，当前新进了两个鱼缸，需要存放在库房中。库房存放基本要求：

鱼缸大小： 100×100
包装纸箱容量： 110×110
包装纸箱厚度： 5（4个方向）
放入纸箱与鱼缸之间的泡沫：5（4个方向）
纸箱与墙壁、其他纸箱间隔：5（4个方向）

2.盒模型基本知识

在HTML当中，每个元素在浏览器中的解析，都可以被看作一个“盒子”。完整的盒模型是由width,height,border,padding,margin这几部分属性组成

3.盒模型————width与height属性

width用于设置元素的宽度；height用于设置元素的高度。

1
2
3

// 基本语法
width: 100px;
height: 100px;

width属性的属性值

值	描述
auto	默认值。浏览器可计算出实际的宽度/高度
length	使用px,em,cm等单位定义宽度/高度
%	定义基于包含块（父元素）宽度的百分比宽度/高度
inherit	规定应该从父元素继承 width/height 属性的值

4. 盒模型————margin属性

设置一个元素外边距的宽度。外边距，可以理解为当前元素与父级或其他兄弟级元素之间的距离。

1 2	//基本语法 margin: 5px 5px 5px 5px;

4个属性值分别表示 “上-右-下-左”，3个属性值时分别表示“上-右左-下”；2个属性值分别表示“上下-右左”；1个属性值表示4个方向。

也可以写成下面形式

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

margin的特殊应用：将元素的水平方向 margin 值设置为 auto，能够让块元素在父级当中水平居中。

5. 盒模型————padding 属性

padding ,内边距，可以理解为当前元素与元素边框之间的距离。基本用法与margin 类似。

注意：

(1) padding 值与 margin 值类似，都有1～4个值，计算的方式方法也相同。

(2) padding值也有padding-left等4个方向的分写方法，分写方式使用很少。

(3) padding 值并没有负值，设置负值时相当于0.

(4) padding 值的单位设置为百分比时，也是按照父级宽度进行计算的。

6. 盒模型————border 属性

border 是一个复合属性，一个边框包括边框的宽度、边框的颜色以及边框的类型。

1
2
3

边框宽度： 以px等为单位。
边框颜色： 十六进制颜色值或单词。
边框类型： solid,dotted,dashed等

border 属性可分写:

1	border-left-width: 10px;

大部分情况下是用缩写方法

值	描述
border-width	设置边框宽度
border-style	设置边框宽度
border-color	设置边框颜色
border-left	right	top	bottom	设置左/右/上/下边框，需要包含边框宽度、边框样式、边框颜色
border	设置4个方向的边框宽度、样式、颜色

7. 盒模型的问题区

(1) margin: 0 auto中的auto是什么含义？

auto 表示横向的外边距自动，此时，左右外边距的具体的值为：（父级元素内容区宽度-含边框内边距的当前元素宽度）/2.

(2) 只有块状元素才能通过 auto 实现在父级元素中水平居中。

(3) 如果不为div元素设置宽度，默认这个div 会占据父级内容区的100%.

(4) margin 值可以设置为负值。

(5) 设置边框宽度、颜色、样式中的任意两种，会是什么效果？

默认的边框颜色为黑色，默认边框粗细为3像素，必须设置“边框样式”属性，才能触发边框效果。

(6) border: 0;与 border: none; 的区别;

border: 0; 表示设置边框，但是边框的宽度为0,此时浏览器会正常渲染元素的边框效果，会占用内存空间并且，所有浏览器均能够正常使用。

border: none; 表示不设置边框，浏览器不会进行任何渲染，不会占用内存空间；IE6、7不兼容。

(7) 盒模型单位选择： PC端 px使用居多；移动端百分比、em、rem这种相对度量单位使用居多。

(8) 盒模型大小与元素实际宽高值并不相同。

盒模型的宽度/高度 = 左右外边距 + 左右边距 + 左右内边距 + width/height

(9) 父子之间用 padding ，兄弟之间用 margin

(10) 纵向外边距会叠加。（原因是最初HTML的p标签）两个外边距值取较大的那个。

(11) 使用背景颜色而非边框标识元素的原因。

在实现模块具体操作之后，这个边框是需要被删除的，如果仅删除了边框而没有调整width和height的大小，就会导致盒模型大小发生变化。如果采用背景颜色，并不会占据盒模型的空间大小，再实现页面之后将背景颜色删掉，不需要针对当前元素进行任何其他操作，相对方便简单。

(12) 当子元素的盒模型大小超出了父级元素的内容区大小，会引发问题。

(13)试试以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border 的特殊效果</title>
   
    <link rel="stylesheet" type="text/css" href="reset.css">
    <style>
        .box {
            width: 0px;
            height: 0px;
            border-width: 450px;
            border-style: solid;
            border-color: red black green yellow;
        }
    </style>
</head>
<body>
<div class="box">1</div>
</body>
</html>