CSS盒子模型理解

责编:menVScode 2018-01-18 23:30 阅读(843)

        前言

        盒子模型,英文即box model。无论是div、span、还是a都是盒子。

        但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。

        盒子中的区域

        一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:

width和height:内容(content)的宽度、高度(不是盒子的宽度、高度)。
padding:内边距。
border:边框。
margin:外边距。

        盒子模型的示意图:

QQ截图20180118232648

        代码演示:

QQ截图20180118232832

        上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

        注意:宽度和真实占有宽度,不是一个概念!来看下面这例子。

        标准盒子模型和IE盒子模型

        我们目前所学习的知识中,以标准盒子模型为准。

        (1) 标准盒子模型:

 QQ截图20180118233015

        (2) IE盒子模型:是怪异模式(Quirks Mode)下的盒模型

QQ截图20180118233101

        上图显示:

        在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: 内容、内边距、边框、外边距。

        在 CSS的标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。

        注:Android中也有margin和padding的概念,意思是差不多的,如果你会一点Android,应该比较好理解吧。区别在于,Android中没有border这个东西,而且在Android中,margin并不是控件的一部分。

        CSS3属性box-sizing

        QQ截图20180118234157

        如果我们想要一个宽度为200px的盒子,那么我们直接设置宽度为200px。当再设置它的左右边框和左右补白后,它的内容区会自动调整。CSS代码如下:

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

       具体介绍可查看此片文章:怪异盒子模型:css3 box-sizing布局

标签: 盒子模型 css
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码