前端入门教程:CSS标准盒模型和怪异盒模型区别
myzbx 2025-02-04 15:16 21 浏览
理解盒模型：CSS3 中的盒模型有以下两种：标准盒模型、IE盒子模型(怪异盒模型)，盒模型是由4个部分组成，由内向外分别是content(下图蓝色部分)、padding、border、margin盒模型有5个属性：
- width 元素宽
- height 元素高
- border 元素边框线
- pdding元素内边距
- margin元素外边距
一张图来理解盒模型的5个属性
父子间间距，通过给父元素设置padding来实现
兄弟间间距，通过给元素设置margin来实现
标准盒模型和 IE盒模型- 两者区别
标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同：
- 标准盒模型的 width 和 height 属性的范围只包含了 content内容区。
- IE盒模型（怪异盒模型）的 width 和 height 属性的范围包含了 border、padding 和 content。
案例展示
<style>
.box {
width: 100px;
height: 150px;
padding: 20px;
border: 10px;
margin: 50px;
box-sizing: border-box;/*怪异地盒子模型*/
}
</style>
<body>
<div class="box"></div>
</body>以上代码，在未添加box-sizing: border-box;和添加后，两者渲染后的效果如下
标准盒模型
标准盒模型下的width:100px;height:150px;只包含了content部分,所以content的宽高为100px和150px;
怪异盒模型
width:100px;height:150px;包含了border、padding、content三部分，则通过计算得出content内容区的高为: 150px-20px*2-10px*2=90px宽为：100px -20px*2 -10px*2=40px
盒模型转换
可以通过修改元素的 box-sizing 属性来改变元素的盒模型：
- box-sizing: content-box表示标准盒模型（默认值）
- box-sizing: border-box表示 IE 盒模型（怪异盒模型）
你学会了吗？
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
- PC端项目开发（1个）
- 移动WebApp开发（2个）
- 多端响应式开发（1个）
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
- 真机调试，云服务部署上线；
- Linux环境下 的 Nginx 部署，Nginx 性能优化；
- Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
- 企业项目域名跳转的终极解决方案，多网站、多系统部署；
- 使用 使用 Git 在线项目部署；
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料
相关推荐
- C语言速成之数组:C语言数据处理的核心武器，你真的玩透了吗?
-
程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！数组：C语言数据处理...
- ES6史上最全数JS数组方法合集-02-数组操作
-
数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值，如果存...
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
-
在前端开发的江湖里，JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌，你的代码却总拖后腿，页面加载慢、交互卡顿？别着急！今天带来8个超实用的JavaScript实...
- 12种JavaScript中最常用的数组操作整理汇总
-
数组是最常见的数据结构之一，我们需要绝对自信地使用它。在这里，我将列出JavaScript中最重要的几个数组常用操作片段，包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...
- 手把手教你在Webpack写一个Loader
-
前言有的时候，你可能在从零搭建Webpack项目很熟悉，配置过各种loader,面试官在Webpack方面问你，是否自己实现过一个loader?如果没有去了解过如果去实现，确实有点尴尬，其...
- const关键字到底该什么用?（可以用const关键字定义变量吗）
-
文|守望先生经授权转载自公众号编程珠玑(id：shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读，但它是真正意义上的只读吗？实际中又该如何使用const关键字...
- “JavaScript变量声明三兄弟，你真的会用吗?
-
在JavaScript中，var、let和const是声明变量的关键字，它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点，并通过代码示例详细说明。一、相同点声明变...
- ES6(二)let 和 const（es6 var let const区别）
-
let命令let和var差不多，只是限制了有效范围。先定义后使用不管是什么编程语言，不管语法是否允许，都要秉承先定义，然后再使用的习惯，这样不会出幺蛾子。以前JavaScript比较随意，...
- js 里面 let 和 const的区别（js中的let）
-
在JavaScript（包括Vue、Node.js、前端脚本等）中，const和let是用于声明变量的两种方式，它们的主要区别如下：constvslet的区别特性constlet是否...
- JDK21新特性:Sequenced Collections
-
SequencedCollectionsJDK21在JEP431提出了有序集合（SequencedCollections）。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...
- 动态编程基础——第 2 部分（动态编程是什么）
-
有两种方法可以使用动态规划来解决问题。在这篇文章中，我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划？它是一种简单递归的优化技术。它大大减少了解决给定...
- Lambda 函数，你真的的了解吗（lambda函数用法）
-
什么是lambda函数lambda函数是一个匿名函数，这意味着与其他函数不同，它们没有名称。这是一个函数，它添加两个数字，写成一个命名函数，可以按其名称调用它们：defadd(x,y):...
- JavaScript 数组操作方法大全（js数组操作的常用方法有哪些）
-
数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法（包括ES6的map、forEach、every、some、filter、find、from、of等）...
- 系列专栏(六):解构赋值（解构赋值默认值）
-
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- js列表遍历方法解读（js遍历链表）
-
JavaScript提供了多种遍历数组（或列表）的方法。以下是一些常用的方法及其解读：for循环：vararray=[1,2,3,4,5];for(vari=0;...
- 一周热门
- 最近发表
-
- C语言速成之数组:C语言数据处理的核心武器，你真的玩透了吗?
- ES6史上最全数JS数组方法合集-02-数组操作
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 12种JavaScript中最常用的数组操作整理汇总
- 手把手教你在Webpack写一个Loader
- const关键字到底该什么用?（可以用const关键字定义变量吗）
- “JavaScript变量声明三兄弟，你真的会用吗?
- ES6(二)let 和 const（es6 var let const区别）
- js 里面 let 和 const的区别（js中的let）
- JDK21新特性:Sequenced Collections
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)