当前位置： 首页 > article >正文

css 知识点整理

article 2025/3/13 17:30:34

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 空白字符渲染浏览器会将


http://www.kler.cn/a/583023.html

相关文章：

  • Qt 数据库操作（Sqlite）
  • Java虚拟机之垃圾收集（一）
  • idea超级AI插件，让 AI 为 Java 工程师
  • 基于PyTorch的深度学习6——可视化工具Tensorboard
  • 无人机第三方安全风险评估技术详解
  • 从0开始的操作系统手搓教程45——实现exec
  • 从零到一：如何系统化封装并发布 React 组件库到 npm
  • C# WPF 基础知识学习（二）
  • 二进制安装指定版本的MariaDBv10.11.6
  • 子母钟系统，京准电子科技助力高考精准计时
  • Django REST Framework 中 ModelViewSet 的接口方法及参数详解，继承的方法和核心类方法，常用查询方法接口
  • 多模态推理模型相关开源工作
  • STM32使用EXTI触发进行软件消抖（更新中）
  • C# AOT生成的hellowwordEXE运行占用多少内存1-5MB?
  • ESP8266远端可变的UDP传输
  • Java高频面试之集合-09
  • IDEA修改项目的JDK版本（无缝切换8和11）
  • 前端发布缓存导致白屏解决方案
  • SpringBoot实现文件上传
  • Excel两列和依次相减