美文网首页
盒模型详解

盒模型详解

作者: 超级关 | 来源:发表于2019-01-16 22:58 被阅读0次

盒模型,英文名:“box model”。所有的html元素都可以被看作一个盒子,而盒模型描述了元素所占空间的内容。每个盒子包括有外边距(margin)、边框(border)、内边距(padding)和实际内容(content aera)。

如图所示:
Box.png

下面,来介绍具体一下盒模型中的基本元素

content area

盒子的中心是内容contentcontent可以是任何元素,我们可以给content设定宽度width和高度height等属性来确定内容大小。

border

有了内容,可以给内容设定一个边框border将里面的内容包裹住。给元素设定border是比较常见的方法。如果当你在做布局时,写了几组块级元素而又搞不清楚他们互相嵌套的关系,或者想要知道一些元素实际的空间,可以给加上给他们加上border: 1px solid red;1像素的红色实线边框,就一目了然了。
值得一提,如果要让盒模型显示边框,一定会占用元素的空间。如果不想占用元素的空间,可以给元素设定outline,既可以显示元素的边框,又不会占空空间。

padding

padding是盒模型中的内边距,顾名思义,就是内容距离边框的内部距离。padding的值不能为负。我们可以给padding分别设定padding-toppadding-bottompadding-leftpadding-right四个属性来设定元素的上下左右内边距,也可以将padding的四个属性都写在一个padding中来表示。根据padding中值的指定个数,有如下四种情况,可以视情况而定。

  • 指定一个值时 该值指定四个边的内边距
  • 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
  • 指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
  • 指定四个值时分别为上 右 下 左(顺时针顺序)
margin

margin是盒模型中的外边距。在网页中看到的相邻元素间分隔的距离,呈现出的优美效果,通常都是给元素设定的margin属性起的作用。我们同样给margin设定margin-topmargin-bottommargin-leftmargin-right四个属性来确定四个方向的边距。具体的用法可以参照上述padding的用法。
有趣的是,我们可以给元素设定负margin,而这在css规范中是被允许的,并且是很常见的。可以增加块状元素宽度,在不给元素设定浮动或定位的情况下,就能让元素进行位移。

box-sizing

box-sizing属性是用于更改用于计算元素宽度和高度的默认的CSS盒模型。box-sizing有两个值,content-boxborder-box ,那两者都有什么区别呢?

  • content-box是默认值,就是标准的盒子属性。其中元素的宽度width和高度height在计算时只是包括内容contentwidthheight,并不包含bordermarginpadding这些元素。
  • border-box则不同,元素的宽度width和高度height在计算时不但包括内容contentwidthheight,还包括了borderpadding三样东西加在一起构成的,等于是元素的宽高等价于包括border内部的宽高。

所以在CSS中我们经常会设定这样一条属性box-sizing: border-box;,便于计算盒模型的宽高。

总结

知道了上述有关盒模型的基本概念,我们可以自己动手,在浏览器中检查元素,在样式中就可以看到所选元素的盒模型了,如下图所示chrome浏览器的盒模型,一起来试一下吧。


chrome.png

相关文章

  • 盒模型详解

    盒模型,英文名:“box model”。所有的html元素都可以被看作一个盒子,而盒模型描述了元素所占空间的内容。...

  • CSS盒模型详解

    盒模型基本概念 盒模型本质是一个盒子,包括边距,边框,填充,和实际内容。 标准盒模型和IE盒模型 不同在于高度和宽...

  • 详解CSS盒模型

    盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型,才能正确的使用盒模型进行页面布局。在这篇文章中,我们将深...

  • 详解CSS盒模型

    前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是...

  • CSS面试题

    1、盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding +...

  • CSS面试题

    1、 盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding ...

  • CSS盒模型和BFC

    盒模型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型 IE盒模型也称border-box。属性width,...

  • 前端第四天

    前端第四天 目录: 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

网友评论

      本文标题:盒模型详解

      本文链接:https://www.haomeiwen.com/subject/wkevdqtx.html