CSS盒模型

CSS 盒模型

当我们面对一个页面的时候，我们可以将它抽象成一块块矩形区域，页面上的每一个文档元素都占据了这样的一个矩形，像是放在一个个矩形的盒子中，从而我们有了盒模型的概念

这篇文章对CSS中的盒子模型进行一个简单的总结，包括：

• 盒模型的分类
• 宽度和高度
• padding
• margin，margin负值，margin重叠
• border

两种不同的盒模型

盒模型有两种常见的形式，标准盒模型和IE盒模型：

• W3C的标准模型：容器的width和height仅仅表示内容区域（上图中的content）的宽度和高度，增加border、padding和margin都会使元素实际占据的空间变大
• IE盒模型：容器的width和height仅仅表示所有可见区域，也就是content+padding+border的大小，只有margin不被包含在其中

个人理解：IE盒模型更加符合设计的想法，在还原设计稿件的时候也更加便于计算，并且有一些表单元素仍然是按照IE盒模型进行渲染的

我们也可以通过CSS 手动设置盒模型的类型：

/* IE盒模型 */
#div1{
    box-sizing:border-box;
}
/* 标准盒模型 */
#div2{
    box-sizing:padding-box;
}

width 和 height

width 和 height 属性决定了盒子的大小（参见上一小节）

width和height可以取的值有

• length（常用单位：px，em，rem）
• percentage
• auto
• inherit

auto

宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽；高度设置为auto，则会尽可能的窄
注意： 如果没有显式声明包含块的height，则元素的百分数高度会重置为auto

max-width/min-width/max-height/min-height

设置最大最小宽高的好处是可以相对安全地混合使用不同的单位。使用百分数大小的同时，也可以设置基于长度的限制

同时使用这个限制也有助于在不同媒体下的显示，有助于响应式布局下的用户体验

/* IE盒模型 */
#container{
    min-width:960px;
    min-height:100%;
}

min-width/min-height 初始值为0；max-width/max-height 初始值为none

padding

padding，盒模型的内边距，常见的使用场景是避免文字或者图片紧紧贴着容器边缘

对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，垂直内边距不影响行高，但会影响自身尺寸，加背景颜色可以看出

padding可以直接定义四个方向的内边距：

#div1{
    /* 上下左右 10px */
    padding: 10px;
}
#div2{
    /* 上下为 10px 左右 20px*/
    padding: 10px 20px;
}
#div3{
    /* 上 10px 左右 20px 下 30px*/
    padding: 10px 20px 30px;
}

也可以通过 padding-top/right/bottom/left 分别进行设置（一般情况不会这样做的）

注意： 不管是上下padding还是左右padding，当我们使用百分比设置的时候，都是基于width的：

#div4{
    height:200px;
    width:100px;
    padding: 10% 10%;
    /* 你以为上面的效果等同于：padding:20px 10px; */
    /* 并不是，应该是；padding:10px 10px; */
}

所以当我们想要让元素的大小保持一定的比例，不妨给设置padding的百分比，对于一个空元素，我们设置padding:50%;就可以让这个元素表现为正方形

我们也可以利用这一点设置banner在不同宽度下的固定长宽比例：

.banner{
    width:100%;
    box-sizing:border-box;
    border:30% 50%;
    background:url('图片地址');
}

margin

margin，盒模型的外边距，常见的使用场景是让一个元素的可见区域和其他元素分开

margin的定义方法和padding相似，也可以一次性设置四个方向的margin，同样可以分开设置 margin-top/right/bottom/left

margin 的区域是透明的，可以看到父元素的北京等内容

外边距可以应用到行内元素，上下外边距对行高没有任何影响；左外边距应用到元素开始处；右外边距应用到元素结束处

注意： margin通过百分比设置的时候同样是基于宽度的

margin负值

margin和padding的一个非常大的不同点在于 margin可以取负值

当margin取负值的时候可以形成一个视觉上的平移效果，同时对于block、inline、inline-block 的表现略有不同

• block元素可以使用四个方向的margin值
• inline元素使用上下方向的margin值无效
• inline-block使用上下方向的margin负值看会受到vertical-align的影响

同时，在margin负值的影响下还可能造成元素的重叠

• 两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
• 当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
• 当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素

常见的应用场景有多列布局等

border

元素外边距内就是元素的边框border，元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成

border 的样式由三部分构成：宽度、样式、颜色，他们用空格分开

#div5{
    /* 1px 宽度 实线 黑色 */
    border:1px solid #000;
}

同时我们可以使用border-width、border-style、border-color进行分别定义

• 如果要定义单个方向的边框，可以用border-top/right/bottom/left来定义，也可以在后面加上width/style/color
• border-style的值可以为solid（实线），dashed（虚线），dotted（点线），double（双线），groove（凹刻），ridge（浮雕），inset（整体下沉），outset（整体突出）

#div6{
    border:1px solid #000;
    border-top:3px dashed #333;
    border-right-width:2px;
}