WithCoderWithCoderWithCoder

css盒子模型简介

在使用CSS进行网页布局时,所有的html元素都可以看作是盒子。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。本文所说的盒子都等同于 HTML 元素。下图是一个标准的盒子模型:

1-20032Q61915432.png

盒子的组成

    一个盒子由内到外可以分成四个部分:content(内容)、padding(内边距)、border(边框)、margin(外边距)。

盒子的大小

    盒子的大小指的是盒子在页面中所占的宽度和高度。很多情况下,很容易将盒子的宽度和高度误解为 width 和 height 属性。然而默认情况下width和height属性只是设置content(内容)部分的宽和高。

    盒子真正的宽和高按下面公式计算:

    盒子的宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
    
    盒子的高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

    我们还可以用带属性的公式表示:

        盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

        盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

    上面说到的是 默认标准情况下的计算方法。

    另外一种情况下,盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值

        content-box:默认值,width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。此属性表现为标准模式下的盒模型

        border-box:为元素设定的width和height属性决定了元素的边框盒,padding和border被包含在定义的width和height之内。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。此属性表现为怪异模式下的盒模型(IE盒子模型)

1-20032R22F61Q.png

盒子组成分析

margin

    margin,盒子的外边距,它是完全透明的,开发者只可以设置它的边距。margin包含了上下左右四个边,开发者可以单独设置每一条边的边距。

    •     margin-top:上边距

    •     margin-buttom:下边距

    •     margin-left:左边距

    •     margin-right:右边距

    开发者也可以直接使用简写属性margin同时设置四条边的宽度。

padding

    padding表示盒子的内边距(填充)。与margin类似,padding包含了上下左右四条边,开发者可以单独设置每一条边的边距。

    • padding-top:上边距(填充)

    • padding-bottom:下边距(填充)

    • padding-left:左边距(填充)

    • padding-right:右边距(填充)

    当然,开发者也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似。

border

    border表示盒子的边框,它可以设置成可见的,样式多样的。最基本的,border像margin和padding一样可以分别对每一条边进行设置,也可以使用简写属性border进行设置。

    • border-top:上边框

    • border-bottom:下边框

    • border-left:左边框

    • border-right:右边框

    当border属性的色值不明确指定时,如border: 1px solid,边框颜色与当前元素的字体颜色color相同。除了可以单独对每一条边进行样式设置之外,还可以分别对边界的宽度、样式和颜色进行设置,同样可以使用简写属性border进行设置。

欢迎分享交流,转载请注明出处:WithCoder » css盒子模型简介