002.从零开始复习前端--CSS

2025年07月10日前端

002.从零开始复习前端–CSS

学习没有动力就可以看看招聘网站上面的薪资，可以对比其他的工作环境

CSS

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS

w3school文档：https://www.w3school.com.cn/css/index.asp

w3school手册：https://www.w3school.com.cn/cssref/index.asp

CSS的内容非常多，只能靠慢慢积累

语法

选择器

CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

选择器的权重问题

权重：听谁，多个选择器可以叠加

选择器	权重	权重的等级
！important	无穷大	0
style 属性	1,0,0,0	1
id 选择器	0,1,0,0	2
类、伪类、结构伪类、属性选择器	0,0,1,0	3
标签、伪元素选择器	0,0,0,1	4
通配符选择器	0,0,0,0	5
继承的样式	没有权重	6

属性选择器

用的少，一般只针对特殊场景有奇效

[attr*=val]：属性包含某一个val值
[attr^=val]：属性以某一个val开头
[attr$=val]：属性以某一个val结尾
[attr|=val]：属性等于val或val开头并且紧跟连接符-
[attr~=val]：属性包含val，如果有其他值必须以空格与val分割

BFC

可以解决高度坍塌，外边距重叠，自适应布局

https://fanyouf.gitee.io/interview/css/02.html#%E7%AE%80%E7%89%88

HTML 根元素
position 为 absolute 或 fixed
float 属性不为 none（常用）
overflow 不为 visible（常用）
display 为 inline-block， table-cell， table-caption， flex（常用)

绝对定位的高度坍塌不行，得使用js

媒体查询

可以根据不同的设备或宽度大小等特性来修改样式

三大使用方法

通过@media和@import使用不同的css规则

1	@import url(./css/index.css) (max-width:800px)

在link、style等标签中使用media属性指定媒体查询

1	<link res="stylesheet" media="(max-width:800px)" href="./css/index.css">

使用@media

@media (max-width:800px){
	div{
		color:red;
	}
}

媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

媒体特性

值	描述
width	可加max min前缀
height	可加max min前缀
device-width	可加max min前缀
orientation	portrait竖屏/landscape横屏

em/rem

em：相对自身的字体大小，如果对自身字体大小设置，则相对父元素大小
rem：相对根元素（html）大小

移动端适配

1	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

值	可能的附加值	描述
width	正整数或字符串device-width	定义viewport的宽度
height	正整数或字符串device-height	定义viewport的高度。未被任何浏览器使用
initial-scale	0.0-10.0之间	设备与viewport的缩放比例
maximum-scale	0.0-10.0之间	定义缩放的最大值必须大于等于maximum-scale，否则表现不可预测
minimum-scale	0.0-10.0之间	定义缩放的最大值必须大于等于minimum-scale，否则表现不可预测
user-scalable	yes或no	是否允许缩放，默认yes。部分浏览器忽视这个规则

移动端通常使用媒体查询或者rem，也可能使用uniapp来做

重点

flex布局：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

grid布局：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

grid视频教程：https://www.bilibili.com/video/BV1w84y1r7X8/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=b307bf90a5b243266e19ff3e3d323e66

样式穿透

样式穿透

1. >>>

适用与 css、stylus，不太推荐，可能会有问题
外层类 >>> 想要修改类名 {
修改样式
}

2. /deep/

适用于 scss、less
外层类 /deep/ 想要修改类名 {
修改样式
}

3. ::v-deep

通用，据说可以加快编译速度
::deep 想要修改类名 {
修改样式
}

css函数

css函数

var(–name,value)：全局变量
- name前缀必须是–
- value是默认值，如果没有找到name时使用
- 示例：
  1
  2
  3
  4
  5
  6
  :root{
  --blue: #1e90ff
  }
  div{
  color: var(--blue)
  }
calc()：css四则运算
- 示例：
  1
  2
  3
  div{
  width: calc(100% - 80px);
  }

class命名

参考单词

header页眉 body页身 footer页脚
container集装箱 aside侧边栏 main主体 submain副主体
left左侧 center中间 right右侧
top上部 middle中部 bottom底部
group 分组 row行 col列 list组
max 最大 plus超大 medium中等 small小 mini极小
primary 主要的 success成功的 warning警告的 danger危险的 default默认的
info信息 text文本 link链接 tips小贴条
active活跃的 disabled禁用的 readonly只读的 highlight高亮的
height高 width宽 weight粗

更多查看：https://guide.aotu.io/index.html

属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

更多代码规范查看：https://guide.aotu.io/index.html