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

相关推荐
best6661 分钟前
预检请求是什么?
前端
前端加油站3 分钟前
单元测试入门与进阶
前端·单元测试
前端付杰8 分钟前
第八节: 全面理解vue3: 工具函数的核心作用与使用方法
前端·javascript·vue.js
Mr_sun.8 分钟前
Node.js与VUE安装
前端·vue.js·node.js
Tonychen9 分钟前
【React 源码阅读】为什么 React Hooks 不能用条件语句来执行?
前端·react.js·源码阅读
Cutey91613 分钟前
Vuex vs Pinia
前端·vue.js·面试
Sallywa19 分钟前
全局替换的思路历程
前端
Anlici24 分钟前
虚拟dom 源码分析一下
前端·javascript·前端框架
码云之上1 小时前
一文讲明白页面导出为HTML实现原理与步骤
前端·javascript·canvas
unioncron1 小时前
uniapp上传文件问题以及返回上一页出现退出app的问题记录
android·前端·uni-app