盒子的标准模式和异常模式

最新推荐文章于 2024-09-08 20:13:55 发布
最新推荐文章于 2024-09-08 20:13:55 发布
阅读量86 收藏 1
点赞数
分类专栏： 笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhnotbad/article/details/119889659
版权
本文详细介绍了HTML文档的标准模式和怪异模式。标准模式下，网页实际宽度和高度会考虑内边距和边框，而怪异模式下浏览器则不计算这些。转换模式可通过box-sizing属性实现。理解这两种模式对于前端开发人员调整布局至关重要。
摘要由CSDN通过智能技术生成

盒子的标准模式和怪异模式

1.概念

标准模式：即HTML文档的开始部分有声明

怪异模式：即HTML文档的开始部分没有声明

2.作用

标准模式:（需要自己手动调节实际的宽度）

​ 网页实际宽度=你设置的宽度+标签左右内边距+左右边框的宽度

​ 网页实际高度=你设置的高度+标签上下内边距+上下边框的高度

怪异模式：（浏览器自己减去标签的边距和边框宽高度）

​ 网页实际宽高=你设置的宽高

3.标准模式和怪异模式的相互转换

使用box-sizing=content-box(标准模式)|border-box（怪异模式）

马╭( ′• o •′ )╭☞叫兽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C语言盒子接球游戏源码（附源文件和应用文件）
11-10
6. **错误处理**：良好的错误处理机制是游戏稳定性的保障，C语言的异常处理或条件判断可以确保游戏在遇到问题时能够优雅地退出。 7. **函数设计**：为了代码的可读性和复用性，游戏的各个功能通常会封装成独立的...
盒子模型（怪异模型）
qac的博客
12-17 661
文章目录1.什么是盒子模型？2.盒子模型能够为我们解决什么问题?3.标准盒子模型和怪异盒子模型（IE盒子模型）4.两种模式的转换（通过box-sizing） 1.什么是盒子模型？ CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(content)，也就是元素的 width、height 内边距(padding) 边框(border) 外边距(margin) 2.盒子模型能够为我们解决什么问题? 盒子模型主要是针对页
CSS-标准盒模型 & 怪异盒模型
热门推荐
PT - Blog
04-29 3万+
CSS-标准盒模型 & 怪异盒模型
CSS盒模型全面讲解，怪异模式盒模型，CSS3 box-sizing属性
quguang65265的博客
03-24 1万+
今天学习了一下css3的box-sizing属性，顺便又温习了一下css的盒模型，最后觉得有必要对盒模型做一个全面整理。 先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如： 以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式
盒子模型-怪异模式和标准模式
qq_44636551的博客
04-12 341
盒子模型-怪异模式和标准模式 首先，两种模式可以利用box-sizing属性进行自行选择： 标准模式：box-sizing:content-box; 怪异模式：box-sizing:border-box; 两种模式的区别： 标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。 例： .box{ box-sizing:...
算能科技盒子机演示视频
10-16
观众可以期待看到盒子机在实际应用场景中的效果，例如如何快速识别和处理工厂生产线上的异常，或者在智能城市项目中如何实现高效的交通管理。 总的来说，算能科技的盒子机是边缘计算领域的一个创新产品，它利用先进...
贴心Java盒子.zip
11-16
8. **设计模式**：Java开发者应该熟悉一些常见的设计模式，如单例、工厂、观察者、装饰器、代理等，它们是解决常见编程问题的标准解决方案。 9. **Java 8及以后的新特性**：比如lambda表达式、流API、Optional类、...
暴风影音盒子打不开怎么办.docx
09-27
### 暴风影音盒子无法打开的解决方法 ...总之，当遇到暴风影音盒子打不开的情况时，可以从网络连接、浏览器缓存、程序更新等多个方面进行排查和解决。希望上述方法能够帮助您顺利解决遇到的问题。
Qt将数据库中的数据导出为html
qq_15181569的博客
09-04 673
【代码】Qt将数据库中的数据导出为html。
【Harmony】文本高亮显示、关键字凸显字体大小、颜色、背景色等风格自定义、嵌入html脚本提取超链接及超链接文本或其他脚本片段
lichong951的专栏
09-06 343
预览效果如图（网上找到demo，如有疑问请留评论蛤！）：这个是超链接这是例子里的数据定义方式，和从接口里解析的json数据有所区别再看看其他预览效果，比如有html超链接。
HTML生日蛋糕
兔子王
09-07 1476
用HTML语言实现生日蛋糕效果的完整代码。
SpringBoot开发——结合Thymeleaf模板整合HTML
bjzhang75的博客
09-05 1243
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3671
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
HTML各种标签以及使用
最新发布
lxl12138的博客
09-08 617
HTML各种标签以及使用
【H2O2|全栈】关于HTML（5）HTML基础（四）
过期的H2O2的博客
09-06 1164
本系列博客将分享HTML相关知识点。这一期博客，我们来讲解表单相关的标签。注意，本期表单中的大部分属性仅限于HTML4，如果想要了解更多关于HTML5中常用的表单功能，可以期待未来的HTML进阶篇的博客。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘻嘻）。
Spring Boot 的Web项目如何直接显示html
oscar999的专栏
09-05 245
实际的开发中，在Spring Boot的Web项目中直接使用html文件的场景已经比较少了， 或者是只需要很简单的页面显示，或者是演示的需要， 大部分的状况都是Spring Boot作为后端提供REST 的服务，结合其他的一些前端Framework进行开发，比如VUE,Ext JS等。
【H2O2|全栈】关于HTML（4）HTML基础（三）
过期的H2O2的博客
09-05 1000
本系列博客将分享HTML相关知识点。这一期博客，我们来讲解列表和表格相关的标签。按照我的风格来说，其实我不太喜欢用书面语言来分享知识。比起单纯的科普，我的博文更像是一种语言风格类似于休闲聊天，但是又不缺乏严谨性的知识笔记，也就是我之前提到的——“杂谈”的形式。初心呢就是主打分享，写的不好，多多包涵（嘻嘻）。
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 1982
捕捉一只耿鬼
掌握Web盒子模型：面试题与兼容问题解析
而在quirks mode（非标准模式）下，宽度和高度都可能受到影响，比如边框会被计算在内。 3. **盒模型在不同元素上的应用**： - 对于块级元素如`div`, `p`, 和 `ul` 等，宽度和高度通常占据整个可用空间。 - 行内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值