box-sizing中的IE盒子模型和标准盒子模型

最新推荐文章于 2023-11-27 17:10:36 发布
最新推荐文章于 2023-11-27 17:10:36 发布
阅读量420 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46176479/article/details/107736054
版权
本文深入解析CSS中的两种盒子模型：IE盒子模型（box-sizing:border-box）与标准盒子模型（box-sizing:content-box）。阐述了在不同模型下，width、height、padding及border如何影响盒子的实际尺寸，帮助开发者更精准地控制页面布局。
摘要由CSDN通过智能技术生成

1.IE盒子模型box-sizing:border-box

在这里插入图片描述
width和height包含padding和border在内。
盒子的实际宽度=width（padding和border不会影响实际宽度）
盒子的实际高度=height（padding和border不会影响实际高度）

2.标准盒子模型box-sizing:content-box

在这里插入图片描述

width和height不包含padding和border在内。
盒子的实际宽度=width+padding+border
盒子的实际高度=height+padding+border

nhw649
关注
专栏目录
盒子模型(border、margin、padding、box-sizing拯救布局、圆角边框、阴影)
Learn to value time
12-30 1166
什么是盒子模型？ （1）content：位于最中间，网页的主要显示内容。 （2）border：位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度 （3）padding：位于边框内部的空隙，是内容和边距的距离。 （4）margin：位于边框外部空隙，边框外面周围的距离。 边框 1、边框的颜色border-color 属性 说明 示例 border-top-color 上边框颜色 border-top-color:#369; border-right-color 右边
IE盒子模型box-sizing:border-box
weixin_43444977的博客
05-05 439
box-sizing:content-box; // 标准盒子模型 box-sizing:border-box: //IE盒子模型
IE盒模型和CSS3中box-sizing属性
退回原地等待的博客
04-23 823
标准盒模型–margin+border+padding+content IE盒模型–margin+content（IE5.5及更早） IE盒模型中，content的宽高包含border和padding 改变padding和border时，对布局的影响 标准盒模型下，改变border和padding都会使整个box的宽高改变。 IE盒模型下，一旦设置了width和heig...
盒模型 box-sizing: border-box; / content-box;
漂亮小姐姐的博客
11-24 583
标准盒模型content-box 它的最大特点是，当已经设定了width和height值的时候，padding和border不被包含在你定义的width和height之内，也就是说，你定义的width只负责content区域的宽度，如果想得到整个盒子宽度，需要再加上padding和border的厚度。 这个content-box就是标准模型，诞生最早。content-box顾名思...
标准盒模型、IE盒模型以及box-sizing
rambler_designer
08-12 473
一、前言 实现一个很常规的功能， 鼠标停留出现3个像素的上边框，然而鼠标停留后出现了抖动，审查元素后发现是三个像素撑起了这个元素， 将其余元素向下挤， 才出现了这个抖动，一个比较常用的解决办法是先给元素一个3像素transparent背景的上边框，鼠标停留在将背景色改为其他颜色。这样就不会撑大元素 后来又想起来有个box-sizing， 好像也可以做到，于是尝试了一下确实可以，看了一下mdn文档中对于box-sizing的描述, 做一个记录 二、正文 CSS 中的 box-sizing 属性定义了 use
box-sizing属性，IE怪异盒模型
最新发布
明里灰的博客
11-27 412
当一个放在整个页面的容器，它的宽度定义为 width:100%;假设再添加 padding ，border 或者 margin 则会溢出父容器，是向外扩张的，也就是说设置了之后看不到效果。标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同，可以通过box-sizing来改变元素的盒子模型。，width和height属性其实是。，属性width，height包含了。(内容)的宽度和高度。(边框)，四个部分。
详解CSS3中的box-sizing（content-box与border-box）
12-14
content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式： box-sizing：content-...
css3 盒模型以及box-sizing属性全面了解
12-13
在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。 在W3C模型中: 总宽度 = margin-...
IE盒子模型和标准W3C盒子模型
12-09
主要有两种盒子模型：**IE盒子模型**和**标准W3C盒子模型**。 **标准W3C盒子模型**遵循Web标准，它将每个HTML元素视为一个矩形盒子，包括四个部分：**内容(content)**、**内边距(padding)**、**边框(border)**和**...
CSS3 box-sizing属性详解
09-24
在Web开发中，CSS3的box-sizing属性是一个非常重要的布局工具，它允许开发者改变元素的盒模型，从而更好地控制元素的尺寸和布局。这个属性主要解决了不同浏览器对于盒模型解析方式的差异问题，使得开发者能够更一致...
box-sizing -- 盒模型
weixin_30454481的博客
12-19 138
　　项目开发中，在浏览同事的代码，发现他经常用一个属性--box-sizing，很好奇是什么，于是乎，上网查阅资料学了起来。　　首先我们先复习一下盒模型的组成：一个div通常由 content(内容)+margin+padding+border组成。 　　 　　浏览器有两种盒模型：w3c说的标准模型和ie下的传统模型。也就是css3中box-sizing中对应的属性值。 　　拿盒子的尺寸来...
【CSS】标准盒模型和IE盒模型（box-sizing:border-box）
y_coder的博客
05-22 2415
换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
CSS3 box-sizing属性和IE盒模型
Muge
03-17 8259
盒模型是CSS中很重要的概念，但很多人不知道的是IE5.5及更早的IE浏览器采用的不是标准盒模型，我们称之为IE盒模型。标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。而在IE盒模型中，块级元素的width, height包含了border和padding。这里截取网上的两
table的box-sizing在不同浏览器下的表现不一样
这个昵称没有被占用吧的博客
03-07 1765
下面通过一个实例来说明该属性： <style> html * { margin: 0; padding: 0; } table { width: 100%; border: 1px solid red; box-sizing: content-box!important; ...
盒子模型，box-sizing属性以及标准盒子和IE盒子的区别。
diooo_的博客
07-08 353
盒子模型，box-sizing属性以及标准盒子和IE盒子的区别。
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
qq_36507046的博客
10-15 1173
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
前端学习（42）：边框样式
歌谣的博客
12-08 329
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
前端开发中padding与边框是否包含进height和width的情况
热门推荐
hepcwl的专栏
03-05 2万+
在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含，什么时候又不包含呢？ 首先，任何情况下margin都不包含在height和width内。而padding与边框是否包含则有两种情况。 第一种情况： 在标准盒子模型中 第二种情况： css3里有一个属性box-sizing
CSS盒子模型及属性
qq_59438034的博客
07-20 711
网页设计中常听的属性名内容(content)、内边距(padding)、边框(border)、外边距(margin)，CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS（CascadingStyleSheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制Web页面的外观。Margin(外边距)Border(边框)......
css的盒子模型box-sizing
09-21
box-sizing是用来改变CSS盒子模型的属性，它可以改变元素宽高的计算方式。...content-box对应的是标准盒子模型，而border-box对应的是怪异盒子模型，也是在IE中使用的盒子模型。 回答完问题后，我还可以提供一些
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值