CSS 学习成长笔记（3）

最新推荐文章于 2024-07-12 20:49:16 发布

啥都想学之学习中

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量100

点赞数

分类专栏：前端之CSS 文章标签： css 学习

本文链接：https://blog.csdn.net/weixin_44915897/article/details/127170011

版权

前端之CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS 盒子模型

1. CSS 三大特性

继承性
层叠性
优先级

2. CSS 特性之优先级（详细）

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
注意点：
1. !important 写在属性值的后面，分好的前面
2. !important 不能提升继承的优先级，只要是继承优先级最低
3. 实际开发中不建议使用 !important
优先级权重叠加计算
- 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
- 权重叠加计算公式（每一级之间不存在进位） ：
  复合选择器中：（第一级，第二级，第三级，第四级）
  
  （行内样式个数，id 选择器个数，类选择器个数，标签选择的个数）
  1. 先比较第一级数字，如果比较出来了，之后的不需要再看
  2. 如果第一级数字相同，此时再去比较第二级数字，依此类推
  3. 如果最终所有数字都相同，表示优先级相同，则比较层叠性
  4. !important 如果不是继承，则权重最高
  5. 都是继承的时候，看继承哪个父级，哪个父级高，哪个选择器生效

3. 盒子模型

盒子的概念
1. 页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便地进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个矩形区域
盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
内容区域的宽度和高度
1. 属性：width、height
2. 只是内容的宽度和高度，不包含其他
边框
1. 属性名：border
2. 属性值：单个取值的连写，取值之间以空格隔开【例如：border: 10px solid red;】
3. 边框样式：solid(实线)、dashed(虚线)、dotted(点线)
4. 单方向设置：border + 方位名字
内边距
1. padding: 上右下左
2. 只写一个值时，默认四个方向都一样
3. 只写两个值时，下和上一样，左和右一样
4. 只写三个值时，左和右一样
- CSS3盒子模型【自动內减】：给盒子设置属性 box-sizing: border-box;
外边距
1. margin: 上右下左
2. 和内边距类似
清楚默认内外边距

浏览器会默认给部分标签设置默认的 margin 和 padding，但一般在项目开始前需要先清除这些标签默认的内外边距【例如：body标签默认 marigin: 8px；p标签默认有上下的 margin；ul标签默认有上下的 margin 和 padding-left】
```
/* 解决方法 */
* {
	margin: 0;
	padding: 0;
}
```
外边距折叠现象
- 合并现象
  
  场景：垂直布局 的 块级元素，上下的 margin 会合并
  结果：最终两者距离为 margin 的最大值
  解决方法：只给其中一个盒子设置 margin 即可
- 塌陷现象
  场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
  结果：导致父元素一起往下移动
  解决方法：
  1. 给父元素设置 border-top 或者padding-top（分隔父子元素的 margin-top）
  2. 给父元素设置 overflow: hidden【推荐使用】
  3. 转换成行内块元素
  4. 设置浮动

版心居中

/* 解决方法 */
选择器 {
	margin: 0 auto;
}

清楚列表前面的符号
```
ul {
	list-style: none;
}
```
行内元素内外边距的问题：上下内外边距不生效【给标签样式加行高 line-height】

二、CSS 浮动

1. 结构伪类选择器

作用与优势
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素

选择器

选择器	说明
E:first-child {}	匹配父元素中第一个子元素，并且是E元素
E:last-child {}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {}	匹配父元素中倒数第n个子元素，并且是E元素

n 为：0、1、2、3、4、5、6…
通过 n 可以组成常见公式：偶数（2n、even）；奇数（2n+1、2n--1、odd）；找到前5个：（-n+5）；找到从第5个往后：（n+5）

2. 伪元素

伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
种类：
伪元素作用
::before 在父元素内容的最前面添加一个伪元素
::after 在父元素内容的最后面添加一个伪元素
注意点：
- 必须设置 content属性才能生效
- 伪元素默认是行内元素

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后面添加一个伪元素

3. 标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动拆行

4. 浮动

写法：float: left; float:right；
特点：
1. 浮动的元素会脱离标准流（脱标），在标准流中不占位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动【顶对齐】
4. 浮动元素有特殊的显示效果：一行可以显示多个；可以设置宽高
5. 浮动的元素不能通过text-align: center 或者 margin: 0 atuto
CSS书写顺序：
- 浮动 / display
- 盒子模型：margin border padding 宽度高度背景色
- 文体样式

5. 清除浮动

含义：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标，不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：
- 直接设置父元素高度
  - 优点：简单粗暴、方便
  - 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
- 额外标签法
  - 首先在父元素内容的最后添加一个块级元素，然后给添加的块级元素设置 clear: both
  - 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
- 单伪元素清除法
  - 用伪元素替代了额外标签
```

.clearfix::after {
	content: '';
	display: block;
	clear: both;
}


.clearfix::after {
	content: '';
	display: block;
	clear: both;
	
	height: 0;
	visibility: hidden;
}
```
- 双伪元素清除法
  - 优点：项目中使用，直接给标签加类即可清除浮动
```

.clearfix::before,
.clearfix::after {
	content: '';
	display: table;
}

.clearfix::after {
	clear: both;
}
```
- 给父元素设置overflow: hidden

三、CSS定位装饰

1. 使用定位的步骤

设置定位方式
定位方式属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed
设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则（离哪边近用哪个）
  方向属性名属性值含义
  水平 left 数字 + px 距离左边的距离
  水平 right 数字 + px 距离右边的距离
  垂直 top 数字 + px 距离上边的距离
  垂直 bottom 数字 + px 距离下边的距离

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

方向	属性名	属性值	含义
水平	left	数字 + px	距离左边的距离
水平	right	数字 + px	距离右边的距离
垂直	top	数字 + px	距离上边的距离
垂直	bottom	数字 + px	距离下边的距离

2. 相对定位

代码：position: relative;
特点：
- 需要配合方位属性实现移动
- 在页面中占位置—没有脱标【占有原来的位置】
- 相对于自己原来的位置进行移动
应用场景
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动

3. 绝对定位

代码：position: absolute;
特点：
- 需要配合方位属性实现移动
- 如果父级有定位就参照父级定位，如果父级没有定位就相对于浏览器可视区域进行移动
- 在页面中不占位置（脱标）
应用场景
- 配合相对定位组CP（子绝父相）
绝对定位的盒子不能使用作用 margin auto 居中

绝对定位的盒子具备行内块的特点【高度、高度默认由内容撑开，可以设置宽高】

<!--  法一 -->
position: absolute;
left: 50%;
margin-left: -标签宽度的一半;
top: 50%;
margin-top: -标签高度的一半;

<!--  法一 -->
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

4. 固定定位

代码：position: fixed;
特点
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置----脱标
应用场景
- 让盒子固定在屏幕中的某个位置

5. 元素的层级关系

不同布局方式元素的层级关系
- 标准流 < 浮动 < 定位
不同定位之间的层级关系
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
默认情况下，定位的盒子后来者居上
z-index：整数；默认值是0，取值越大，显示顺序越靠上，

6. 垂直对齐方式

vertical-align
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
属性值效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐
浏览器把行内和行内块标签当作文字处理，默认基线对齐

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

7. 光标类型

设置鼠标光标在元素上时显示的样式
属性名：cursor
属性值效果
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字光标，提示用户可以移动

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

8. 边框圆角

让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字 + px，百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
常见应用
- 画一个圆：1.盒子必须是正方形；2.设置边框圆角为盒子宽高的一半【border-radius: 50%;】
- 胶囊按钮：1.盒子要求是长方形；2.设置边框为盒子高度的一半【border-radius: 盒子高度的一半;】

9. overflow 溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…

属性名：overflow

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条（上下都有滚动条区域）
auto	根据是否溢出，自动显示或隐藏滚动条

10. 元素本身隐藏

常见属性
- visibility: hidden【隐藏还占住原来的位置】
- display: none 【隐藏不占位置】

11. 元素整体透明度【配合 js 使用】

让元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明

四、精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
精灵图使用步骤
① 创建一个盒子，设置盒子的尺寸和小图尺寸相同【一般精灵图的标签都是用行内标签，如 span，b】
② 将精灵图设置为盒子的背景图片
③ 修改背景图位置
通过 PxCook 测量小图片左上角坐标，分别取负值设置给盒子的 background-position: x y；

五、背景图缩放

设置背景图片的大小

语法：background-size: 宽度高度;

取值	场景
数字 + px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，如果图的宽或者高与盒子的尺寸相同了，另一个方向停止缩放
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

background 连写拓展：background: color image repeat position/size;

六、盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

七、过渡

作用：让元素的样式慢慢的变化，常配合 hover 使用，增强网页交互体验
语法：transition: all 变化时长;
参数取值
过渡的属性 all : 所有能过渡的属性都过渡，具体属性名如：width: 只有width有过渡
过渡的时长数字 + s(秒)
注意点
- 过渡需要：默认状态和 hover 状态样式不同，才能有过渡效果
- transition 属性给需要过渡的元素本身加
- transition 属性设置在不同状态中，效果不同
  - 给默认状态设置，鼠标移入移出都有过渡效果
  - 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果

参数	取值
过渡的属性	all : 所有能过渡的属性都过渡，具体属性名如：width: 只有width有过渡
过渡的时长	数字 + s(秒)

八、骨架标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

</body>
</html>

九、SEO 三大标签

1. SEO

SEO(Search Engine Optimization)：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
**提升SEO的常见方法
- 竞价排名
- 将网页制作成 html 后缀
- 标签语义化（在合适的地方使用合适的标签）

2. 三大标签

title：网页标题标签
description：网页描述标签

keywords：网页关键词标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>Document</title>
</head>
<body>

</body>
</html>

十、ico 小图标

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

一般放在根目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>Document</title>
	<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
</head>
<body>

</body>
</html>