HTML CSS的标准盒模型与怪异性盒模型的区别

已于 2023-03-11 10:11:28 修改
阅读量77 收藏
点赞数 1
文章标签： css css3 html5
于 2023-03-11 10:10:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1324837/article/details/129459470
版权

标准盒模型

标准盒模型=width +padding+border

 

 这里面的一个小盒子的总宽width加上padding跟border 最终的结果

怪异性盒模型 ：

怪异性盒模型=width+padding+border

                           这里面的一个小盒子的总宽width没有变 所加得padding跟border都在这个小盒子上小盒子的大小没变

小滕的腾
关注
详解CSS 怪异盒模型和标准盒模型
09-24
盒模型分为两种主要类型：W3C标准盒模型和IE怪异盒模型，这两种模型在处理元素的宽度和高度以及内边距和边框的方式上有所不同。 **标准盒模型**是W3C（万维网联盟）推荐的盒模型。在这个模型中，一个元素的总宽度...
css盒子模型图解
12-13
在编写CSS时，为了确保跨浏览器的一致性，应该选择W3C标准盒模型。通过在文档开头添加doctype声明，可以指示浏览器使用W3C标准模式解析HTML，例如使用`<!DOCTYPE html>`。这样，无论是在Firefox、Chrome还是IE，...
好程序员web前端分享CSS3弹性盒
weixin_33919950的博客
05-07 101
好程序员web前端分享CSS3弹性盒一、盒模型box-sizingbox-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。box-sizingbox-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框...
html怪异盒模型,详解CSS 怪异盒模型和标准盒模型
weixin_32027779的博客
06-08 645
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型)，也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型(怪异盒子模型)用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：.box1{width: 200px;height: 200px;backg...
html总结包括怪异盒子、普通盒子、居中、圣杯布局、双飞翼布局等
girllan的博客
02-22 1006
本文总结了一些比较有用的html知识
HTML——标准盒子模型+怪异盒子模型
piduocheng0577的博客
03-16 482
目录 标准盒子模型 怪异盒子模型 标准盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除标签自带的边距 */ *{ margin: 0; ...
CSS标准盒模型与怪异盒模型
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-12 1158
本文将深入探讨两种盒模型——标准盒模型（Standard Box Model）和怪异盒模型（IE6 Quirks Mode Box Model），并通过具体的代码示例来展示它们的区别和应用场景。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了更直观地理解两者之间的区别，我们创建两个相同的元素，一个使用标准盒模型，另一个使用怪异盒模型。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，属性仅指定了内容区的大小。
css3盒模型、弹性盒模型、怪异盒模型
热门推荐
冰雪为融的博客
03-27 1万+
一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。（marg...
css盒子模型
2401_83342251的博客
06-12 1137
之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。
Html-标准盒子模型和怪异盒子模型
可可的博客
11-16 1654
Html-盒子模型 一、概念篇 标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。 盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。 标准盒子模型： 标准 W3C 盒子模型的范围包括 margin、bo
css怪异盒子模型,CSS3弹性盒---怪异盒
weixin_35782943的博客
08-04 2772
怪异盒模型box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下borderbox-sizing:border-box 怪异盒模型(IE盒模型) 总宽/高度=width(包含padding和border)弹性盒特点：1、在弹性盒里，所有子元素按照“主轴”排列2、在弹性盒里，所有...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例2-5 CSS3盒子模型
01-04
在CSS3中，盒子模型有两种类型：标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。默认情况下，大多数浏览器使用W3C盒模型，其中元素的总宽度和高度由内容区域+内边距+边框决定。而IE盒模型则将边框和内边距包含在...
IE盒子模型和标准W3C盒子模型
09-27
盒子模型是CSS布局的...在实际开发中，应优先选择标准W3C盒子模型，通过添加正确的DOCTYPE声明确保页面在各种浏览器中的一致性。同时，利用CSS3的新特性，如Flexbox和Grid布局，可以进一步提高布局的灵活性和兼容性。
CSS中常见文本居中技巧详解
最新发布
2301_76541209的博客
11-11 171
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
CSS弹性布局：灵活布局的终极指南
weixin_44520557的博客
11-06 1490
在网页设计中，CSS 弹性布局（Flexbox）是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素，尤其是在响应式设计中表现出色。今天，我们就来深入探讨一下 Flexbox 的各个属性，让你彻底掌握这个强大的布局工具。
HTML的文本样式（二）
2302_79986066的博客
11-06 932
巅峰礼赠</p><p id="p01">我喜欢HTML
前端八股文(二)CSS 持续更新中。。。
DogEgg_001的博客
11-06 916
新增属性选择器、伪类选择器新增text-shadow、box-shadow、border-radius新增transform、transition、动画@keyframes、animation新增flex、grid布局，媒体查询@media新增box-sizing：border-box怪异盒模型 content-box标准盒模型。
CSS的综合应用例子（网页制作）
d7210的博客
11-10 469
就会不断执行循环体中的代码。// 当expression的值不等于任何case的值时执行的代码块。// 当expression的值等于value1时执行的代码块。// 当expression的值等于value2时执行的代码块。当匹配成功时，就执行对应的代码块，直到遇到。// 当condition1为真时执行的代码块。// 当condition2为真时执行的代码块。// 当以上条件都不满足时执行的代码块。的值，否则可能会导致无限循环。// 当条件为真时执行的代码块。// 当条件为假时执行的代码块。
理解CSS盒模型：内容、填充、边框与外边距
通过`box-sizing`属性可以切换这两种盒模型，`content-box`表示标准盒模型，`border-box`表示怪异盒模型。 1. Padding: - 作用：调整元素内部内容与边框之间的距离，影响元素内子元素或内容的位置。 - 特点：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值