标准盒模型怪异盒模型

标准盒模型&怪异盒模型

盒子模型的组成：

盒子模型一般由：内容（content）、边框（border）、左右外边距（margin-left+margin-right）、左右内边距（padding-left+padding-right）这些部分组成。

CSS中盒子模型分为两种：W3C标准盒模型和IE标准盒模型

标准盒子模型
1. 标准盒模型中，内容区域是由width属性设置的，而内容周围的padding和margin是另外计算的。
2. width/height + padding+border+margin = 总长
IE标准盒模型（怪异盒模型）
1. 怪异盒模型中，浏览器的width属性不是内容的宽度，而是内容+内边距+边框的总和；
2. width/height + margin = 总长（因为在width中已经包含了内容的宽度+内边距+边框的宽度）

什么是“怪异盒模型”

怪异盒模型与标准盒模型的区别

用途：标准盒子模型主要用于PC端，怪异盒子模型主要用于手机端。
原理：标准盒子模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。

参考文献：

https://www.jianshu.com/p/3c24887312b1
https://blog.csdn.net/dong_pt/article/details/51281372
https://www.jb51.net/css/593017.html

标准盒模型怪异盒模型相关推荐

CSS-0816盒模型标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面媒体类型媒体特性opacity和背景色设置透明的区别
title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ...
盒模型--标准盒模型---怪异盒模型
盒模型: .demo{overflow:hidden;/*超出隐藏*/width:300px;hight:300px;padding:background-color:blue;} 盒模型: 复合属性 ...
html怪异盒模型,CSS-标准盒模型怪异盒模型
盒模型一共有两种模式:W3C标准模式和IE怪异模式大多数浏览器采用W3C标准模式,IE采用自己的标准当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签,不定义DOCTYPE,会 ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...
怪异盒模型and弹性盒模型
1.概念 IE盒子模型(怪异盒模型) 在该模式下,浏览器的 width 属性不是内容的宽度,而是内容.内边距和边框的宽度的总和:即在怪异模式下的盒模型,盒子的(content)宽度+内边距paddin ...
学习日志四：怪异盒模型和标准模型
项目创建中遇到的问题:怪异盒模型和标准模型这是我根据老师所教的自己动手实践的,在这个过程中,我遇到了一些不懂的和不是很深刻的知识点,所以将他进行学习和巩固,方便下次复习文章目录项目创建中遇到的问 ...
标准盒子模型和怪异盒子模型（详解）
一.盒子模型定义盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...

标准盒模型怪异盒模型

标准盒模型&怪异盒模型

CSS中盒子模型分为两种：W3C标准盒模型和IE标准盒模型

标准盒子模型

怪异盒模型与标准盒模型的区别

标准盒模型怪异盒模型相关推荐

最新文章

热门文章