盒子模型的理解

myshell 发布于2019-08-01 15:05 / 3044人阅读

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。

概述

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

标准盒子模型

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：一个容器的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个容器需要占据的位置为：宽20*2+1*2+10*2+200=262px、高 20*2+1*2+10*2+50=112px，盒子的实际大小为：宽1*2+10*2+200=222px、高1*2+10*2+50=72px；假如用ie 盒子模型，那么容器需要占据的位置为：宽20*2+200=240px,高20*2+50=90px,盒子的实际大小为：宽 200px、高 50px。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

1、提示：背景应用于由内容和内边距、边框组成的区域。
2、提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于多带带的边。
3、提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

那我们开发的时候选择哪中盒子模型呢？
肯定是“标准 w3c 盒子模型”。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。

CSS3 box-sizing 属性 定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用*标准模式*解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用*怪异模式*解析计算；
目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器以怪异模式呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

GPU云服务器云服务器盒子模型 div盒子的切换 html盒子的布局云计算的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49755.html

盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

xiangzhihong 2019-08-30 12:49 评论0 收藏0
「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0
从CSS盒子模型说起

摘要：前言总括对于盒子模型，，和外边距合并等概念和问题的总结原文地址从盒子模型说起知乎专栏前端进击者博主博客地址的个人博客为学之道，莫先于穷理穷理之要，必先于读书。前言总括：对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结原文地址：从CSS盒子模型说起知乎专栏：前端进击者博主博客地址：Damonare的个人博客为学之道，莫先于穷理；穷理之要，必先于读书。正文 ...

happyhuangjinjin 2019-08-29 12:54 评论0 收藏0