【前端学习笔记03-CSS 自用】

内容来自于B站BV1p84y1P7Z5《尚硅谷禹神前端入门html+css零基础教程》P93-138，仅作笔记自用。

一、CSS字体属性

1.1 字体大小 

属性名： font-size

由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。 

1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动 消失。

2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。

3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

---

1.2 字体族

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

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

1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。

2. 如果字体名包含空格，必须使用引号包裹起来。

3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。 

---

1.3 字体风格

属性名：font-style

常用值：实现斜体时，更推荐使用 italic 。

1. normal ：正常（默认值）
2. italic ：斜体（使用字体自带的斜体效果）
3. oblique ：斜体（强制倾斜产生的斜体效果）

---

1.4 字体粗细

属性名： font-weight 

关键词：

1. lighter ：细
2. normal ： 正常
3. bold ：粗
4. bolder ：很粗 （多数字体不支持）

数值：实际开发中用数值较多。

1. 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的 精确程度）。
2. 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于 bold 。 

---

1.5 字体复合写法

属性名： font ，可以把上述字体样式合并成一个属性。

编写规则：

1. 字体大小、字体族必须都写上。
2. 字体族必须是最后一位、字体大小必须是倒数第二位。
3. 各个属性间用空格隔开。 实际开发中更推荐复合写法，如只想设置字体大小，就直接用 font-size 属性。

---

二、CSS文本属性

2.1 文本颜色

属性名：color

可选值： 1. 颜色名 2. rgb 或 rgba 3. HEX 或 HEXA （十六进制） 4. HSL 或 HSLA

开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制） 

---

2.2 文本间距

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

---

2.3 文本修饰

属性名： text-decoration  作用：控制文本的各种装饰线。

可选值：

1. none ： 无装饰线（常用）
2. underline ：下划线（常用）
3. overline ： 上划线
4. line-through ： 删除线 
5. dotted ：虚线
6. wavy ：波浪线
7. 也可以指定颜色

---

2.4 文本缩进

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

---

2.5 文本对齐_水平 

属性名： text-align  作用：控制文本的水平对齐方式。

常用值：

1. left ：左对齐（默认值）
2. right ：右对齐 
3. center ：居中对齐

---

2.6 行高

属性名： line-height  作用：控制一行文字的高度。

可选值：

1. 数字：参考自身 font-size 的倍数（很常用）。
2. 像素( px )。
3. normal ：由浏览器根据文字大小决定的一个默认值。
4. 百分比：参考自身 font-size 的百分比。

• line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
• line-height 和 height 是什么关系？

1. 设置了 height ，那么高度就是 height 的值。

2. 不设置 height 的时候，会根据 line-height 计算高度。  

---

2.7 文本对齐_垂直 

1. 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
2. 居中：对于单行文字，让 height = line-height 即可。
3. 底部：对于单行文字，一个临时的方式：

 line-height = ( height × 2 ) - font-size - x 

备注： x 是根据字体族，动态决定的一个值。垂直方向上的底部对齐，更好的解决办法是定位去做。

---

2.8 属性名：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(https://blog.csdn.net/%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80)
list-style	复合属性	没有数量、顺序的要求

---

四、CSS表格属性

1. 边框相关属性

（其他元素也能用）：

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

2. 表格独有属性

（只有 <table> 标签 才能使用）：

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

---

---

五、CSS背景属性

css 属性名	功能	属性值
background-color	设置背景颜色	符合 CSS 中颜色规范的值。 默认背景颜色是 transparent 。
background-image	设置背景图片	url(https://blog.csdn.net/%E5%9B%BE%E7%89%87%E7%9A%84%E5%9C%B0%E5%9D%80)
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鼠标属性

属性名：cursor

1. pointer ：小手
2. move ：移动图标
3. text ：文字选择器
4. crosshair ：十字架
5. wait ：等待
6. help ：帮助

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

---

七、CSS盒子模型

1. CSS 长度单位

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

2. 元素的显示模式

• 块元素（block）

特点：

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

2. 默认宽度：撑满父元素。

3. 默认高度：由内容撑开。

4. 可以通过 CSS 设置宽高。 

• 行内元素（inline）(内联元素) 

特点:

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 无法通过 CSS 设置宽高。

• 行内块元素（inline-block）(内联块元素) 

特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 可以通过 CSS 设置宽高。

---

---

4. 修改元素的显示模式 

属性名：display 

---

5. 盒子模型的组成

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

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

---

6. 盒子内容区（content）

---

7. 关于默认宽度

默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。

总宽度 = 父的 content — 自身的左右 margin 。

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右 padding 。

---

8. 盒子内边距（padding）

 

---

9. 盒子边框（border）

---

 10. 盒子外边距_margin

10.1 margin 注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着 子元素）

2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素 的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级 元素会在父元素中水平居中。

5. margin 的值可以是负值。 

10.2 margin 塌陷问题

margin 塌陷问题：第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

解决方案：

• 方案一：给父元素设置 css 样式 overflow:hidden 。
• 方案二：给父元素设置宽度不为 0 的 border 。
• 方案三：给父元素设置不为 0 的 padding 。

10.3 margin 合并问题 

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

---

11. 处理内容溢出 

属性名：overflow 

---

12. 隐藏元素的方式 

方式一：visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。

元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式二： display 属性

设置 display:none ，就可以让元素隐藏。

彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。 

---

13. 样式的继承 

如果元素本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

会继承的 css 属性：

字体属性、文本属性（除了vertical-align）、文字颜色 等。

能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

不会继承的 css 属性：

边框、背景、内边距、外边距、宽高、溢出方式 等。 

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。 

注意 Inherited from ：高亮处为继承样式。

---

14. 布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。 例如： text-align 、 line-height 、 text-indent 等。

2. 如何让子元素，在父亲中 水平居中：

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

3. 如何让子元素，在父亲中 垂直居中：

• 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子 总高) / 2。
• 若子元素为行内元素、行内块元素： 让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle; 。
• 补充：若想绝对垂直居中，父元素 font-size 设置为 0 。 

---

15.  元素之间的空白问题

产生的原因： 行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

• 1. 方案一：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。
• 2. 方案二： 去掉换行和空格（不推荐）。

---

16. 行内块的幽灵空白问题

产生原因： 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案： 

• 1. 方案一： 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、 top 均可。
• 2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
• 3. 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 fontsize 。 

---

八、浮动

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

1.元素浮动后的特点

1. 🤢缺点：脱离文档流。
2. 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽 高。
3. 😊不会独占一行，可以与其他元素共用一行。
4. 😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
5. 😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

---

2.解决浮动产生的影响

2.1 元素浮动后会有哪些影响

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

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

解决方案：

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

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

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

---

3. 浮动相关属性