css 知识点整理

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

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

2. sass 常用语法

2.1、变量(Variables)

css 复制代码
$primary-color: #3498db;
$font-size: 16px;

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

2.2 嵌套(Nesting)

css 复制代码
.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)

css 复制代码
// 定义 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)

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

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

2.5 循环(Loops)

2.5.1 @each 遍历列表
css 复制代码
$sizes: 40px, 60px, 80px;
@each $size in $sizes {
 .icon-#{$size} {
   width: $size;
   height: $size;
 }
}
2.5.2 @for 生成序列
css 复制代码
@for $i from 1 through 3 {
 .mt-#{$i} { margin-top: 10px * $i; }
}
2.6 函数(Functions)
css 复制代码
// 自定义函数
@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
css 复制代码
// 私有变量(加 - 前缀)
$-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)

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

2.9 插值语法(#{})

css 复制代码
$property: "margin";
$direction: "top";

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

2.10 运算符

css 复制代码
$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.解决高度塌陷问题

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

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

使用伪类清除浮动

css 复制代码
.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 的布局特性 会保留块盒属性,同时像文本一样排列,因此空白字符会影响布局。
    解决方法:
  1. 消除
    • 的字符间隔 letter-spacing:-8px,不足:这也设置了
    • 内的字符间隔,因此需要将
    • 内的字符间隔设为默认letter-spacing:normal。
    • 使用 flex 或者 grid 布局
区别点 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. 单行省略和多行省略的区别

单号省略一定要设置宽度

多行省略

css 复制代码
.lines{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
            

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

css 复制代码
.div{
	pointer-event:none;
}

14. 用 css 画一个三角形

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. 页面上实现超小字体或者超细边框

css 复制代码
transform: scale(0.8)

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

  • display:none
  • visibility:hidden
  • opacity:0 (透明度,一般不会引发回流,会引发重绘)
  • 设置 height、width 模型属性为 0 (配合 overflow:hidden)
  • posution:absolute (移出可视区域)
  • clip-path (裁切)
css 复制代码
.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 布局 ( 必须确定元素宽高 )
css 复制代码
.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 布局
css 复制代码
.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. 如何实现两栏布局,右侧自适应

两栏布局

浮动实现:

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

flex 弹性布局

** 三栏布局 **

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

19. flex 弹性盒布局模型

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

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

使用场景:

  1. 方便实现元素水平垂直居中
  2. 方便自适应布局,移动端、小程序开发
    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. CSS3 新增了哪些新特性

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 过度

css 复制代码
transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)

四. transform 转换

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

五. animation 动画
transition 和 animation 区别

触发条件 状态 CSS 属性 遍历循环 JS 结合使用 子属性
transition 需要 两种 不可修改 无法 易于
animation 无需 无限制 可修改 允许 不易于
css 复制代码
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. 实现毛玻璃效果(滤镜)

css 复制代码
{
	backdrop-filter:blur(10px)
}

23. web 安全色

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

相关推荐
用户25871419326311 分钟前
Vue3使用多线程处理文件分片任务
前端
不懂装懂的不懂13 分钟前
【vue3】中断请求、取消请求
前端·javascript·vue.js
鱼樱前端18 分钟前
React18+pnpm+Ts+React-Router v6从0-1搭建后台系统
前端·javascript·react.js
Epicurus19 分钟前
ES6箭头函数
前端
掘金0119 分钟前
手把手教你使用 FLV.js 在 Vue 项目中播放 FLV 视频
前端
前端没钱20 分钟前
vue3怎么和大模型交互?
前端
狗头大军之江苏分军22 分钟前
移动端直播卡顿如何实时检测且告知用户
java·前端·后端
1024小神24 分钟前
拦截网页中的 Fetch 和 XMLHttpRequest 请求方式方法
前端·javascript
谎言西西里24 分钟前
Vue组件化实战🧐:手把手教你打造模块化组件树🌳
前端
远舟巴卡25 分钟前
事件循环详解
前端·javascript·面试