前端css学习笔记6：盒子模型

本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！

前言

一、组成

编辑content

padding

border

margin

margin塌陷

margin合并

使用场景

标题与段落间距

卡片列表布局

二、内容溢出—overflow

三、隐藏元素

visibility

display

块元素（块级元素）—block

行内元素（内联元素）—inline

行内块元素（内联块元素）—inline-block

修改显示模式

使用场景

(1) 行内元素适用场景

(2) 块级元素适用场景

(3) 行内块级元素适用场景

前言

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。在网页布局与设计中，盒子模型是最为核心和基础的概念之一，它支撑起整个网页的结构框架。理解盒子模型的组成、内容溢出的处理方式以及元素隐藏的实现方法，是掌握网页布局技巧、打造美观且功能完善的网页界面的关键。本文介绍盒子模型的组成要素（包括content、padding、border、margin）、内容溢出时的处理属性overflow，以及隐藏元素的常用方法（visibility和display）。希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。

网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39

一、组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

1.margin（外边距）：盒子与外界的距离。

2.border（边框）：盒子的边框。

3.padding（内边距）：紧贴内容的补白区域。

4.content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小=content+左右padding+左右border
外边距不影响盒子的大小，会影响盒子的位置（看是否给盒子指明width）
只写height和width的值，表明的是content的大小
背景色也会填充边框区域

content

拉动浏览器显示时最大/小宽度和高度

默认宽度，不设置width属性时，元素呈现的宽度—与父元素有关（子元素要出现在父元素的content区）

总宽度=父的content-自身左右的margin
内容区的宽度=父的content-自身左右的margin-自身左右的border-自身·左右的padding

padding

padding复合属性的使用规则：

1.padding:10px;四个方向内边距都是10px。

2.padding:10px 20px；上下10px，左右20px。（上下、左右）

3.padding:10px 20px 30px;：上10px，左右20px，下30px。（上、左右、下）4.padding:10px 20px 30px 40px;上10px，右20px，下30px，左40px。（上、右、下、左）—顺时针

值不能为负数
行内元素左右边距没问题，上下边距不能完美设置
块级元素，行内块元素，四个方向内边距都可以完美设置

border

属性	作用	属性值
`border`	符合属性，简写所有边框属性	基本是width，color，style 值没有顺序要求 `border: 1px solid red;`
`border-width`	设置边框宽度复合四个方向的边框宽度	长度，默认3px `border-width: 2px;`
`border-style`	定义边框风格复合四个方向的边框风格	none：默认值 solid：实线边框线风格dashed：虚线 dotted：点线 double：双实线。。。。 `border-style: dashed;`
`border-color`	设置边框颜色复合四个方向的边框颜色	颜色，默认黑色 `border-color: #00f;`
`border-{side}` border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color	设置边框某一边每一个`border-{side}` 属性都有子属性`border-{side}-{width/style/color}`	同上 *border-top: 1px solid black; / 上边框 /* *border-right: 2px dashed red; / 右边框 /* *border-bottom: 3px dotted blue; / 下边框 /* *border-left: none; / 左边框无 /*
`border-radius`	圆角边框	`border-radius: 5px;` 分角设置 *border-radius: 10px 5px 20px 0; / 左上右上右下左下 /* button { border: 2px solid #333; *border-radius: 8px; / 圆角按钮 /* }
`box-shadow`	边框阴影	`box-shadow: 2px 2px 5px grey;`

透明边框技巧

通过 transparent 实现占位或悬停效果：

.box {border: 2px solid transparent; /* 初始透明 */
}
.box:hover {border-color: gold; /* 悬停时显示 */
}

border-style、border-width、border-color其实也是复合属性。

margin

margin复合属性的使用规则：

1.margin:10px;四个方向内边距都是10px。

2.margin:10px 20px；上下10px，左右20px。（上下、左右）

3.margin:10px 20px 30px;：上10px，左右20px，下30px。（上、左右、下）4.margin:10px 20px 30px 40px;上10px，右20px，下30px，左40px。（上、右、下、左）—顺时针

注意

父亲的content中承装着子元素，子元素要出现在父元素的内容区，所以子元素的margin是参考父元素的content计算的
margin-top，margin-left会影响自身位置；margin-bottom，margin-right会影响兄弟元素位置
块级元素，行内块元素，四个方向内边距都可以完美设置；行内元素，左右margin是可以完美设置的，但是上下margin不能设置（设置后无效）
margin值可以为auto；块级元素，margin-left，margin-right可以设置为auto，呈现其在父元素内水平居中；但是margin-top，margin-bottom不能设置auto（margin：0px auto）
值可以是负数，两个盒子层叠

margin塌陷

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

解决方法

方案一：给父元素设置不为0的padding。
方案二：给父元素设置宽度不为0的border。（例如border：1px solid grey）
方案三：给父元素设置css样式overflow：hidden（不影响父元素容器的大小）
- 使用overflow属性控制溢出的部分，把溢出的部分隐藏（hidden）

margin合并

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。当两个或多个垂直相邻的块级元素的上下外边距相遇时，它们会合并成一个外边距，其大小为两者中的较大者。这种现象仅发生在垂直方向，水平方向的外边距不会合并。（行内元素的垂直方向由内容撑开，不能设置上下margin，不会发生外边距合并）

解决方案：无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距（希望上下间距多少就设置多少，不必拆分成上margin与下margin）就可以了。

使用场景

标题与段落间距

<h2 style="margin-bottom: 20px;">标题</h2>
<p style="margin-top: 15px;">正文内容</p>
<!-- 实际间距：20px -->

优化：统一使用 margin-bottom 或 margin-top 避免混乱。

卡片列表布局

<div class="card" style="margin-bottom: 16px;">卡片1</div>
<div class="card" style="margin-top: 16px;">卡片2</div>
<!-- 实际间距：16px（非32px） -->

解决：仅对卡片设置 margin-bottom。

二、内容溢出—overflow

内容溢出是指当元素的内容（文本、图片、子元素等）超出其指定的宽度或高度时，内容超出容器边界的现象。

visible 默认值，内容溢出容器并显示在容器外需要完全展示内容（可能破坏布局）
hidden 隐藏溢出部分裁剪多余内容（如头像圆形遮罩）

三、隐藏元素

visibility

visibility属性默认值是show，如果设置为hidden，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。

display

设置display：none，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。display的值还可以控制是块级元素/行内元素/行内块级元素

块元素（块级元素）—block

页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可包含行内和块级元素
独占一行（前后自动换行）
可以通过CSS设置宽高。
- 主体结构标签：<html> 、<body>
- 排版标签：<h1>~<h6>、<p>、<hr>、<pre><div>
- 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
- 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr><caption>
- 表单<form>与下拉框选项<option>（下拉框slect是行内块元素）

行内元素（内联元素）—inline

在页面中不独占一行（多个可并列），一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
不能包含块级元素
不换行，与其他行内元素同行
无法通过CSS设置宽高。
- 文本标签：换行/另起一行<br>、强调<em>、强调<strong>、文本上标<sup>、文本下标<sub>、表删除文本<del>、表新增文本<ins>
- 超链接<a>与表单控件关联<label>

注（这些都是逻辑上标签，视觉效果可用css更改）；

行内块元素（内联块元素）—inline-block

页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
不换行，但可设置宽高
可包含行内和块级元素（和块元素相同；其余同行内元素）
可以通过CSS设置宽高（和块元素相同；其余同行内元素）
- 图片：<img>
- 单元格：<td>、<th>
- 表单控件：<input>、<textarea>、<select>、<button>
- 框架标签：<iframe>

注意：元素在html中只分为：行内元素、块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。

修改显示模式

通过 display 属性可改变元素的默认行为：

span { display: block; }    /* 行内 → 块级 */
div { display: inline; }    /* 块级 → 行内 */
a { display: inline-block; } /* 行内 → 行内块级 */
p { display: none; } /* 元素会被隐藏，并且页面将显示为好像该元素不在其中 */