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 的布局特性 会保留块盒属性，同时像文本一样排列，因此空白字符会影响布局。
  解决方法：

• 1. 消除
     • 的字符间隔 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. 如何实现两栏布局，右侧自适应

  两栏布局
  浮动实现：

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

  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 组合起来的 色值