08月21, 2017

基础知识之盒子模型

概述

  • 在文档中,每个元素都被表示为一个盒子,它具有如下属性:内容(content),内边距(padding),边框(border),边距(margin)。
  • 盒子模型对用了我们生活中盒子,它们也具有这些属性。
  • 盒子模型是css中的一个很重要的概念,它是页面排版布局的基础。css盒子模型有两种模式:IE盒子模型与w3c标准盒子模型。

w3c标准盒子模型

借图表示:

可以看出,标准盒子模型拥有上面说明的属性,且盒子的内容(content)不包括内边距(padding)和边框(border)。

IE盒子模型

再借一个图:

可以看出,也标准盒子模型不同的是,IE盒子模型的内容(content)包括了内边距(padding)和边框(border),其余没有区别。

举个栗子:

一个paddding为100px,border为10px,margin为50px,宽100px,高50px的盒子,两种模型下盒子占据的空间如下。

标准盒子
宽:100*2 + 10*2 + 50*2 + 100*2 = 520px,高:100*2 + 10*2 + 50*2 + 50*2 = 420px
IE盒子
宽:50*2 + 100*2 = 300px,高:50*2 + 50*2 = 200px

小提示

1、css中,width和height分别指的是内容(content)区域的宽和高,改变元素的内边距(padding),边框(border),外边距(margin)虽不会影响元素的width和height,但是会影响元素所占的位置空间。
2、内边距,边框,边距可以应用于一个元素的所有边,也可以单独应用于某一个边。
3、外边距可以是负数值,可以使用`margin: 0 auto;`来设置一个块级元素水平居中。
4、内边距padding-top,padding-bottom、外边距margin-top,margin-bottom的百分比值(10%),其计算值是相对于其父容器的width来计算的,而不是height。

触发盒模型

IE6 IE7 IE8 IE9 在Quirks怪异模式下,盒模型是一模一样的,都是IE盒模型,即总width=width;

IE6 IE7 IE8 IE9 在标准模式下,盒模型也是一模一样的,都是W3C盒模型, 即总width=width+padding+border;

非IE下的浏览器,如FF、chrome都采用标准模式渲染,都是W3C盒模型, 即总width=width+padding+border;

背景色填充

标准模式下

非IE浏览器下,div的背景颜色充满了padding和border。border透明时,可发现border区域填充了背景色。

IE8和IE9在标准模式下,和非IE浏览器渲染一致,border区域填充背景色;

IE6 IE7标准模式下,border区域不填充背景色;

非标准模式下

IE6 IE7 IE8 IE9在Quirks怪异模式下,border区域都不会填充背景色;

DTD

一般来说正确设置DTD可以帮助浏览器正确地显示网页,大多数浏览器也会根据用户的声明来呈现内容。在没有申明doctype的情况下,浏览器会根据自己的模式来呈现内容,这样不同的浏览器下,显示的页面布局就会不一样,为了网页能兼容各种浏览器,我们最好还是使用标准 w3c 盒子模型。

CSS3 box-sizing

box-sizing属性允许我们特定的盒子模型来展现某个区域的特定元素。其有两个值:content-boxborder-box

当设置为box-sizing:content-box时,将采用标准模式(标准盒子模型)解析计算,也是默认模式。
当设置为box-sizing:border-box时,将采用怪异模式(IE盒子模型)解析计算。

box-sizing应用场景

当我们想做一个宽100px,内边距20px,边框宽2px的布局时。如果此时使用标准盒子模型,我们需要计算内容区域的长度为:100 - 20 - 2 = 78px。而此时如果我们将盒子模型设置为IE盒子box-sizing:border-box,那么我们根本不需要去做计算,直接填入边距与边框值即可,内容值会自行计算,是不是方便很多呢。

本文链接:https://luodao.me/post/he-zi-mo-xing.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。