css_标准盒模型和怪异盒模型

已于 2023-04-07 16:48:45 修改
阅读量98 收藏
点赞数
分类专栏： css-study 文章标签： css 前端
于 2023-03-07 17:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_57226103/article/details/129385741
版权

在这里插入图片描述

  1. W3C标准盒模型
    实际宽=weight+左右内边距+左右边框
    实际高=height+上下内边距+上下边框
   box-sizing:content-box
  1. 怪异盒模型（IE盒子模型)
    实际宽=weight
    实际高=height
   box-sizing:border-box
标准盒模型和怪异盒子模型的区别
zhugedali_的博客
07-11 2176
同理，内容区域的高度为 100px，加上上下内边距各 20px，高度变为 100 + 20×2 = 140px，加上上下边框各 10px，高度变为 140 + 10×2 = 160px，再加上上下外边距各 10px，最终在垂直方向占据的总高度为 160 + 10×2 = 180px。- 内边距在内容区域的四周，左右内边距各 20px，所以加上内边距后，水平方向的宽度变为 200 + 20×2 = 240px。- 设置的宽度（width）包括了内容区域、内边距和边框的宽度。
前端开发_CSS_盒子模型_学习笔记_1741874152.zip
03-16
前端开发_CSS_盒子模型_学习笔记文件名表明，这是对盒子模型学习的详细记录，可能包含了理论知识、实例代码和常见问题解答等。而Blog-master表明这是一个博客或网站的主目录，可能包含了关于CSS盒子模型的文章或讨论...
CSS标准盒模型与怪异盒模型
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-12 1372
本文将深入探讨两种盒模型——标准盒模型（Standard Box Model）和怪异盒模型（IE6 Quirks Mode Box Model），并通过具体的代码示例来展示它们的区别和应用场景。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了更直观地理解两者之间的区别，我们创建两个相同的元素，一个使用标准盒模型，另一个使用怪异盒模型。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，属性仅指定了内容区的大小。
CSS标准盒模型和怪异盒模型区别
qq_59181609的博客
08-14 1521
3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。即外边距，边框，内边距，内容。2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）...
【CSS】标准盒模型和怪异盒模型
流萤梦的博客
10-27 951
盒模型的组成： content（内容） padding（内边距） border（边框） margin（外边距） 那常见的盒子模型有哪些呢？ 主要是两种：标准盒模型和怪异盒模型。 它俩有什么区别呢？区别主要在于宽高的计算。 1、标准盒模型 如上图，我们可以很明显的看到这里的宽高就是content的宽高。 宽：width = content（内容）的宽 高：height = content（内容）的高 2、怪异盒模型（IE盒模型） 如图所示，怪异盒模型的宽高是包括了content、.
Day03_CSS盒子模型_怪异盒子模型
weixin_51326968的博客
11-09 2363
盒子 : 即为容器 , 任何一个标签都可以称之为容器 , 只不过容器分为大小 , 最大的容器为div等区块划分的元素;其余的均为比较小的容器;模型 : 即为盒子的大小,盒子模型 : 主要是为了然我们计算出盒子的大小占位 , 方便调整界面之间的间距1) 如果想要元素横向显示则使用浮动1) 如果一个在做一个在右侧显示则使左侧使用左浮动, 右侧使用右浮动。
CSS标准盒子（标准盒模型）和怪异盒子（怪异盒模型）
2203_75479159的博客
04-25 1874
标准盒子：内容尺寸独立，但总尺寸易失控（需手动计算padding和border怪异盒子：总尺寸固定，内容自适应，更适合现代响应式布局。优先选择border-box，仅在特殊需求时回退到。
css-标准盒模型和怪异盒模型
fightingcoder419的博客
11-18 467
盒子模型定义 网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4049
盒子模型（标准盒子模型和怪异盒子模型）
CSS盒模型-怪异盒模型笔记-思维导图-案例等
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-30 1075
可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。内间距：指的是盒子的内容与边框的间距（4个边都有内间距）
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
CSS+盒模型,css盒模型面试题,HTML
09-10
CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括内容区域的宽度和高度，内...
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
vue3使用tailwindcss报错问题
weixin_49523082的博客
05-10 123
注意： 要看清版本 现在安装的tailwindcss 是4.x 官网是3.x。地址：https://tailwindcss.com/
如何使用CSS解决一行有三个元素，前两个元素靠左排列，第三个元素靠右排列的问题
loverdany的博客
05-08 1185
本文详细介绍了如何使用CSS解决一行有三个元素，前两个元素靠左排列，第三个元素靠右排列的问题，详细讲解了基本实现和4种拓展方法，并建议优先选择Flexbox布局的方法。
CSS 中的 ::before 和 ::after 伪元素
优快云资源内容
05-09 169
虽然 ::before ::after 这两个伪元素的使用方式非常简单，但若能灵活应用，就能实现一些很不错的CSS效果；CSS伪元素是指，在CSS 中使用一些特殊的选择器，创建出来的虚拟元素， 并不是实际存在的HTML元素；伪元素也是一种元素，可以设置html中支持的各种属性，包括元素的布局、定位、宽高、背景等等；本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景；::before ::after 伪元素用来给元素前面或者后面插入指定内容；
CSS渲染性能优化
最新发布
前端小巷子的博客
05-10 294
在当今快节奏的互联网环境中，网页加载速度直接影响用户体验和业务转化率。页面加载时间每增加100毫秒，就会导致显著的流量和收入损失。作为前端开发的重要组成部分，CSS的渲染性能优化不容忽视。
CSS：字体和文本样式
Visual_progress的博客
05-08 759
在CSS中我们常使用font-size来定义字体大小字体大小的单位为px代码演示演示结果。
基于HTML+JavaScript+CSS实现教学网站
神仙别闹的自留地
05-09 844
Web课程重在学习如何进行网页设计，对同学们来说网站并不陌生，所以建设Web课程设计网站可能更易接受。同时，Web设计的老师，也是精通计算机的老师，对于网站的资源的上传和管理，更能接受。本次课程设计主要以山东师范大学历山学院Web开发课程为原型进行设计。综合考虑，教师简介、学习资源、课程介绍等几个方面进行重点功能开发。同时建设教学网站也是非常有意义的。项目主页主要包括：搜索栏目、菜单、时间及新闻、焦点图、课程主要知识介绍、合作企业及网站底部等几个模块。图2.1 主页展示。
css盒模型标准和怪异
07-27
CSS盒模型有两种标准：标准盒模型和怪异盒模型。 标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。 而怪异盒模型是一种老旧的盒...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值