在浏览器渲染页面的时候,每个元素都会被渲染为一个矩形。

我们可以用CSS来指定任何元素的任何方向的边距和边框大小,浏览器会根据CSS的写法,来确定矩形的外边距(margin)/边框(border)/内边距(padding)以及内容宽高(content area)。

content area是元素内容部分真正占用的空间大小。

内边距padding指的是,元素和边框之间的距离。

可以通过CSS的border属性设置元素边框宽度。

外边距margin用来指定元素外所占区域,在margin区域虽然没有本元素的内容,其他元素也无法显示在这片区域——除非其他元素通过特殊方式脱离了文档流。margin通常用来指定元素之间的距离。

热身练习

请完成一个宽高均为100px,内边距为20px,边框为10px,边框颜色为蓝色,外边距为5px的div,将其position属性设置为absolute。并打开chrome控制台中观察查看该元素的盒模型。

在控制台中显示如图:

代码如下:

<div class="box"></div>
html,body{
    height: 100%;margin:0;
}
.box{
    position: absolute;
    margin:5px;
    padding: 20px;
    width: 100px;
    height: 100px;
    border: 10px solid lightblue;
}

说明:将元素设置为position:absolute;的原因是默认的div元素宽度为父元素宽度,你会看到元素的margin被拉长置整个屏幕,难以观察正常的marign大小。

另外,无论是外边距/边框还是内边距,其任何方向的宽度都可以单独指定,如margin-lefg:5px;margin-right:10px;的意思是让元素的左侧外边距为5px,右侧为10px。

盒模型进阶

width 和 height

问:经过刚刚的观察,请问你知道,当我们设置一个元素的width和height属性的时候,设置的是元素的哪部分宽高吗?是内容宽高?还是内容加内边距?还是其他?如果不能确定,请返回上面的代码重新调试,直到能给出确定答案为止。

答案:width和height设置的是内容(content area)宽高。内边距,边框和外边距均不受影响。在工作的过程中,我们经常会遇到希望大量元素排列整齐,大小划一的情况,也就是保持元素内容宽度+内边距+边框的总宽高保持一致。这种情况下应该将元素box-sizing属性值设置为border-box,此时的width和height属性设置的就是元素内容宽高+内边距+边框的总宽高了。上面的例子加上此属性的效果如下:

.box{
    position: absolute;
    margin:5px;
    padding: 20px;
    width: 100px;
    height: 100px;
    border: 10px solid lightblue;
    box-sizing: border-box;
}

注意到,内容宽度(40)+内边距(20+20)+边框(5+5)的总和为100。

background-color

问:当我们为元素设置background-color属性的时候,到底设置了哪部分的背景颜色呢?是内容部分吗?还是内容+内边距?还是其他?

答:是内容部分+内边距部分,无论box-sizing设置为何值,background-color属性均会设置内容+内边距部分的背景颜色。

将margin设置为负值会怎样?

不要觉得异想天开,将margin设置为负值是一种非常常用的居中手段。请观察下面的例子,在下面的例子中,父元素为蓝色,宽度和高度均为300px,子元素为红色,宽度和高度均为100px。

需求:让子元素水平且垂直居中于父元素,如图:

下面的代码将通过设置magin为负值来实现居中。

<div class="parent">
    <div class="child"></div>
</div>
.parent{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: blue;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: -50px;
    margin-top: -50px;
}

首先通过绝对定位将子元素定位到50%,50%的位置,然后通过设置margin为负值,让子元素向左向上移动自身一半的宽度,从而实现水平、垂直居中。

总结

盒模型是CSS中非常重要的一部分基础知识,每一个前端从业者都应该对盒模型非常熟悉。盒模型也有非常多的玩法,如上例讲的居中手段。也有一些坑,比如当两个元素临近时,其margin部分会重合,因此还需要我们在工作中不断加深对盒模型的熟悉和理解。

这个系列文章逐渐迁移到gitbook,请赏光

https://3riccc.gitbooks.io/-30-demo/content/