CSS3 box-sizing属性和IE盒模型

最新推荐文章于 2024-06-19 15:19:49 发布
最新推荐文章于 2024-06-19 15:19:49 发布
阅读量8.2k 收藏 5
点赞数 1
分类专栏： HTML/CSS 文章标签： css3 css ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc7756789w/article/details/50910612
版权

盒模型是CSS中很重要的概念，但很多人不知道的是IE5.5及更早的IE浏览器采用的不是标准盒模型，我们称之为IE盒模型。

标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。

而在IE盒模型中，块级元素的width, height包含了border和padding。

这里截取网上的两张盒模型的图片：

这里写图片描述

这里写图片描述

他们有什么区别呢？粗看一眼好像两者没有什么区别，但是细想一下，IE盒模型下，一旦设置了width和height，无论改变padding和border为多少，只要在总宽度和高度的承受范围内，都不会改变整体的大小，当然太大了会溢出。而在标准盒模型中，改变padding和border都会使整个box的宽高改变。那么如果把标准盒模型下的box放到IE盒模型下，就会打乱布局，少掉了border和padding，因为他们被width和height包含进去了。

我们发现有时候IE盒模型还是很有用的，比如说可能需要动态改变border的大小，但是又不想让box改变，怎么办呢？

CSS3有一个非常有用但应用不广泛的属性：
box-sizing: content-box | border-box | inherit

content-box，默认属性，遵从标准盒模型。
border-box，是使用IE盒模型。
inherit，继承父类的box-sizing属性值。

浏览器的兼容情况：
Chrome/Opera/IE 支持 box-sizing
FireFox 支持 -moz-box-sizing
Safari 支持 -webkit-box-sizing

我们来看一下其效果：


div.box {
    box-sizing:border-box;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width:200px;
    height:200px;
    border:1em solid green;
    float:left;
}

<div class="box">第一个内容</div>
<div class="box">第二个内容</div>

这里写图片描述

我们将box的border设置更大一点：
border:3em solid green;
这里写图片描述

现在border变成3em了但是box整体的宽高却没有变，当然border再大的话就会溢出了。

如何检测模型？

jQuery < 1.8 的版本中有一个静态属性boxModel用来检测浏览器使用的是IE盒模型还是标准盒模型，返回值是一个Boolean类型。

jQuery1.0新增这个属性: $.boxModel
jQuery1.3 - 1.7 中更改了使用方法，并且将这个属性标记为过时： $.support.boxModel

jQuery1.8后，这个属性已经被移除，估计现在没有多少人会使用这么老的IE了吧。

除了jQuery的检测方法外，也可以用doctype声明使用标准盒模型：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Muge_
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS3 box-sizing 属性 有趣的盒模型
12-13
CSS3的`box-sizing`属性是一个非常重要的样式规则，它改变了元素盒模型的行为，使得开发者可以更精确地控制元素的尺寸。盒模型是CSS布局的基础，由内容(content)、内填充(padding)、边框(border)和外边距(margin)四...
【CSS】box-sizing 属性
小秀的博客
06-09 4108
css中的box-sizing属性
box—sizing 属性的了解
子玉的博客
09-21 1234
它定义了一个元素的内容框（content box）应包含哪些内容，以及内边距（padding）、边框（border）和外边距（margin）是否应该被包含在元素的总宽度和高度中。（默认值）：元素的宽度和高度仅包括内容框，不包括内边距、边框和外边距。这意味着如果你设置元素的宽度为100像素，那么元素的内容框宽度将为100像素，而内边距、边框和外边距将会增加到这个宽度之外。这意味着如果你设置元素的宽度为100像素，那么元素的总宽度将为100像素，包括内容框、内边距和边框，而外边距将增加到这个总宽度之外。
CSS选择器详解与应用实例
最新发布
一起coding，一起嗨。
06-19 732
CSS选择器详解与应用实例
CSS系列之 box-sizing
老__L的博客
02-19 6059
本文主要介绍CSS的box-sizing属性。box-sizing属性定义了如何计算一个元素的总宽度和总高度。
box-sizing的属性及作用详细介绍【CSS3】
zy1992As的博客
01-12 3558
应用“box-sizing: border-box;当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
CSS解读之box-sizing属性
zhanglir333的博客
11-27 1万+
box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。        如图1-1所示，两个div均统一设置属性，然后针对第二个div
css3 盒模型以及box-sizing属性全面了解
09-24
在CSS3中，为了统一盒模型的标准，引入了`box-sizing`属性，它允许开发者选择元素应该遵循哪种盒模型。`box-sizing`有两个可选值： - **content-box**：这是W3C标准盒模型，默认值，元素的宽度和高度只包含内容的...
CSS3 box-sizing属性详解
09-24
在Web开发中，CSS3的box-sizing属性是一个非常重要的布局工具，它允许开发者改变元素的盒模型，从而更好地控制元素的尺寸和布局。这个属性主要解决了不同浏览器对于盒模型解析方式的差异问题，使得开发者能够更一致...
CSS3 box-sizing属性
12-11
说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 ...这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，
[转]CSS解读之box-sizing属性
Admans的专栏
06-09 371
图1-3是第二个div的实际计算大小，这里div的实际宽度为10+10*2+10*2=50px，这么一计算，我们就很明白了，原来在设置了box-sizing为border-box后，容器的高宽就是实际容器的高宽，而不是单纯指的是内容区的大小。图1-3是第二个div的实际计算大小，这里div的实际宽度为10+10*2+10*2=50px，这么一计算，我们就很明白了，原来在设置了box-sizing为border-box后，容器的高宽就是实际容器的高宽，而不是单纯指的是内容区的大小。
盒子模型box-sizing
bestyinjun的专栏
08-15 70
盒子模型box-sizing
【CSS】标准盒模型和IE盒模型（box-sizing:border-box）
y_coder的博客
05-22 2237
换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
box-sizing概述
yangyang的专栏
06-21 1254
box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度 盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。 标准盒模型 box-sizing: content-box content-box: width = content width; height = content height IE盒模型 box-sizing: border-box borde
css-布局- box-sizing 的含义及作用
热门推荐
我有一个梦想的专栏
06-11 1万+
含义 了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。 它支持三种值： box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度 box-sizing: border-box; // 内...
box-sizing: border-box；box-sizing:content-box；讲解
jakelihua
11-20 2130
本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。
css——box-sizing属性
weixin_52512511的博客
07-22 1029
盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content。如果想要盒子模型中的content宽度与通过css width属性设置的宽度相同，则使用。如果想使整个盒子宽度固定(即使padding和border发生变化)时使用。box-sizing 就是指定盒子的大小和结构的。
MDN之Web 开发技术【box-sizing】
极客神殿
08-29 608
CSS中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。 box-sizing: border-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素...
CSS盒子模型box-sizing属性详解
qq_34466755的博客
11-03 1万+
1.content-box chrome浏览器默认的盒子属性值。 content-box的width和height从content算起，不包含border和padding。 2.border-box IE浏览器默认的盒子属性值。 border-box的width和height从border算起,包含border和padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
css的盒子模型box-sizing
09-21
box-sizing是用来改变CSS盒子模型的属性，它可以改变元素宽高的计算方式。box-sizing有三种取值：content-box、padding-box和border-box。其中，content-box是默认值，对应CSS2.1规范中的标准盒子模型；padding-box...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值