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

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

    • 一、概念
    • 二、计算方法
    • 三、默认盒模型
    • 四、盒模型转换
    • 五、演示代码
    • 六、总结

今天来为简单介绍一个在HTML+CSS中的一个重要概念:标准盒子模型和怪异盒子模型。

一、概念

  1. 标准盒模型采用的W3C标准,盒子的content内容部分由width宽度和height高度决定,添加padding内边距或border外边框后,宽高都会进行相应增长;
  2. ②怪异盒模型也称为IE盒模型,是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定,添加padding或者border,会从中减少content内容的占据区域,来为padding和border制造空间,宽高不会相对应的进行增长。

二、计算方法

  1. 标准盒子模型的内容计算:content=width*height,
    盒子的总宽度=width+padding(左右)+margin(左右)+border(左右)
    总宽度等于所有附加值,偏移值的总和;

  2. 怪异盒子模型的内容计算:content=width*height+padding+border
    盒子的总宽度=width+margin(左右)此时的width宽度已经包含了padding和border的值;

三、默认盒模型

在编辑html文档时,只要在顶部声明了DOCTYPE,默认都会使用标准盒子模型。如果没有进行声明,则会根据浏览器类型自行调整;

四、盒模型转换

在CSS中对相应的div盒子进行box-sizing属性的设置,就可以让盒模型在标准和怪异中进行转换。
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异(IE)盒子模型

五、演示代码

首先在页面中设置两个具有固定宽高的div盒子,将他们分别设置为标准盒子模型和怪异盒子模型。

	<style type="text/css">body {height: 100vh;display: flex;justify-content: center;align-items: center;}div {width: 300px;height: 300px;line-height: 300px;text-align: center;margin-right: 10px;font-size: 30px;}.box1 {box-sizing: content-box;background-color: #FF0000;}.box2 {box-sizing: border-box;background-color: #CD5C5C;}</style></head><body><div class="box1">标准盒子模型</div><div class="box2">怪异盒子模型</div></body>

效果如图
效果一
给box1设定padding值

padding: 50px 50px;

得到以下结果
效果二·
很明显大小发生了改变,利用f12检查发现,盒子不仅保存了原有内容的大小,还根据padding值进行了相应的放大。
效果图3

再为box2添加同样的属性

padding: 50px 50px;

效果图4
再使用f12检查
效果图四
可以看到,盒子的大小不仅没有增加,原本的内容区域还根据padding值相应的进行了缩小。

六、总结

使用标准盒子模型时,盒子的宽高不会因为第一次的设定而持久不变,还可以通过padding值的设定来进行二次放大;
使用怪异盒子模型时,宽高在第一次设定时就已经固定,不会因为后期padding值的设定而放大,只会相对应的调整内容的位置。
在实际开发中,怪异盒子模型能够在不影响基础布局的情况下,调整内容的位置,大小,是一个很值得一用的属性。
这里是万物之恋,我们下次再见了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/48610.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

标准盒模型和怪异盒模型的区别?

什么是怪异盒模型&#xff1f;今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里。 首先要知道&#xff0c;什么是盒模型&#xff1f; 盒模型是css布局的基石&#xff0c;它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一…

【什么是盒模型】标准盒子模型、怪异盒子模型

一、上图 标准盒子模型 和IE盒子模型 什么是盒子模型 CSS盒子模型&#xff08;Box model&#xff09;就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性&#xff1a; 内容(content)&#xff0c;也就是元素的 width、height内边距(pa…

标准盒模型和怪异盒模型有哪些区别?

标准盒模型和怪异盒模型有哪些区别&#xff1f; 盒模型的指定&#xff1a; 在CSS3中&#xff0c;我们可以通过设置 box-sizing 的值来决定具体使用何种盒模型&#xff1a; box-sizing: content-box; 标准盒模型box-sizing: border-box; 怪异盒模型 标准盒模型&#xff1a; …

盒模型(标准盒模型、怪异盒模型)

盒模型由由四部分组成&#xff0c;分别为&#xff1a; content ------------> 内容,元素的宽高 padding ------------> 内边距 border -------------> 边框 margin --------------> 外边距 内边距&#xff1a;内容与边框之间的间距 设置不同…

怪异盒模型与标准盒子的区别与转换

怪异盒模型(老版本IE的盒模型) box-sizing:border-box; 标准盒模型宽度width(内容区域大小)paddingborder { width: 200px; height: 200px; background-color: aqua; padding: 20px; border: 10px solid #000000; box-sizing: border-box; } 也就是说在标准盒模型之中本身盒子的…

流量魔盒“骗”了多少人?快来看看吧!~

今天先为大家分析下在流量魔盒这个平台怎么样能够利益最大化&#xff0c;和能为我们带来哪些东西。 流量魔盒咨询交流企鹅群 注册链接https://www.flowdmc.com/register/?inviteCodeDLBHTX 2017年&#xff0c;众所周知&#xff0c;各种盘的圈&#xff0c;坑&#xff0c;没落…

标准盒子模型和怪异盒子模型(详解)

一、盒子模型定义 盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分&#xff0c;其余每个部分又分别包含上、下、左和右4个方向&#xff…

普通盒模型和怪异盒模型

一、什么是盒模型&#xff1f; 1.根据盒子模型的概念&#xff0c;每个在页面上的元素都是一个拥有宽&#xff0c;高&#xff0c;内边距&#xff0c;边框和外边距的长方形盒子。 2.盒模型分为两种:分别是W3C标准盒模型&#xff08;普通盒模型&#xff09;和IE盒模型&#xff08…

2023 年 4 月脚本神器合集来了

苏生不惑第419 篇原创文章&#xff0c;将本公众号设为星标&#xff0c;第一时间看最新文章。 之前分享过的很多实用浏览器扩展和油猴脚本我都同步到博客了https://sushengbuhuo.github.io/blog &#xff0c;2023 年 4 月的脚本神器合集又来了。 沉浸式翻译 一个沉浸式网页双语翻…

Java调用Midjourney进行AI画图原生版抓包实现支持中文

用途介绍 Midjourney是一个目前优秀的AI画图工具&#xff0c;不挂梯无法直接访问 本代码主要用于搭建镜像站使用 适合人群 本代码不适合新手&#xff0c;建议使用过okhttp、且具有二开能力的同学使用~ 实现原理 通过调用发送信息接口发送请求&#xff0c;通过轮询房间消息…

解决Edge中插件下载失败的问题

解决Edge中插件下载失败的问题 这里写目录标题 解决Edge中插件下载失败的问题以下我给出两种解决办法;1. 修改文件内容&#xff08;源头上&#xff09;1.1首先我们可以打开如下的文件夹&#xff1a;1.2 之后将如下内容复制粘贴到该文件的最后面&#xff1a;1.3 如果是你的登录出…

vue即时通讯,一个很好用的插件

直接上链接&#xff1a;https://github.com/leancloud/js-realtime-sdk/tree/master vue-发起websocket协议 https://github.com/nathantsoi/vue-native-websocket

vue3 + TS 自定义插件-全局message提示插件示例

本文记录 Vue3 ts 实现自定义一个全局插件&#xff0c;用于进行 message 消息提示&#xff0c;所谓全局插件即挂载到 vue 实例上&#xff0c;在 App 的任一子组件中均可通过 app 的实例调用该方法。消息提示功能只是示例主要是记录 Vue3 自定义插件功能的写法。 文件结构&…

用chatGPT高效学习-Vue的组件通信方式有哪些?

Vue 的组件通信方式有以下几种&#xff1a; 父子组件通信&#xff1a;父组件通过 props 向子组件传递数据&#xff0c;子组件通过 $emit 触发事件向父组件传递数据。 子父组件通信&#xff1a;子组件通过 $emit 触发事件向父组件传递数据&#xff0c;父组件通过 v-on 监听子组件…

低代码开发,是程序员的“福”还是“祸”?

编者按&#xff1a;低代码是IT界的新风口&#xff0c;它真的会抢占程序员的生存空间吗&#xff1f;本文带你来扒一扒&#xff01; 风口上的低代码 疫情肆虐下&#xff0c;低代码之火不仅没有熄灭&#xff0c;反而更加如火如荼&#xff0c;相对于传统开发&#xff0c;它的确为人…

中学生应该学会使用计算机作文,网络的利与弊中学生作文

网络的利与弊中学生作文 导语&#xff1a;生理上坏处是辐射&#xff0c;心理上的分为网上不健康内容和游戏&#xff0c;不健康内容你自己想得出来吧。以下是小编为大家收集的网络的利与弊中学生作文&#xff0c;欢迎阅读&#xff01; 网络的利与弊中学生作文(一) 所谓“一日之所…

大数据,是个没有感情的杀手?一文解析大数据时代的利和弊

01 瘆人的大数据 上个月小柒邀请闺蜜们来家喝茶聊天,大家讨论去海边的旅游计划。 聊着聊着,小爱同学突然插话:“我也要去”,吓得我赶紧拔掉了小爱的插头。 姐妹们各回各家,小柒躺下刷手机,今日头条给我推送了刚才讨论的海边民宿,顿时睡意全无…… 周末去上海学习了两…

爱思服务器能不能更新苹果手机系统,苹果手机系统升级带来的利和弊,你知道多少?...

很多手机在使用一段时间后需要系统更新升级&#xff0c;如果你觉得手机老版本出现了延迟卡顿&#xff0c;需要升级新系统才能解决这个问题&#xff0c;相信大部分人都会选择更新升级的。要是原先版本用的很顺手&#xff0c;很流畅的&#xff0c;不想升级更新&#xff0c;然后手…

android6.01升级弊端,手机系统升级带来的利和弊,你知道多少?

原标题&#xff1a;手机系统升级带来的利和弊&#xff0c;你知道多少&#xff1f; 每过一段时间&#xff0c;手机上就会有系统更新提醒&#xff0c;很多朋友会第一时间更新&#xff0c;而有朋友也许会和小编一样&#xff0c;认为“这个版本我用着挺好呀&#xff0c;为什么要更新…

Android开发——项目实例(二)迷你背单词软件(第二版)单词录入、背诵、检测、单词库

软件效果图 源码及apk&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1UkswUGQmmG6dD2fIp0VtBA 提取码&#xff1a;dbxv 如有想修改但不会的&#xff0c;欢迎私信&#xff0c;有时间的话帮你改。 要是觉得还可以&#xff0c;点个再走吧&#xff01;求求了~