本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。在网页布局与设计中，盒子模型是最为核心和基础的概念之一，它支撑起整个网页的结构框架。理解盒子模型的组成、内容溢出的处理方式以及元素隐藏的实现方法，是掌握网页布局技巧、打造美观且功能完善的网页界面的关键。本文介绍盒子模型的组成要素（包括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
属性 |
作用 |
属性值 |
|
符合属性，简写所有边框属性 |
基本是width，color，style 值没有顺序要求
|
|
设置边框宽度 复合四个方向的边框宽度 |
长度，默认3px
|
|
定义边框风格 复合四个方向的边框风格 |
none：默认值 solid：实线边框线风格dashed：虚线 dotted：点线 double：双实线 。。。。
|
|
设置边框颜色 复合四个方向的边框颜色 |
颜色，默认黑色
|
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-top: 1px solid black; /* 上边框 */ border-right: 2px dashed red; /* 右边框 */ border-bottom: 3px dotted blue; /* 下边框 */ border-left: none; /* 左边框无 */ |
|
圆角边框 |
分角设置 border-radius: 10px 5px 20px 0; /* 左上 右上 右下 左下 */ button { border: 2px solid #333; border-radius: 8px; /* 圆角按钮 */ } |
|
边框阴影 |
|
透明边框技巧
通过 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; } /* 元素会被隐藏，并且页面将显示为好像该元素不在其中 */使用场景
(1) 行内元素适用场景
- 文本修饰（如加粗
<strong>、斜体<em>）。 - 包裹少量文字或图标（如
<span>、<a>）。
(2) 块级元素适用场景
- 页面布局容器（如
<div>、<section>）。 - 结构性内容（如段落
<p>、标题<h1>）。
(3) 行内块级元素适用场景
- 水平排列但需控制尺寸的组件（如按钮
<button>、输入框<input>）。 - 图文混排时对齐（如
vertical-align: middle）