css-知识点整理

2025-03-12 约 4524 字预计阅读 10 分钟

https://bing.ee123.net/img/rand?artid=146075085

css 知识点整理

1.css 层叠样式表中的 inherit、initial、unset

关键字	适用属性类型	行为逻辑	典型场景
inherit	所有属性	强制继承父级值	统一子元素样式
initial	所有属性	重置为规范初始值	清除自定义或继承样式
unset	所有属性	自动判断继承或重置	简化全局样式重置或覆盖

2. sass 常用语法

2.1、变量（Variables）

$primary-color: #3498db;
$font-size: 16px;

// 使用变量
.header {
  color: $primary-color;
  font-size: $font-size;
}

2.2 嵌套（Nesting）

.nav {
  padding: 1rem;
  // 子元素嵌套
  ul {
    margin: 0;
    
    // 父选择器 & 
    li {
      display: inline-block;
      &:hover {
        color: red;
      }
    }
  }
}
// 编译结果
.nav { padding: 1rem; }
.nav ul { margin: 0; }
.nav ul li { display: inline-block; }
.nav ul li:hover { color: red; }

2.3 混合指令（Mixins）

// 定义 Mixin
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 调用 Mixin
.container {
  @include flex-center(column);
}
// 编译结果
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

2.4 继承（Extend）

// 基础样式
%button-base {
  padding: 12px 24px;
  border-radius: 4px;
}

// 继承扩展
.primary-button {
  @extend %button-base;
  background-color: blue;
}

2.5 循环（Loops）

2.5.1 @each 遍历列表

$sizes: 40px, 60px, 80px;
@each $size in $sizes {
 .icon-#{$size} {
   width: $size;
   height: $size;
 }
}

2.5.2 @for 生成序列

@for $i from 1 through 3 {
 .mt-#{$i} { margin-top: 10px * $i; }
}

2.6 函数（Functions）

// 自定义函数
@function to-rem($px) {
 @return ($px / 16px) * 1rem;
}

// 使用函数
.text {
 font-size: to-rem(24px); // 输出 1.5rem
}

2.7 模块化（@use 和 @forward）

2.7.1 定义模块 _variables.scss

// 私有变量（加 - 前缀）
$-base-padding: 10px;

// 公开变量
$primary-color: #333 !default;

// 2.7.2 引入模块 main.scss
@use 'variables' as vars;

body {
  color: vars.$primary-color;
  padding: vars.$-base-padding; // 报错（无法访问私有变量）
}

2.8 条件语句（@if, @else）

@mixin theme($mode) {
  @if $mode == dark {
    background: #000;
    color: white;
  } @else {
    background: white;
    color: #000;
  }
}

2.9 插值语法（#{}）

$property: "margin";
$direction: "top";

.#{$property}-#{$direction} {
  #{$property}-#{$direction}: 20px;
}

2.10 运算符

$width: 100%; 

.sidebar {
  width: $width / 3 - 20px;  // 支持加减乘除
  padding: 10px + 5px;      // 15px
}

3. 对BFC的理解，如何创建BFC

BFC (Block Formatting Context) 块级格式上下文，是 CSS 中的一种布局机制，一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。【用于解决高度塌缩、边距折叠等】

如何触发：

根元素默认生成一个 BFC；
float 值非 none；
overflow值非 visible；
position 值为absoute、fixed；
display 值为 inline-block、table-cell、flex、grid、【新属性 flow-root】

1.解决高度塌陷问题

浮动元素会脱离文档流（绝对定位元素也会脱离文档流），导致无法计算准确的高度

( 给父级 )清除浮动：解决高度塌陷的问题是前提能够识别并且包含浮动元素

使用伪类清除浮动

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

:after 选择器向选定的元素之后插入内容

content:“”; 生成内容为空

display: block; 生成的元素以块级元素显示,

clear:both; 清除前面元素浮动带来的影响

2. 解决margin 重叠：

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生折叠外边距高度中的较大者

3. 解决margin 击穿

子元素内的 margin-top，作用在了父元素的上

解决方案：透明边框（border: 1px solid transparent）

4. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

HTML 空白字符渲染浏览器会将

标签间的换行、缩进等空白字符渲染成一个空格，类似于文本排版中的自然间隔。inline-block 的布局特性会保留块盒属性，同时像文本一样排列，因此空白字符会影响布局。
解决方法：

消除
- 的字符间隔 letter-spacing:-8px，不足：这也设置了
- 内的字符间隔，因此需要将
- 内的字符间隔设为默认letter-spacing:normal。
- 使用 flex 或者 grid 布局

5. link 和 import 区别

区别点	link	@import
从属关系	HTML 标签（属于 HTML 规范）	CSS 语法（属于 CSS2.1 规范）
语法	< link href=“style.css” rel=“stylesheet”>（写在 HTML 中）	@import url(“style.css”);（写在 CSS 文件或 < style> 标签内，且必须在顶部）
加载顺序	与 HTML 并行加载，不阻塞页面渲染	需等待 HTML 加载完成后再加载 CSS，可能导致 FOUC（短暂无样式）
兼容性	所有浏览器（包括 IE5+）	IE5+ 及现代浏览器（IE4 及更低不支持）
DOM 可控性	可通过 JS 动态插入、删除或修改（如切换主题）	无法通过 JS 动态操作，需直接修改 CSS 文件
权重与覆盖	优先级较高，后加载的样式覆盖先加载的	优先级较低，即使后加载也可能被样式覆盖
媒体查询支持	支持 media 属性（如 media=“print”）	支持在 @import 后加媒体条件（如 @import url(“print.css”) print;）
模块化与代码复用	需手动在 HTML 中引入多个文件	可在 CSS 文件中嵌套引入其他文件（如 @import “base.css”;）
预加载优化	支持 rel=“preload” 提前加载关键 CSS	不支持预加载
适用场景	主样式表、动态样式加载、需高性能的场景	CSS 模块化拆分、第三方基础样式库引入

6. transition 和 animation 的区别？

特性	transition	animation
触发方式	需用户交互或属性变化触发	可自动触发或手动控制
状态控制	仅初始态和结束态	支持多关键帧中间状态
循环能力	默认单次运行	支持无限循环
控制复杂度	简单（时长、延迟、缓动）	复杂（方向、填充模式、迭代次数）
适用场景	简单属性过渡（颜色、尺寸）	复杂动画（序列、循环）

7.为什么有时候人们用translate来改变位置而不是定位如absolute或relative？

性能更优，GPU 加速，避免重排。

translate ：通过 transform：translate() 移动元素时，浏览器仅会触发合成（composite），利用 GPU 加速操作图层，跳过布局和绘制阶段，性能更优。
GPU 加速：translate 的变换由 GPU 处理，适合高频次动画（如滚动、平移）

8. 盒子模型

W3C 标准盒子模型 ( box-sizing: content-box)：宽度 = 内容的宽度(content) + padding + border + margin

IE ( 怪异 )盒子模型 ( box-sizing: border-box)：宽度 = (content + padding + border) + margin

flex 弹性盒子

9. margin 和 padding 的区别

作用对象不同

10. VW 和 % 的区别

% 有继承关系

11. 行元素和块元素的区别

块级元素：div 、p、h1~h6、ol、ul、dl、table、form、address

行内元素：a、span、em、strong、b、i、u、label、br、img

块元素有继承关系

12. 单行省略和多行省略的区别

单号省略一定要设置宽度

多行省略

.lines{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

13. 禁止鼠标事件( 页面水印 )

.div{
	pointer-event:none;
}

14. 用 css 画一个三角形

.sqare { 
    /* 
    width:0px; 
    height:0px; 
    border-top:40px solid red; 
    border-right:40px solid transparent; 
    border-bottom:40px solid transparent;
    border-left:40px solid transparent;
    */ 
	width: 0;
	height: 0;
	border-color: pink transparent transparent transparent;
	border-width: 400px;
	border-style: solid ;
}

15. 页面上实现超小字体或者超细边框

transform: scale(0.8)

16. 有哪些方式可以隐藏页面元素

display:none
visibility:hidden
opacity:0 （透明度，一般不会引发回流，会引发重绘）
设置 height、width 模型属性为 0 （配合 overflow：hidden）
posution：absolute （移出可视区域）
clip-path （裁切）

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

	display: none	visibility: hidden	opacity=0
页面中	不存在	存在	存在
回流（重排）	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
（如果）被遮挡的元素可触发事件	能	能	不能

17. 元素水平垂直的方法？如果元素不定宽高？

定位 + margin:auto
定位 + margin: 负值 ( 必须确定元素宽高 )
定位 + transform: translate(-50%,-50%);
table 布局 （必须确定元素宽高）

.father {
  display: table-cell;
  width: 200px;
  height: 200px;
  background: skyblue;
  vertical-align: middle;
  text-align: center;
}
.son {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

flex 布局
grid 布局

.father {
   display: grid;
   align-items:center;
   justify-content: center;
   width: 200px;
   height: 200px;
   background: skyblue;

}
.son {
   width: 10px;
   height: 10px;
   border: 1px solid red;
}

内联元素居中布局

水平居中

行内元素可设置： text-align:center
flex 布局设置父元素：display: flex; justify-content:center;

垂直居中

单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：display:table-cell;vertical-align:middle;

块级元素居中布局

水平居中

定宽：margin: 0 auto
绝对定位 + left:50% + margin:-负自身一半

垂直居中

position: absolute设置left、top、margin-left、margin-top(定高)
display: table-cell
transform: translate(x, y)
flex (不定高，不定宽)
grid (不定高，不定宽)，兼容性相对比较差

18. 如何实现两栏布局，右侧自适应

两栏布局

浮动实现：

使用 float 左浮动左边栏
右边模块使用 margin-left 撑出距离
为父级添加 BFC ，防止下方元素飞到上方内容

flex 弹性布局

** 三栏布局 **

两边使用 float，中间使用 margin
两边使用 float 和负 margin
两边使用 absolute, 中间使用 margin
display: table
flex
grid 网格

19. flex 弹性盒布局模型

flex: 容器中默认存在两条轴，主轴和交叉轴，呈 90 度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向，每根轴都有起点和终点。

flex-wrap：wrap 让弹性盒元素在必要的时候拆行

使用场景：

方便实现元素水平垂直居中
方便自适应布局，移动端、小程序开发
flex:1 === flex-grow: 1; flex-shrink: 1;flex-basis: auto;
flex-grow 增长的量
flex-shrink 缩小的量
flex-basis 增长和缩减的基准,内容自动调整大小

20. grid 布局

grid：网格布局，是一种二维布局

Grid Container: Grid 的容器
Grid ltem： Grid 容器的直接子元素
用途：
居中布局
两列、三列布局
缺点：
总体兼容性不错, IE10 以下不支持
移动端支持不太好

21.

css 层叠样式表

一. 选择器

CSS2 规范中伪类和伪元素都以冒号开头，比如，：hover、：fist-child、：firs-letter、：before 等等

CSS3 规范中的伪类选择器前面用一个冒号，比如，：hover、：first-child

CSS3 规范中的伪元素选择器前面用两个冒号，比如, ::frist-letter、::before 等等

伪类和伪元素的区别

	语法	数量	位置	类与元素	使用场景
伪类	：	多个	前方和后方	修饰	多
伪元素	：：	单个	后方	创建对象	少

选择器

选择器	例子	例子描述
element1~element2	p~ul	选择前面有 < p> 元素的每个< ul> 元素
[ attributre~=value ]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个 < a> 元素
[attributre$=value]	a[src$=“.pdf”]	选择其 src 属性值以 “.pdf”结尾的所有 < a> 元素
[attributes*=value]	a[src*=“abc”]	选择 src 属性中包含 “abc” 字串的每个 < a> 元素
:first-of-type	p:first-of-type	选择属于其父元素首个 < p> 标签
:last-of-type	p:last-of-type	选择属于其父元素最后一个 < p> 标签
:only-of-type	p:only-of-type	选择属于其父元素唯一 < p> 标签
:only-child	p:only-child	选择属于其父元素唯一子元素的每个 < p> 元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素第二个子元素的每个 < p> 元素
:nth-last-child(n)	p:nth-last-child(2)	同上，但是从最后一个子元素开始计数
:nth-of-type(n)	p:nth-of-type(2)	选择其父元素第二个 < p> 元素的每个 < p> 元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 < p> 元素

二. 新样式

边框：

border-radius: 创建圆角边框
border-shadow: 为元素添加阴影
border-image:使用图片绘制边框

背景:

background-clip 确定背景画区
background-origin 背景图片对齐
background-size 背景图片的大小
background-break

文字:

word-wrap：换行( normal: 默认换行；break-all: 允许在单词内换行)
text-overflow：clip 修剪文本；ellipsis 显示省略号替代被修剪的文本
text-shadow 文字阴影
text-decoration 文字渲染

颜色：

rgba
hsla

三. transition 过度

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

四. transform 转换

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

五. animation 动画

transition 和 animation 区别

	触发条件	状态	CSS 属性	遍历循环	JS 结合使用	子属性
transition	需要	两种	不可修改	无法	易于	少
animation	无需	无限制	可修改	允许	不易于	多

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

六. 渐变

linear-gradient : 线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
radial-gradient : 径向渐变
linear-gradient(0deg, red, green);
七.布局
flex 弹性布局、Grid 栅格布局

22. 实现毛玻璃效果（滤镜）

{
	backdrop-filter:blur(10px)
}

23. web 安全色

00、33、66、99、CC、FF 组合起来的色值