CSS2相关知识点-CSDN博客

本文链接：https://blog.csdn.net/PNPYY/article/details/148171954

CSS2相关知识点

CSS的编写位置
- 样式种类
- 样式表的优先级
CSS选择器
颜色的表示
CSS字体属性
CSS盒子模型
浮动
定位
布局
- 版心
- 常用布局名词
VSCode中的注释折叠

CSS的编写位置

样式种类

行内样式（又称内联样式）

写在标签的 style 属性中
语法：<h1 style="color:red;font-size:60px;">欢迎学习CSS</h1>
注意点：
1.style 属性的值不能随便写，写要符合 CSS 语法规范，是 名:值; 的形式。
2.行内样式表，只能控制当前标签的样式，对其他标签无效。

内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。
语法：<style> h1 { color: red; font-size: 40px; } </style>
注意点：
1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签
中。
2.此种写法：样式可以复用、代码结构清晰。

外部样式

写在单独的 .css 文件中，随后在 HTML 文件中引入使用.
语法：
1.新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
h1{ color: red; font-size: 40px; }
2.在 HTML 文件中引入 .css 文件。
<link rel="stylesheet" href="./xxx.css">
注意点：
1.<link> 标签要写在 <head> 标签中。
2.<link> 标签属性说明：
- href ：引入的文档来自于哪里。
- rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。
3.外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速
度，实现了结构与样式的完全分离。
4.实际开发中，几乎都使用外部样式，这是 最推荐的使用方式 ！

样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来
者居上”）。
同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来
者居上”）。

CSS选择器

CSS基本选择器

通配选择器
元素选择器
类选择器
id选择器

通配选择器

作用：可以选中所有的 HTML 元素。
语法：* { 属性名: 属性值; }
举例：* { color: orange; font-size: 40px; }

元素选择器

作用：为页面中 某种元素 统一设置样式。
语法：标签名 { 属性名: 属性值; }
举例：h1 { color: orange; font-size: 40px; } p { color: blue; font-size: 60px; }

类选择器

作用：根据元素的 class 值，来选中某些元素。
语法：.类名 { 属性名: 属性值; }
举例：.speak { color: red; } .answer { color: blue; }
注意点：
1.元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。
2.class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用
英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名
要有意义，做到 “见名知意”。
3.一个元素不能写多个 class 属性。
4.一个元素的 class 属性，能写多个值，要用空格隔开。

ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。
语法：#id值 { 属性名: 属性值; }
举例：#earthy { color: red; font-size: 60px; }

复合选择器

HTML元素间的关系

父元素（直接包裹某个元素的元素，就是该元素的父元素。）
子元素（被父元素直接包含的元素。）
祖先元素（父亲的父亲…，一直往外找，都是祖先，父元素，也算是祖先元素的一种。）
后代元素（儿子的儿子…，一直往里找，都是后代，子元素，也算是后代元素的一种。）
兄弟元素（具有相同父元素的元素，互为兄弟元素。）

交集选择器

作用：选中 同时符合 多个条件的元素。交集有并且的含义（通俗理解：即…又… 的意思）。
语法：选择器1选择器2选择器3…选择器n {}
举例：

/* 选中：类名为beauty的p元素*/
p.beauty {
	color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
	color: green;
}

注意点：
1.有标签名，标签名必须写在前面。
2.id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
3.交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素 又是span 元素。
4.用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。所谓并集就是或者的含义（通俗理解：要么…要么… 的意思）
语法：选择器1, 选择器2, 选择器3, … 选择器n {}
举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
	font-size: 40px;
	background-color: skyblue;
	width: 200px;
}

注意点：
1.并集选择器，我们一般竖着写。
2.任何形式的选择器，都可以作为并集选择器的一部分。
3.并集选择器，通常用于集体声明，可以缩小样式表体积。

后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）。选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。
举例：

/* 选中ul中的所有li */
ul li {
	color: red;
}
/* 选中ul中所有li中的a */
ul li a {
	color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
	color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
	color: blue;
}

注意点：
1.后代选择器，最终选择的是后代，不选中祖先。
2.儿子、孙子、重孙子，都算是后代。
3.结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
语法：选择器1 > 选择器2 > 选择器3 > … 选择器n {}。选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。
举例：

/* div中的子代a元素 */
div>a {
	color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
	color: red;
}

注意点：
1.子代选择器，最终选择的是子代，不是父级。
2.子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器：
- 作用：选中指定元素后，符合条件的相邻兄弟元素。所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。
- 语法：选择器1+选择器2 {} 。
- 示例：

/* 选中div后相邻的兄弟p元素 */
div+p {
	color:red;
}

通用兄弟选择器：
- 作用：选中指定元素后，符合条件的 所有兄弟 元素。（简记：睡在我下铺的所有兄弟）。
- 语法：选择器1~选择器2 {} 。
- 示例：

/* 选中div后的所有的兄弟p元素 */
div~p {
	color:red;
}

注意点：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

作用：选中属性值符合一定要求的元素。
语法：
1.[属性名] 选中具有某个属性的元素。
2.[属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。
3.[属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。
4.[属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
5.[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
举例：

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

伪类选择器

作用：选中特殊状态的元素。
如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。
常用的伪类选择器：
一、动态伪类：
1.:link 超链接未被访问的状态。
2.:visited 超链接访问过的状态。
3.:hover 鼠标悬停在元素上的状态。
4.:active 元素激活的状态。什么是激活？—— 按下鼠标不松开。
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。
5.:focus 获取焦点的元素。表单类元素才能使用 :focus 伪类。当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
得焦点。
二、结构伪类：
1.:first-child 所有兄弟元素中的第一个。
2.:last-child 所有兄弟元素中的最后一个。
3.:nth-child(n) 所有兄弟元素中的第 n 个。
4.:first-of-type 所有同类型兄弟元素中的第一个。
5.:last-of-type 所有同类型兄弟元素中的最后一个。
6.:nth-of-type(n) 所有同类型兄弟元素中的第n个。
关于n的值：
1.0 或不写：什么都选不中 —— 几乎不用。
2.n ：选中所有子元素 —— 几乎不用。
3.1~正无穷的整数：选中对应序号的子元素。
4.2n 或 even ：选中序号为偶数的子元素。
5.2n+1 或 odd ：选中序号为奇数的子元素。
6.-n+3 ：选中的是前 3 个。
了解：
1.:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
2.:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
3.:only-child 选择没有兄弟的元素（独生子女）。
4.:only-of-type 选择没有同类型兄弟的元素。
5.:root 根元素。
6.:empty 内容为空元素（空格也算内容）。
三、否定伪类：
:not(选择器) 排除满足括号中条件的元素。
四、UI伪类：
1.:checked 被选中的复选框或单选按钮。
2.:enable 可用的表单元素（没有 disabled 属性）。
3.:disabled 不可用的表单元素（有 disabled 属性）。
五、目标伪类（了解）
:target 选中锚点指向的元素。
六、语言伪类（了解）
:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置。
常用伪元素：
- ::first-letter 选中元素中的第一个文字。
- ::first-line 选中元素中的第一行文字。
- ::selection 选中被鼠标选中的内容。
- ::placeholder 选中输入框的提示文字。
- ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
- ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

颜色的表示

表示方式一：颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：
1.红色：red
2.绿色：green
3.蓝色：blue
4.紫色：purple
5.橙色：orange
6.灰色：gray
…

表示方式二：rgb 或 rgba

编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。
- r 表示红色
- g 表示绿色
- b 表示蓝色
- a 表示透明度
举例：

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

表示方式三：HEX 或 HEXA

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来表达。
格式为：# rrggbb 每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,
d, e, f ）所以每一种光的最小值是： 00 ，最大值是： ff
举例：

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */

注意点：IE 浏览器不支持 HEXA ，但支持 HEX 。

表示方式四：HSL 或 HSLA

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)
- 色相：取值范围是 0~360 度，具体度数对应的颜色如下图：
- 饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）
- 亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）
HSLA 其实就是在 HSL 的基础上，添加了透明度。

CSS字体属性

注意点：
1.Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动
消失。
2.不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大
小。
3.通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

字体族

属性名： font-family
作用：控制字体类型。
语法：

div {
	font-family: "STCaiyun","Microsoft YaHei",sans-serif
}

注意点：
1.使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里
去寻找。
2.如果字体名包含空格，必须使用引号包裹起来。
3.可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面
的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体即没有笔画首尾装饰的字体）。
4.windows 系统中，默认的字体就是微软雅黑。

字体风格

属性名： font-style
作用：控制字体是否为斜体。
常用值：
1.normal ：正常（默认值）
2.italic ：斜体（使用字体自带的斜体效果）实现斜体时，更推荐使用 italic 。
3.oblique ：斜体（强制倾斜产生的斜体效果）
语法：

div {
	font-style: italic;
}

字体粗细

属性名： font-weight
作用：控制字体的粗细。
常用值：
- 关键词
  1.lighter ：细
  2.normal ：正常
  3.bold ：粗
  4.bolder ：很粗（多数字体不支持）
- 数值：
  1.100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的
  精确程度）。
  2.100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于
  bold 。
语法：

div {
	font-weight: bold;
}
div {
	font-weight: 600;
}

文本颜色

属性名： color
作用：控制文字的颜色。
可选值：
1.颜色名
2.rgb 或 rgba
3.HEX 或 HEXA （十六进制）
4.HSL 或 HSLA
举例：

div {
	color: rgb(112,45,78);
}

文本间距

字母间距： letter-spacing
单词间距： word-spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。

文本修饰

属性名： text-decoration
作用：控制文本的各种装饰线。
可选值：
1.none ：无装饰线（常用）
2.underline ：下划线（常用）
3.overline ：上划线
4.line-through ：删除线
可搭配如下值使用：
1.dotted ：虚线
2.wavy ：波浪线
3.也可以指定颜色
举例：

a {
	text-decoration: none;
}

文本缩进

属性名： text-indent 。
作用：控制文本首字母的缩进。
属性值： css 中的长度单位，例如： px
举例：

div {
	text-indent:40px;
}

文本对齐_水平

属性名： text-align 。
作用：控制文本的水平对齐方式。
常用值：
1.left ：左对齐（默认值）
2.right ：右对齐
3.center ：居中对齐
举例：

div {
	text-align: center;
}

行高

属性名： line-height
作用：控制一行文字的高度。
可选值：
1.normal ：由浏览器根据文字大小决定的一个默认值。
2.像素( px )。
3.数字：参考自身 font-size 的倍数（很常用）。
4.百分比：参考自身 font-size 的百分比。
备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
举例：

div {
	line-height: 60px;
	line-height: 1.5;
	line-height: 150%;
}

应用场景：
1.对于多行文字：控制行与行之间的距离。
2.对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中

vertical-align

属性名： vertical-align 。
作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
常用值：
1.baseline （默认值）：使元素的基线与父元素的基线对齐。
2.top ：使元素的顶部与其所在行的顶部对齐。
3.middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
4.bottom ：使元素的底部与其所在行的底部对齐。
特别注意： vertical-align 不能控制块元素。

CSS列表属性

CSS 属性名	功能	属性值
list-style-type	设置列表符号	常用值如下：none ：不显示前面的标识（很常用！）; square ：实心方块disc ：圆形; decimal ：数字lower-roman ：小写罗马字; upper-roman ：大写罗马字; lower-alpha ：小写字母upper-alpha ：大写字母
list-style-position	设置列表符号的位置	inside ：在 li 的里面; outside ：在 li 的外边
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

CSS表格属性

边框相关属性（其他元素也能用）：

CSS 属性名	功能	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none 默认值； solid 实线； dashed 虚线； dotted 点线； double 双实线
border	边框复合属性	没有数量、顺序的要求

表格独有属性（只有 table 标签才能使用）：

CSS 属性名	功能	属性值
table-layout	设置列宽度	auto ：自动，列宽根据内容计算（默认值）；fixed ：固定列宽，平均分。
border-spacing	单元格间距	CSS 中可用的长度值。生效的前提：单元格边框不能合并。
border-collapse	合并单元格边框	collapse ：合并； separate ：不合并
empty-cells	隐藏没有内容的单元格	show ：显示，默认；hide ：隐藏；生效前提：单元格不能合并。
caption-side	设置表格标题位置	top ：上面（默认值）；bottom ：在表格下面

以上 5 个属性，只有表格才能使用，即：<table> 标签。

CSS背景属性

css 属性名	功能	属性值
background-color	设置背景颜色	符合 CSS 中颜色规范的值。默认背景颜色是 transparent 。
background-image	设置背景图片	url(图片的地址)
background-repeat	设置背景重复方式	repeat ：重复，铺满整个元素，默认值。repeat-x ：只在水平方向重复。repeat-y ：只在垂直方向重复。no-repeat ：不重复。
background-position	设置背景图位置	通过关键字设置位置：写两个值，用空格隔开。水平： left 、 center 、 right。垂直: top 、 center 、 bottom。如果只写一个值，另一个方向的值取 center。通过长度指定坐标位置：以元素左上角，为坐标原点，设置图片左上角的位置。两个值，分别是 x 坐标和 y 坐标。只写一个值，会被当做 x 坐标， y 坐标取center
background	复合属性	没有数量和顺序要求

CSS鼠标属性

CSS 属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer ：小手；move ：移动图标；text ：文字选择器；crosshair ：十字架；wait ：等待；help ：帮助

扩展

/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

CSS盒子模型

CSS长度单位

1.px ：像素。
2.em ：相对元素 font-size 的倍数。
3.rem ：相对根字体大小，html标签就是根。
4.% ：相对父元素计算。

注意点： CSS 中设置长度，必须加单位，否则样式无效！

元素的显示模式

块元素（block）
又称：块级元素
特点：
1.在页面中 独占一行，不会与任何元素共用一行，是从上到下排列的。
2.默认宽度：撑满 父元素。
3.默认高度：由内容撑开。
4.可以通过 CSS 设置宽高。
行内元素（inline）
又称：内联元素
特点:
1.在页面中 不独占一行 ，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2.默认宽度：由内容撑开。
3.默认高度：由内容撑开。
4.无法通过 CSS 设置宽高。
行内块元素（inline-block）
又称：内联块元素
特点：
1.在页面中 不独占一行 ，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2.默认宽度：由内容撑开。
3.默认高度：由内容撑开。
4.可以通过 CSS 设置宽高。

各元素的显示模式

块元素（block）

主体结构标签： <html> 、<body>
排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签： <table> 、<tbody> 、 <thead> 、<tfoot> 、 <tr> 、<caption>
<form> 与 <option>

行内元素（inline）

文本标签：<br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、<ins>
<a> 与 <label>

行内块元素（inline-block）

图片： <img>
单元格：<td> 、<th>
表单控件： <input> 、 <textarea> 、<select> 、 <button>
框架标签： <iframe>

修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：

值	描述
none	元素会被隐藏。
block	元素将作为块级元素显示。
inline	元素将作为内联元素显示。
inline-block	元素将作为行内块元素显示。

盒子模型的组成

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

margin（外边距）：盒子与外界的距离。
border（边框）：盒子的边框。
padding（内边距）：紧贴内容的补白区域。
content（内容）：元素中的文本或后代元素都是它的内容。
图示如下：

盒子的大小 = content + 左右 padding + 左右 border 。
注意点：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

盒子内容区

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

注意点：
1.max-width 、 min-width 一般不与 width 一起使用。
2.max-height 、 min-height 一般不与 height 一起使用。

关于默认宽度

所谓的默认宽度，就是 不设置 width 属性 时，元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。

盒子内边距（padding）

padding 复合属性的使用规则：

padding: 10px; 四个方向内边距都是 10px 。
padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）
padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、
下、左）

注意点：

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

margin注意事项

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着
子元素）
上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素
的位置。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右
margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级
元素会在父元素中水平居中。
margin 的值 可以是负值 。

margin塌陷问题

解释：第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷？
方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden

margin合并问题

解释：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

CSS 属性名	功能	属性值
overflow	溢出内容的处理方式	visible ：显示，默认值；hidden ：隐藏；scroll ：显示滚动条，不论内容是否溢出；auto ：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同 overflow
overflow-y	垂直方向溢出内容给的处理方式	同 overflow

注意点：
1.overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不
建议使用。
2.overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多
疑难杂症。

隐藏元素的方式

方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二： display 属性
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式的继承

会继承的 css 属性
字体属性、文本属性（除了vertical-align）、文字颜色等。
不会继承的 css 属性
边框、背景、内边距、外边距、宽高、溢出方式等。
规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的

布局技巧

行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。
如何让子元素，在父亲中 水平居中：

- 若子元素为 块元素 ，给父元素加上： margin:0 auto; 。
- 若子元素为 行内元素、行内块元素 ，给父元素加上： text-align:center 。

如何让子元素，在父亲中 垂直居中：
若子元素为 块元素，给子元素加上： margin-top ，值为： (父元素 content －子元素盒子总高) / 2
若子元素为 行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle; 。

补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

元素之间的空白问题

产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
1.方案一：去掉换行和空格（不推荐）。
2.方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推
荐）。

行内块的幽灵空白问题

产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
1.方案一：给行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、
top 均可。
2.方案二：若父元素中只有一张图片，设置图片为 display:block 。
3.方案三：给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。

浮动

元素浮动后会有哪些影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决浮动产生的影响（清除浮动）

解决方案：

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

.parent::after {
	content: "";
	display: block;
	clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

浮动相关属性

CSS 属性	功能	属性值
float	设置浮动	left : 设置左浮动；right : 设置右浮动；none ：不浮动，默认值
clear	清除浮动；清除前面兄弟元素浮动元素的响应	left ：清除前面左浮动的影响；right ：清除前面右浮动的影响；both ：清除前面左右浮动的影响

定位

相对定位

如何设置相对定位？

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

相对定位的参考点在哪里？

相对自己原来的位置

相对定位的特点：

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3.left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4.相对定位的元素，也能继续浮动，但不推荐这样做。
5.相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意点：绝大多数情况下，相对定位，会与绝对定位配合使用。

绝对定位

如何设置绝对定位？

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

绝对定位的参考点在哪里？

参考它的 包含块。
什么是包含块？
1.对于没有脱离文档流的元素：包含块就是父元素；
2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）。

绝对定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

固定定位

如何设置为固定定位？

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

固定定位的参考点在哪里？

参考它的视口
什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

粘性定位

如何设置为粘性定位？

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过 最常用的是 top 值。

粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

定位的特殊应用

注意点：
1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设
置宽高。
2.发生相对定位后，元素依然是之前的显示模式。
3.以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意点：该定位的元素必须设置宽高！！！

布局

版心

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是 960 ~ 1200 像素 之间。
版心可以是一个，也可以是多个。

常用布局名词

位置
顶部导航条	topbar
页头	header 、 page-header
导航	nav 、 navigator 、 navbar
搜索框	search 、 search-box
横幅、广告、宣传图	banner
主要内容	content 、 main
侧边栏	aside 、 sidebar
页脚	footer 、 page-footer

VSCode中的注释折叠

/* #region.....*/
/* #endregion.....*/

本文仅作个人学习笔记使用，无商业用途。
上述内容笔记大部分摘自“B站尚硅谷”
如若转载，请先声明。