[游戏开发] [C1进阶之路-Web基础] 盒子模型

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> [C1进阶之路-Web基础] 盒子模型 -> 正文阅读

[游戏开发][C1进阶之路-Web基础] 盒子模型

往期回顾，专栏一览

🍹欢迎各路大佬来到 Nick 主页指点

??本期文章将学习 [C1进阶之路-Web基础] 盒子模型，我是博主Nick。?

?我的博客主页：Nick_Bears 🌹??

🌹??博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏?

? ??

🍋 注：资料来源于C1进阶考试资料??

? ? ?

🍉?所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。

? ??

🍑?什么是盒子模型

当对一个页面进行布局（layout）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

🍑?盒子模型的组成部分

盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框），margin（外边距）

内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置

padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小
border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色
margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

? ??

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

? ?

🍒?标准盒模型

在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小

标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小

例：将div设置为标准盒模型box-sizing：content-box，CSS设置如下

? ?

检查元素如下图所示，div设置的width和height是200×100，div的实际大小是236×136，div的实际宽度 =?width + padding-left + padding-right + border-left + border-right?= 200 + 15 + 15 + 3 + 3 = 236，div的实际高度计算同理

??
? ?

? ??

🍒?怪异盒模型

? ? ??

在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding

怪异盒模型的实际大小 = 盒模型设置的width、height（包含border和 padding）

在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border

例：将div设置为怪异盒模型box-sizing：border-box，CSS设置如下

? ? ??

??
? ??

检查元素如下图所示，div设置的width和height设置为200×100，实际大小也是200×100，div的实际宽度 = width，div的实际高度 = height

? ? ?
??

不管是标准盒模型还是怪异盒模型，margin都不计入盒子的实际大小。但是margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中。

浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为box-sizing: border-box实现

? ??

💬题目01

📝?现有如下代码片段，请问标准盒模型中div的实际占位高度为_______px
div {
    width: 100px;
    height: 100px;
    margin: 5px;
}
??

key：110

? ??

💬题目02

📝?现有如下代码片段，请问标准盒模型中div的实际占位高度是________px
div {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    padding-top: 10px;
}
??
key：120

? ??

💬题目03

📝?如下代码片段，请问标准盒模型中div的实际占位高度为______px
div {
    width: 100px;
    height: 100px;
    margin: 5px 10px;
}
key：110

? ??

💬题目04

📝?现有以下代码，请问最终div的实际宽度是_______px
div {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 5px;
    margin: 10px;
}
??
key：200

? ??

💬题目05

📝?现有以下代码，请问最终div的实际高度是_______px
div {
    box-sizing: content-box;
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 10px;
}
key：160