文档章节

盒子模型的理解

名字已被取
 名字已被取
发布于 2016/03/14 23:12
字数 1207
阅读 58
收藏 1

概述

  • 网页设计中常听的属性名:内容(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"。这可令浏览器以怪异模式呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。


本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型

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

i33
2012/11/06
79
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
327
1
Web前端面试指导(九):盒子模型你是怎么理解的?

问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的。 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒...

智学无忧1
2017/05/03
0
0
DIV+CSS盒子模型

CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们...

晨曦之光
2012/04/24
137
0
【前端帮帮忙】第8期 关于BFC,你需要了解的

BFC是耳熟能详的一个东西了,经常听到,其实在项目中也经常用到,比如最常用的清除浮动,自适应两栏布局等等。只是都没有去深究其原理和相关的知识点,今天就一起来好好学习一下吧。 要明白是...

大志_前端
06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

postman批量测试

postman批量调用: 先单个调用,成功了 再save为collection 再点击三角形,点击run 设置1000次,run就可以 见《postman批量测试.docx》

Danni3
29分钟前
8
0
js 对象操作 js 对象和对象赋值 去除关联性 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

当我们在项目需要 复制一个对象到另一个对象并且 被复制的对象不能受复制后的对象的影响。 我先总结下 我们哪些方法可以复制对象 // 直接赋值var obj1 = { a: 1 };var obj2 = obj1;...

xiaogg
31分钟前
7
0
Go微服务全链路跟踪详解

在微服务架构中,调用链是漫长而复杂的,要了解其中的每个环节及其性能,你需要全链路跟踪。 它的原理很简单,你可以在每个请求开始时生成一个唯一的ID,并将其传递到整个调用链。 该ID称为C...

倚天码农
45分钟前
6
0
QML笔记-对QML中信号与槽的基本认识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq78442761/article/details/90753986 目录 基本概念 演示...

shzwork
51分钟前
5
0
SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

xiangyunyan
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部