标准盒子模型和怪异盒子模型(IE盒子模型)

最新推荐文章于 2022-02-28 21:51:55 发布
原创 最新推荐文章于 2022-02-28 21:51:55 发布 · 330 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

本文深入探讨了CSS中的两种盒子模型：标准盒子模型和怪异盒子模型。标准模型中，元素总宽度包括margin、border、padding及content，而怪异模型下，width直接包含了border和padding。理解这两种模型对于前端布局至关重要，它们影响着元素尺寸的计算和页面布局的表现。了解并正确使用盒子模型可以避免兼容性问题，提升网页设计的精确性。

标准盒子模型

设置方式：border-sizing: content-box（默认）
包含：margin、border、padding、content

怪异盒子模型(IE盒子模型)

设置方式：border-sizing: border-box
包含：margin、border、padding、content

区别

标准盒子的总宽度为： margin+border+padding+content
= margin+border+padding+width
怪异盒子的总宽度为：margin+border+padding+content
= margin + width（2padding+内容+2border）
注意： 怪异盒子的 width 由 border、padding、content 共同组成

前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4132
盒子模型（标准盒子模型和怪异盒子模型）
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
IE盒子模型和标准W3C盒子模型
12-09
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型 从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、conte
标准盒子模型以及IE盒子模型（怪异盒子模型）
m0_51774413的博客
07-24 387
两者都是由content、padding、border、margin构成。 在标准盒子模型中，你定义的width和height只是content这一部分的大小，而在浏览器中所表现出的盒子大小则是content+padding+border所构成 。 例如：width=200px；height=200px；padding=10px；border=1px；这时浏览器所表现出的盒子的width就为200+10*2+1*2=222px；height也是222； 在IE盒子模型中（怪异盒子模型）你所定义的wid
IE-什么是盒模型？
m0_56232007的博客
06-10 2946
IE盒模型 IE盒模型又叫怪异盒模型。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。 IE盒模型与标准盒模型的区别 IE盒模型设置的宽为：整个盒子所占有的宽度。（内容的宽+左右padding+左右border） 标准盒模型设置的宽：内容区域的宽。 设置IE盒模型的方法 box-sizing: border-box； ...
盒子模型的理解---IE怪异盒子模型----面试题学习（一）
henu_GM的博客
02-28 509
盒子模型是什么？ 当对一个页面进行layout的时候，浏览器的渲染引擎会根据CSS基础框盒模型，将所有元素表示为一个个矩形的盒子。 一个盒子模型由四个部分组成： 1、content：实际内容，显示文本和图像 2、padding：内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。 3、border：边框，围绕元素内容的内边距的一条线或者多条线，由粗细、样式、颜色三部分组成 4、margin：外边距，在元素外为整体创造空白...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
标准盒子模型和怪异盒子模型的区别
最新发布
06-21
标准盒子模型（也称为W3C盒子模型）和怪异盒子模型（IE盒模型）是两种描述HTML元素如何占用空间和布局的模型。它们的主要区别在于元素的总宽度是如何计算的。 **标准盒子模型**： - 宽度（width）：元素的内容区域...
CSS盒模型: ie盒模型 / 标准盒模型
充电五分钟...
08-12 2463
元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型 盒模型分为：IE/怪异盒模型 和 W3C标准盒模型。 标准盒模型：width/height = content宽高，不包含border和padding; IE 盒模型： width/height = content + padding + border，包含 border和padding。 Css3新属性box-sizing: content-box | border-box | in.
标准盒模型和怪异（IE）盒模型
yangyiqi的博客
08-05 438
文章参考来源：https://www.cnblogs.com/yky-iris/p/7719895.html 盒子模型的本质就是一个盒子，是一个包围HTML元素的空间，包括：content,border,margin,padding 盒模型分为标准盒模型和怪异（IE）盒模型两种 标准盒模型的计算为：标准盒模型的宽度 = width + 左右margin + 左右padding + ...
标准盒模型和ie盒模型
链珠的博客
11-29 3512
当对一个文档进行布局时，浏览器会对css 基础框盒模型，将所有元素表示为一个个的矩形盒子。 一个盒子由content、padding、 border、margin组成。 <style> .box { width: 200px; height: 100px; padding: 20px; background: pink; } </style> .
标准盒子模型和IE盒子模型
Teheran的博客
02-22 564
标准盒子模型 IE盒子模型 网页中的盒子模型；我们常常要控制盒子模型的宽度width: w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height; iE中的盒子模型的width:也包括margin+...
怪异盒子
weixin_30719711的博客
02-15 853
box-sizing: content-box; 标准盒子模型， 宽高=content的宽高 box-sizing: border-box; 怪异盒子模型（IE盒子模型），宽高=border+padding+content box-sizing: padding-box; 火狐盒子，宽高=padding+content 转载于:https://www.cnblogs.com/adiali...
CSS两种盒模型(标准盒模型&IE盒模型)
Kar29的博客
09-13 7292
CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。 CSS盒模型分为两种：标准盒模型、IE盒模型（也成为怪异盒模型）。 两种盒模型的区别在于他们的总宽度的计算公式不一样。 在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。 标准盒模型 width = 内容（content）的宽度 height = 内容（content）的高度 总宽度：width + margin（左右） + padding（左右） + border
[css] 说说你对低版本IE的盒子模型的理解
歌谣的博客
02-20 564
[css] 说说你对低版本IE的盒子模型的理解 一个CSS盒子由四部分组成，由内到外依次是：content、padding、border、margin。 所谓盒子模型定义的是盒子宽高的计算方法，IE盒子模型的宽高为content、padding、border之和。而W3C盒子的宽高仅为content。从页面布局来说前者实际上更实用一点，这也是后来W3C提供box-sizing属性用于切换盒子模型的原因。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论
盒子模型（标准盒子模型与IE盒子模型）
qq_40818233的博客
08-01 1632
做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。 盒子模型主要分为三大类：标准盒子模型，IE盒子模型，弹性盒子 这篇文章当中主要讲一下标准盒子模型以及IE盒子模型 一、标准盒子模型 在W3C标准下，盒子模型从外到里分别为magin（外边距）、border（边框）、padding（内边距）、conten...
css 怪异盒子模型(ie盒子)
weixin_43294560的博客
01-16 1803
标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距 怪异盒子设置方式:box-sizing:border-box; 设置width='200px’时: 标准盒子: 怪异盒子: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值