【前端学习之HTML&CSS】-- CSS第五篇 – 盒模型及其应用
文章目录
本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章将会是CSS学习中第二个重要的知识点，盒模型，毫无疑问是CSS学习中掌握多种多样样式结构的基础和灵魂，我们将会从基本概念出发，以行盒模型为主，在学习到模型的基本结构后简单介绍了一些盒模型的应用。
一、盒模型
1. 含义
- box：盒子，每个元素在页面中都会生成一个矩形区域
2. 盒子类型
- 1* 行盒: display属性等于inline的元素；（不换行）
浏览器默认行盒：span、a、img、video、audio；(浏览器没有设置display，故**浏览器默认为inline**)
- 2* 块盒: display属性等于block的元素；（独占一行）
浏览器默认样式表设置的块盒：**容器元素**（div、header、article、aside、section）、**文本元素**（h1、p等）；
**注意：盒子类型是CSS样式，可以修改**
3. 盒子的组成部分
无论是行盒还是块盒，都由下面四个部分组成，从内到外分别是：
-
1* 内容 content: 包裹里的内容(元素的内容盒 content-box)
涉及属性：width、weight，设置盒子内容宽高；
-
2* 填充 padding: 包裹里的泡沫塑料(内边距)
盒子边框到盒子内容的距离/尺寸：
padding-left、padding-right、padding-top、padding-bottom（默认为0）
【属性简写：padding：上 右 下 左】
填充盒 padding-pox = 填充区 + 内容区
-
3* 边框 border: 包裹本身
边框 = 边框样式(border-style) + 边框宽度(border-width) + 边框颜色(border-color) ；
边框盒 border-box = 边框 + 填充区 + 内容区
-
4* 外边距 margin: 包裹和包裹之间的距离
边框到其他盒子的距离:
margin-left、margin-right、margin-top、margin-bottom
<h2 style="width: 300px; height: 50px; padding: 50px 30px;
border-style: solid; border-width: 3px; border-color: #008c8c;">这里用来测试盒子模型</h2>
<!-- padding两两相同可省略 padding: 50px 30px 50px 30px -->
<!-- border:先设置样式才能显示，样式默认为none，边框颜色默认与字体适配 -->
<!-- border的style、width、color都是速写的属性，可以展开为上右下左 -->
<h2 style="border-style: solid; border-width: 3px; border-color: #008c8c; margin: 20px 10px 20px 10px;">用于测试外边距margin</h2>
二、行盒
1. 常见的行盒：
- 包含具体内容的元素；eg.span、strong、em、i、img、video、audio
2. 显著特点
-
1* 盒子沿着内容延伸，内容截断盒子就截断；
-
2* 两个行盒之间直接连接，在同一行内头尾相连；
【上图中上方为块盒，下方为行盒，可看到存在明显差距】 -
3* content：行盒的宽高无法设置，宽高根据内容适配；
【调整行盒的宽高，应该使用字体大小、行高、字体类型间接调整】 -
4* padding：水平方向有效，垂直方向仅会影响背景，不会实际占据空间；
-
5* border：同padding;
-
6* margin: 同padding;
3. 行块盒
- 含义：display = inline-block；
- 不独占一行（水平连续排列）；
- 盒模型中所有尺寸都有效；
应用实践：百度的页面提示效果：
.pager a{
border: 1px solid #e1e2e3;
/* 消除下划线 */
text-decoration: none;
color: #38f;
width: 34px;
height: 34px;
/* 行块盒，保证宽高有效 */
display: inline-block;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 34px;
}
.pager a:hover{
/* 鼠标移动变化 */
border-color: #38f;
background-color: #f2f8ff;
}
.pager a.selected{
/* 当前页的变化，注意保证层叠有效 */
border: none;
color: black;
background-color: initial;
}
<!-- a元素的特殊操作 -->
<div class="pager">
<a href="" class="selected">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
空白折叠，发生在行盒（行块盒）内部或行盒之间，故上述效果中才会出现空表间隙；
由于在书写代码时有换行–实际上为多个空格–无法避免存在间隙；
4. 可替换元素
分类
-
非可替换元素：页面上显示的结果，取决于元素内容；
eg.div、p、span等大多数元素； -
可替换元素：页面上显示的结果，取决于元素属性；
eg.img、video、audio；
特点
-
绝大部分可替换元素均为行盒
可替换元素类似于行块盒，所有尺寸都可修改 -
图片大小会默认适应宽高修改本身大小，修改方法：object-fit：
contain：纵横比不变，适应宽高修改，且不能溢出;
fill：完全适应宽高变化（默认）；
cover：保证把区域填充满，不能打破比例，故会牺牲图片信息；
如果高度没有设置，高度会自动跟随宽度变化按比例而变化；
三、盒模型的应用
1. 改变宽高范围
问题所在
- 默认情况下，width和height设置的是内容盒的宽高；
【页面重构师：将psd文件（设计稿）制作为静态页面】 - 设计稿中的一个盒子的宽高实际上是边框盒的宽高，但是在我们的实际操作往往会把这一长度当做内容盒的宽高，这样就会导致设置padding和border之后，盒子的宽高与要求不符；
处理方法：
- 精确计算，即直接考虑边框盒的宽高，拆分设计；
- CSS3：box-sizing 通过设定具体是那个盒子模型来设计；
box-sizing的默认值为content-box，导致width和height为内容盒；
如果设置为border-box，则width和height就会直接影响border-box的属性，直接满足设计稿要求；
2. 改变背景覆盖范围
- 问题：默认情况下，背景覆盖整个边框盒，包括内容区、填充、边框全部；
- 修改:添加属性backg-clip: border-box, 将此处盒子修改，实现覆盖范围；
3. 溢出处理
-
问题：盒子的内容超过设定区域（自行设计宽高）；
【在没有设定宽高时，区域大小会自行变化，自己适应内容】
-
处理：overflow，控制内容溢出边框盒的处理方式；
默认情况下：超出部分的文本是可见，属性为visible；
overflow：hidden（隐藏）、scroll（生成滚动条）、auto（不需要滚动条不出现，需要时自动出现）
【只出现竖向滚动条：overflow-y：scroll】
4. 断词规则（换行）
- CSS样式：word-break，影响文字在什么位置被截断换行；
取值:
normal：普通，针对于CJK(中日韩)字符，在文字位置截断，其他字符，在单词位置截断；
break-all：所有字符都在文字处截断；
keep-all：所有字符都在单词处截断；(需要空格)
5. 空白处理（不换行）
- 做法：只能控制单行文本，多行文本需要js
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
/* 上下为1em，左右为0 */
width: 400px;
/* 空白处理 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 文本溢出，三点表示省略 */
text-overflow: ellipsis;
}
<ul>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Voluptas atque tempora praesentium nostrum voluptatem.</li>
<li>A optio architecto totam possimus adipisci.</li>
<li>Non doloribus necessitatibus vero architecto soluta.</li>
<li>Sapiente quas exercitationem consequatur laborum dolorum.</li>
<li>Accusamus porro et praesentium earum illum?</li>
<li>Necessitatibus iure recusandae tempore unde nobis.</li>
<li>Dolore obcaecati repellendus cupiditate maiores ad.</li>
</ul>
总结
对于知识的学习仅从文字来看总是不够透彻的，想要更加深刻的体会盒模型的用法和特点，我们需要进行大量的联系，在后续的博客中我们将会学习视觉格式化模型，即页面中的多个盒子排列规则/布局规则，整个CSS的最重要部分就是下几篇博客的内容，在后续博客中我们也会不断提出一些练习的内容，希望大家深刻领悟，敬请期待。
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
