当我们谈论CSS时，我们在谈论什么？

demon陈少
167 阅读8分钟

CSS 三大特性

继承性、优先级、 层叠性（计算权重）

继承性

顾名思义，就是后代继承前辈的特性。

在CSS中，文本相关的属性，普遍都具有继承性。只要给祖先标签设置文本相关的属性，这些属性在它的后代标签中也会生效。

比如下面的CSS的属性就具有继承性：

image.png

以上这些都是文本相关的属性，它们都具有继承性。

由于文本相关的属性具有继承性，因此我们通常会给body标签设置字号大小、文字颜色、行高等文本属性，我们知道html标签是根元素（最老的祖先），body标签是除了html标签外的第二大祖先标签，这样body标签里面的所有后代标签都会继承给body设置的文本属性，整个页面的默认文本样式就确定并且统一了。

PS:rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。

rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。

简单概括就是：em相对于父元素，rem相对于根元素。所以从继承的角度rem不会继承父元素的字体大小

优先级关系

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

Flex布局

缺点： ie10以上才能兼容；

理解flex: 1的作用

flex默认值是 0 1 auto

当我们将一个项目的flex属性设置为1时，相当于将其分配了一个相对于其他项目相同的可伸缩空间。换句话说，flex: 1会使得该项目尽可能地占据父容器中的剩余空间，但不会影响到其他项目。

flex: 1; /* 等同于 flex: 1 1 0%; */
  • flex-grow 设置为 1，表示该项可以在父容器内扩展，占据所有可用的额外空间。
  • flex-shrink 设置为 1，表示该项可以在空间不足时收缩，以避免溢出。
  • flex-basis 设置为 0%，表示项目在分配额外空间之前不占用空间，会自动填充所有可用空间。

实际运用示例

这种设置对于实现灵活的、响应式的布局非常有用。例如，我们可以将一个导航栏中的项目设置为flex: 1，这样它们就会自动平分导航栏的宽度，无论导航栏的宽度是多少，都能够保持平均分配。

假设我们有一个导航栏，其中包含了若干个链接。我们希望这些链接能够水平排列，并且在导航栏宽度发生变化时能够自动调整大小，保持平均分配。

HTML结构可能如下所示：

<nav class="navbar">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

对应的CSS样式如下：

.navbar {
  display: flex;
}

.navbar a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}

在这个示例中，我们通过将链接的flex属性设置为1，实现了它们的平均分配。无论导航栏的宽度是多少，链接都会自动调整大小，以适应父容器的空间。

BFC

简介

BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

怎样触发BFC

  1. 根元素（html）,或包含body的元素
  2. 设置浮动（float），且值不为none（为 left、right），
  3. 设置定位（position）, 不为static或relative（为 absolute 、 fixed）
  4. 设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
  5. 设置 overflow，且值不为visible (为 auto、scroll、hidden)

满足以上条件之一的即可形成BFC区域

BFC解决的问题

解决外边距的塌陷问题

image.png

让一个div成为BFC区域，使box1和box2两个独立容器互相不影响

通过给一个div添加 display:inline-block 或者 让一个div被BFC容器包裹

image.png

解决父元素高度塌陷问题

image.png

解决这个问题，将父元素设置为BFC区域即可

image.png

解决浮动重叠问题

image.png

通过给.left 设置浮动属性 float:left 脱离了文档流，导致与.right重叠 想要解决浮动重叠，实现自适应两栏效果，使 .right 成为 BFC区域即可

image.png

PS： 利用BFC解决父子级外边距合并的方法很多，相对应的也会带来一些影响。 例如：

  • inline-block会导致改变元素形式，可能会有收缩，缝隙等情况。
  • 设置float，会让元素产生浮动
  • 绝对定位会导致脱离文档流（注意只有absolute，和fixed有效，relative不会产生效果）

......

相对影响较小的方法是overflow:hidden,和overflow:auto，但是在对应的场景下还会产生影响，例如需要下拉菜单时，就不应该设置overflow:hidden

针对不同的应用场景需要具体问题具体分析，选择最适合的方法解决

平时经常遇到的 高度塌陷 外边距高度不够 浮动重叠 这些问题 需要 overflow:hidden等方法 其实就是形成了一个BFC，从而解决了棘手的问题

深度选择器

简介

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用深度选择器。

写法

<!-- 写法1 使用::v-deep -->
<style lang="scss" scoped>
  ::v-deep .ant-card-head-title{
    background: yellowgreen;
  }
</style>
<!-- 写法2 使用>>> 操作符-->
<style scoped>
>>>.ant-card-head-title{
  background: yellowgreen;
}
</style>
<!-- 写法3 使用/deep/ -->
<style scoped>
 /deep/.ant-card-head-title{
  background: yellowgreen;
}
</style>
<!-- 写法4 使用:deep(<inner-selector>) -->
<style lang="scss" scoped>
  :deep(.ant-card-head-title){
    background: yellowgreen;
  }
</style>
复制代码

写法1 和写法4，都支持sass预处理器。但是在新的vue3.0 单文件规范中，如果你还是使用写法1，会碰到如下警告:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

写法1在vue3.0中已经被弃用了，以后小伙伴们在开发vue3.0项目的时候，还是使用写法4吧～，有一说一，写法4在语义上也更有助于理解。

关于写法1和写法3，主要是不支持sass预处理器的解析，且>>>操作符存在浏览器兼容性问题，所以朋友们还是谨慎使用吧～

PS：在之前的文章中，见文章 juejin.cn/post/712265… 记录了一次在实际项目中使用深度选择器的问题

大屏的自适应

详细见juejin.cn/post/716381…

垂直居中

<div class="parent">
  <span class="child"></div>
</div>

1、flex 布局水平垂直居中

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2、transform + position 水平垂直居中

  .parent {
    position: relative;
  }
  .child {
    position: absolute;left: 50%;top: 50%;
    transform: translate(-50%, -50%);
  }

SCSS和LESS

相同点

  • LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
SCSS 支持使用继承 —— 避免冗杂的代码

image.png

SCSS 支持使用变量 —— 避免冗杂的代码

我们其实可以在我们的样式表中重用一堆的颜色 color 或其他元素定义（例如字体 font）。为了做到在统一的一个地方声明这些可重用的东西，SCSS 为我们提供了变量功能，让我们能够用一个变量名表示某个颜色，并在项目的其它地方使用该变量名，而不是重写一遍颜色值。

例如下面这个例子：

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;

body {
    color: $black;
    font-family: $primary-font;
    padding: #{$unit * 2};
}

CSS 也支持变量和自定义属性，以下就是 CSS 中的自定义属性：

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;

body {
    width: var(--width);
    color: var(--black);
    font-family: var(--primaryFont);
}

但是在运行时 CSS 自定义属性比 SCSS 变量更耗时。

这是因为浏览器会在运行时去处理这些属性。而 SCSS 则相反，它在预处理阶段会被转化为 CSS，并去处理变量。因此，SCSS 中变量的使用和代码的重用相比 CSS 而言有着更好的性能。

  • 都可以通过自带的插件，转成相对应的css文件。

  • 都可以参数混入，可以传递参数的class，就像函数一样

  • 嵌套的规则相同，都是class嵌套class

不同点

1、实现方式不同

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

2、编写变量的方式不同

Less用@，Sass用$

3、功能上的不同

SCSS可以使用if{}else，for循环等等，LESS不支持 示范：

 ​
 /* Sample Sass “if” statement */
  
 @if lightness($color) > 30% {
  
 } @else {
  
 }
  
 /* Sample Sass “for” loop */
  
 @for $i from 1 to 10 {
   .border-#{$i} {
     border: #{$i}px solid blue;
   }
 ​

SCSS和LESS都是一种基于css之上的高级语言，两者之间各有优点，SCSS在功能上面比LESS更强大，LESS比较的清晰明了，容易上手，主要是看大家的工作中，更倾向于使用那个进行开发，两者都能够大大提高书写代码的效率

PS :root的作用

image.png

好处：我直接在css里面把颜色样式调整好不行吗？当然是可以的，但是我们如果涉及到皮肤切换，我们用这两个属性，一套代码就可以搞定， 一键换肤详见： blog.csdn.net/dcl199728/a…

SCSS 支持使用变量 —— 避免冗杂的代码

我们其实可以在我们的样式表中重用一堆的颜色 color 或其他元素定义（例如字体 font）。为了做到在统一的一个地方声明这些可重用的东西，SCSS 为我们提供了变量功能，让我们能够用一个变量名表示某个颜色，并在项目的其它地方使用该变量名，而不是重写一遍颜色值。

例如下面这个例子：

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;

body {
    color: $black;
    font-family: $primary-font;
    padding: #{$unit * 2};
}
复制代码

CSS 也支持变量和自定义属性，以下就是 CSS 中的自定义属性：

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;

body {
    width: var(--width);
    color: var(--black);
    font-family: var(--primaryFont);
}
复制代码

但是在运行时 CSS 自定义属性比 SCSS 变量更耗时。

这是因为浏览器会在运行时去处理这些属性。而 SCSS 则相反，它在预处理阶段会被转化为 CSS，并去处理变量。因此，SCSS 中变量的使用和代码的重用相比 CSS 而言有着更好的性能。

avatar
文章
阅读
粉丝