CSS on Last Stand

盒子模型

Mon, 30 Sep 2024 00:00:00 +0800

前端盒子模型是网页布局的基础概念，对于前端开发者来说，理解盒子模型是至关重要的。

1. 盒子模型的组成部分

内容（Content）:
盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。
内边距（Padding）:
内容与边框之间的空间。它用于增加内容与边框之间的距离，可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。
边框（Border）:
环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 border、border-width、border-style 和 border-color。
外边距（Margin）:
盒子外部的空间。用于控制元素与元素之间的间距。可以通过 margin、margin-top、margin-right、margin-bottom 和 margin-left 属性进行设置。

2. 标准盒子模型与替代盒子模型

标准盒子模型（content-box）:
默认的盒子模型。width 和 height 只包含内容区，不包括内边距和边框。因此，元素的实际占用空间是 width + padding + border。
替代盒子模型（border-box）:
通过设置 box-sizing: border-box，使得 width 和 height 包括内边距和边框，这样内容区的大小会自动调整以适应总高度和宽度。这样做通常可以避免许多布局问题。

示例

.box {
 box-sizing: content-box; /* 默认值 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在标准模型下：

总宽度 = 200px + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px

.box {
 box-sizing: border-box; /* 替代模型 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在替代模型下：

伪类和伪元素

Tue, 08 Oct 2024 00:00:00 +0800

什么是伪类和伪元素？

伪类：以冒号(:)开头，用于选择处于特定状态的元素。
伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。

a:visited:hover {
 color: red;
}

效果如下：

可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。

注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。

我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。

div::first-letter {
 color: red;
}

效果如下：

与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。

注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。

从上面的案例当中，我们可以得出两个结论：

伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时）
伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建）

也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。

伪类有哪些？

按照功能，可划分为以下几类：

动态伪类：:visited、:focus、:hover等
状态伪类：:disabled、:empty、:required 等
结构伪类：:first-child、:nth-of-type等
其他伪类：:target、:lang、:not()等

下面的表格详细记录了各种伪类及其描述：

伪类	描述	兼容性
`:active`	元素处于活动状态时	✅
`:focus`	元素已获取焦点时	✅
`:hover`	元素处于悬浮状态时	✅
`:link`	链接未访问时	✅
`:visited`	链接已访问时	✅
`:first-child`	元素是首个子元素时	✅
`:last-child`	元素是最后一个子元素时	✅
`:nth-child()`	元素是第 n 个子元素时	✅
`:nth-last-child()`	元素是倒数第 n 个子元素时	✅
`:only-child`	元素是唯一子元素时	✅
`:first-of-type`	元素是首个特定类型的子元素时	✅
`:last-of-type`	元素是最后一个特定类型的子元素时	✅
`:nth-of-type()`	元素是第 n 个特定类型的子元素时	✅
`:nth-last-of-type()`	元素是倒数第 n 个特定类型的子元素时	✅
`:only-of-type`	元素是唯一的特定类型的子元素时	✅
`:not`	不满足指定条件时	✅
`:target`	元素 id 匹配到哈希值时	✅
`:root`	元素是文档树的根元素时	✅
`:lang()`	匹配到指定语言时	✅
`:empty`	元素处于没有子元素状态时	✅
`:invalid` 和 `:valid`	表单项是否有效	✅
`:required` 和 `:optional`	表单项是否必填	✅
`:in-range`和 `:out-of-range`	表单项是否超出范围	✅
`:read-only`和 `:read-write`	表单项是否只读	✅
`:enabled`和 `:disabled`	表单项是否禁用	✅
`:fullscreen`	当前处于全屏显示模式时	⚠️
`:blank`	输入框处于输入为空状态时	❌
`:dir()`	匹配到特定文字书写方向时	❌

上表中的兼容性表示：

选择器

Tue, 08 Oct 2024 00:00:00 +0800

CSS选取器分类

通配符选择器

*{
 margin:0;
 padding:0;
}

元素（标签）选择器

p{
 color:red;
}

类选择器

.warning{
 color:red;
}

ID选择器

#warning{
 color:red;
}

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

属性选取器

示例html

<ul>
 <li foo>1</li>
 <li foo="abc">2</li>
 <li foo="abc efj">3</li>
 <li foo="abcefj">4</li>
 <li foo="efjabc">5</li>
 <li foo="ab">6</li>
</ul>

[attribute]

[foo]{
 background-color:red;
}

选择所有带 foo 属性的元素

[attribute=value]

选择 attribute=value 的所有元素。

[foo=abc]{
 background-color:red;
}

[attribute~=value]

选择 attribute 属性包含单词 value 的所有元素。

[foo~=abc]{
 background-color:red;
}

[attribute^=value]

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始

优先级

Thu, 10 Oct 2024 00:00:00 +0800

在前端面试中，经常会遇到CSS选择器的问题三连：

说一下CSS的选择器有哪些
优先级是怎样的
权重计算方式

今天就来给大家介绍选择器的优先级和权重计算方式。

优先级是什么？有什么用？

先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？

其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。

总结一下：

权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。
当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。
如果两个选择器同时作用到一个元素上，权重高者生效。

权重的计算规则

接着介绍权重的计算规则：

第一优先级：!important会覆盖页面内任何位置的元素样式
内联样式，如style="color: green"，权值为1000
ID选择器，如#app，权值为0100
类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
标签、伪元素选择器，如div::first-line，权值为0001
通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
继承的样式没有权值

权值计算公式：

权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数

比如：

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*=“en-US”] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

权重的比较规则

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。

font

Thu, 10 Oct 2024 00:00:00 +0800

什么是 font 属性？

在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。

font 属性的语法

font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

各个属性的详细说明

font-style：设置字体的样式。

取值：
- normal：正常字体（默认值）。
- italic：斜体字。
- oblique：倾斜字体。

font-variant：设置字体的变体。

取值：
- normal：正常（默认值）。
- small-caps：小型大写字母。

font-weight：设置字体的粗细。

取值：
- normal：正常粗细（默认值）。
- bold：加粗。
- bolder：比父元素更粗。
- lighter：比父元素更细。
- 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。

font-size：设置字体的大小。

取值：
- 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。

line-height：设置行高。

取值：
- 可以使用数值、单位（如 px、 em）或百分比。

font-family：设置字体系列。

取值：
- 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。
- 例如： "Arial", "Helvetica", sans-serif。

使用 font 属性的注意事项

font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。
如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。

实例：使用 font 属性设置文本样式

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Font 属性示例</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1 class="title">欢迎来到我的网站</h1>
 <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p>
</body>
</html>

CSS 代码（styles.css）

body {
 font-family: Arial, sans-serif; /* 设置全局字体 */
}

.title {
 font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */
 color: #333; /* 字体颜色 */
}

.description {
 font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */
 color: #666; /* 字体颜色 */
}

解释

HTML结构：我们创建了一个包含标题和描述的简单网页。
CSS样式：

在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。
在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。

结果

通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。

background

Thu, 10 Oct 2024 00:00:00 +0800

引言

在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。

一：简单使用

背景颜色和背景图片是可以共同出现的

 div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 }

页面展示

一：background-repeat

background-repeat决定背景图片的平铺方式

属性值

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）

1. repeat

默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat;
 }

2.repeat-x

如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-x;
 }

3.repeat-y

如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-y;
 }

二：background-position

background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

1.px设置

px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 background-position: 100px 100px;
 }

position

Tue, 08 Oct 2024 00:00:00 +0800

CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。

静态定位 position: static

此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。

在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。

<div class="parent">
 <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
 .parent {
 width: 480px;
 height: 320px;
 background-color: #008800;
 }
 .child {
 width: 240px;
 height: 160px;
 background-color: #ff0000;
 }
 .sibling {
 width: 240px;
 height: 160px;
 background-color: #0000ff;
 }
</style>

效果如图：

为什么使用它呢？将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位。

相对定位 position: relative

此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。

position: sticky

Sat, 09 Nov 2024 00:00:00 +0800

如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是 static、relative、absolute、fixed，实际上MDN上还有一个 sticky。

今天我们就来给大家介绍这个容易被忽视的position属性值 sticky。

先来看看MDN上对于 sticky 的介绍：

粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

粘性定位可以被认为是相对定位和固定定位的混合。

什么是结合两种定位功能于一体呢？

元素在跨越特定阈值前为相对定位，之后为固定定位。

也就是元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top、right、bottom 或 left 之一，换言之，指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

示例

上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做：

按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。

而使用 position:sticky ，则可以非常方便的实现：

<div class="container">
 <div class="sticky-box">内容1</div>
 <div class="sticky-box">内容2</div>
 <div class="sticky-box">内容3</div>
 <div class="sticky-box">内容4</div>
</div>

.container {
 background: #eee;
 width: 600px;
 height: 1000px;
 margin: 0 auto;
}

.sticky-box {
 position: sticky;
 height: 60px;
 margin-bottom: 30px;
 background: #ff7300;
 top: 0px;
}

div {
 font-size: 30px;
 text-align: center;
 color: #fff;
 line-height: 60px;
}

看看上面的 CSS 代码，只是给每个内容区块加上

布局技巧

Thu, 10 Oct 2024 00:00:00 +0800

1、普通流（常规流）

文档流（流式布局）分为普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；

普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响；

2、position

属性有：

static：默认值，元素依然按照普通流的定位规则定位；
relative
absolute
sticky
fixed

使用 position 会脱离常规流，成为定位流，并有其自己的定位规则；

3、float

属性有：

left
right
none
inherit

使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则；

4、table

使用 HTML 标签来布局；

<table>
    <tr>
   <th></th>
   <th></th>
    </tr>
    <tr>
   <td></td>
        <td></td>
    </tr>
</table>

5、flex

2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex；

重要的概念：flex 容器，flex 项目，主轴，交叉轴；

设置某个元素的属性 display: flex;，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目；

flex 容器的属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex 项目的属性

flex （flex-grow、flex-shrink、flex-basis）
order
align-self

6、grid

二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的；

z-index

Sat, 09 Nov 2024 00:00:00 +0800

大家可能觉得，z-index 是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。

在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z-index，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。

三个自测问题

问题一：为什么z-index 数值更大，但 Content 没有在 Box 2 之上？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 z-index: 2;
</div>

<div id="box2">
 Box 2 <br/>
 z-index: 1;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -50px;
}

#content {
 background-color: gold;
 width: 300px;
 height: 200px;
 z-index: 2;
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 z-index: 1;
}

问题二：明明 z-index 数值更小，为什么 Content 这次反而在Box 2 之上了？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 transform: rotate(90deg); <br/>
 z-index: 1;
</div>

<div id="box2">
 <br/>
 Box 2 <br/>
 z-index: 2;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -10px;
}

#content {
 background-color: gold;
 width: 250px;
 height: 200px;
 z-index: 1;
 transform: rotate(90deg);
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -10px;
 z-index: 2;
}

Flexbox

Tue, 08 Oct 2024 00:00:00 +0800

一、Flexbox布局的概念

Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。

容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：

这里面涉及到了几个概念，下面来看一下：

main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
main size: 单个项目占据主轴的长度大小。
cross axis: 交叉轴，与主轴垂直。
cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
cross size: 子元素在交叉轴方向上的大小。

二、父元素属性

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局：

<div class="container"></div>

.container {
 display: flex | inline-flex;
}

这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。

父元素（容器）可以设置以下六个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction

flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：

.container {
 flex-direction: row | row-reverse | column | column-reverse;
}

（1）flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿

（2）flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿

（3）flex-direction: column：沿垂直主轴从上到下排列，起点在上沿

Grid布局

Tue, 08 Oct 2024 00:00:00 +0800

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址

Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

flex布局示例:

Grid 布局示例：

Grid 的一些基础概念

我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址

<div class="wrapper">
 <div class="one item">One</div>
 <div class="two item">Two</div>
 <div class="three item">Three</div>
 <div class="four item">Four</div>
 <div class="five item">Five</div>
 <div class="six item">Six</div>
</div>

.wrapper {
 margin: 60px;
 /* 声明一个容器 */
 display: grid;
 /* 声明列的宽度 */
 grid-template-columns: repeat(3, 200px);
 /* 声明行间距和列间距 */
 grid-gap: 20px;
 /* 声明行的高度 */
 grid-template-rows: 100px 200px;
}
.one {
 background: #19CAAD;
}
.two {
 background: #8CC7B5;
}
.three {
 background: #D1BA74;
}
.four {
 background: #BEE7E9;
}
.five {
 background: #E6CEAC;
}
.six {
 background: #ECAD9E;
}
.item {
 text-align: center;
 font-size: 200%;
 color: #fff;
}

浮动、清除浮动和BFC

Thu, 10 Oct 2024 00:00:00 +0800

浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。

浮动

在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！

使文字环绕

代码示例如下：

html结构：

<div class="box"></div>
<div class="text">一段文字</div>

css样式：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 }

若不加浮动，则页面是这样的效果：

但若是在box加上float: left;(向左浮动)，则能使文字环绕box这个盒子：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 float: left;
 }

让块级元素同行显示

块级元素本身是占据一整行的，但浮动能让多个块级元素处于同一行，示例如下：

若不加浮动，则多个块级元素各自占据一行：

html结构：

 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>

css样式：

 *{
 margin: 0;
 padding: 0;
 }
 ul li{
 list-style:none;
 width: 200px;
 height: 100px;
 font-size: 16px;
 }
 li:nth-child(1){/*子容器选择器 */
 background-color: rgb(227, 149, 149);
 }
 li:nth-child(2){
 background-color: rgb(205, 139, 197);
 }
 li:nth-child(3){
 background-color: rgb(145, 212, 227);
 }

页面如图：

单位

Thu, 10 Oct 2024 00:00:00 +0800

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。

1. 相对单位

相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；
视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

下面就来看看这些常见的CSS单位。

（1）em 和 rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。

em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。

当然，上面的这个说法是不严谨的。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .parent {
 width: 300px;
 height: 300px;
 font-size: 20px;
 }
 .child {
 border: 1em solid ;
 }
 </style>
</head>
<body>
 <div class="parent">
 <div class="child">
 子元素
 </div>
 </div>
</body>
</html>

这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：

那如果我们给子元素的字体设置为30px：

.child {
 font-size: 30px;
 border: 1em solid ;
}

这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：

所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。

rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：

.child {
 font-size: 30px;
 border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：

BFC

Sat, 09 Nov 2024 00:00:00 +0800

BFC 是前端面试中经常会被问到的一个知识点，今天就来带大家深入了解下什么是 BFC 以及它的作用。

文档流

在介绍BFC之前，需要先给大家介绍一下文档流。

我们常说的文档流其实分为定位流、浮动流、普通流三种。

绝对定位(Absolute positioning)

如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；

对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

普通流 (normal flow)

普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

BFC 概念

先看下MDN上关于BFC的定义：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

除了 BFC，还有：

IFC（行级格式化上下文）- inline 内联
GFC（网格布局格式化上下文）- display: grid
FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中。

动画

Tue, 08 Oct 2024 00:00:00 +0800

前言

CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。

属性	含义
transition 过渡	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform 变形	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
animation 动画	css动画属性
translate 移动	只是transform的一个属性值，即移动。

transition 过渡

字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

一条transition规则，是可以定义多个属性的变化的，中间用逗号隔开，如果是全部属性变化则用“all”即可。

语法：transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

我发现简写时候的顺序并不一定就是写死的，经过测试在chrome上只要delay在duration后面即可。当然按照标准写是最好的。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
 <title>transition</title>
 <style>
 #box {
 height: 100px;
 width: 100px;
 background: green;
 transition: transform 1s ease-in 1s;
 }

 #box:hover {
 transform: rotate(180deg) scale(.5, .5);
 }
 </style>
</head>
<body>
 <div id="box"></div>
</body>
</html>

效果

transition

Tue, 08 Oct 2024 00:00:00 +0800

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。

比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。

通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。

CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

开发者可以定义哪一属性需以何种方式用于动画，由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义，所以这些属性无动画性。

备注： auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，实现了这个需求；然而另外一些用户代理，比如基于 WebKit 的，没有这么严格限制。在 auto 上使用动画，取决于浏览器及其版本，可能会导致非预期结果，应当避免使用。

属性

以下 transition 属性，若有多个属性值，则以,（逗号）衔接。

transition-property

指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

取值如下：

none：没有过渡动画。
all（初始值）：所有可被动画的属性都表现出过渡动画。
<custom-ident>：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个不能为非破折号字符或数字。同时，不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。

transition-duration

表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。

该属性值以秒（s）或毫秒（ms）为单位指定过渡动画所需的时间。默认值为 0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。

如果某个属性的值列表小于 transition-property 的属性值数量，那么时长列表会重复，重复规则是按照现有值进行重复。例如：

如3s，则重复多个3s

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s;
}

将视为：

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s, 3s, 3s, 3s;
}

如果是3s，5s，则会重复多个3s，5s。

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s, 5s;
}

将视为：

响应式设计

Tue, 08 Oct 2024 00:00:00 +0800

引言

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

响应式布局的实现方案

1. 媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

如何选择屏幕大小分割点

如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样

如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：

当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px

而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？

上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

移动优先 OR PC优先

不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。

移动优先:

/* iphone6 7 8 */
body {
 background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
 body {
 background-color: red;
 }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
 body {
 background-color: #0FF000;
 }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
 body {
 background-color: blue;
 }
}
/* ipad */
@media screen and (min-width: 768px) {
 body {
 background-color: green;
 }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
 body {
 background-color: #FF00FF;
 }
}
/* pc */
@media screen and (min-width: 1100px) {
 body {
 background-color: black;
 }
}

PC优先：

变量

Thu, 10 Oct 2024 00:00:00 +0800

一、变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

body {
 --foo: #7F583F;
 --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**“CSS 自定义属性”**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

各种值都可以放入 CSS 变量。

:root{
 --main-color: #4d4e53;
 --main-bg: rgb(255, 255, 255);
 --logo-border-color: rebeccapurple;

 --header-height: 68px;
 --content-padding: 10px 20px;

 --base-line-height: 1.428571429;
 --transition-duration: .35s;
 --external-link: "external link";
 --margin-top: calc(2vh + 20px);
}

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

二、var() 函数

var()函数用于读取变量。

a {
 color: var(--foo);
 text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

display

Thu, 10 Oct 2024 00:00:00 +0800

一、display属性介绍

display 属性规定元素应该生成的框的类型。

以下是一些关于display比较常用的属性值：

值	描述
none	元素不会显示
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
line-block	行内块元素。（CSS2.1 新增的值）[IE6/7不支持]
list-item	此元素会作为列表显示。
inline-table	此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table	此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
table-row	此元素会作为一个表格行显示（类似 tr）。
table-cell	此元素会作为一个表格单元格显示（类似 td 和 th）.
inherit	规定应该从父元素继承 display 属性的值。

其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。

二、display:none

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。

三、display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
block元素可以设置margin和padding属性；
block元素可以设置width、height属性。
块级元素即使设置了宽度，仍然是独占一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行。

块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，如下图所示：

块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行，如下图所示：

四、display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
inline元素设置width、height属性无效；
inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。

如下图所示：

五、display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。就是集合了block和inline的全部优点。width、height、margin、padding设置都会生效。

如下图所示：

原文：https://juejin.cn/post/6844903781566513160

常见考点

1. 基本概念

请简述 CSS 中的 display 属性及其作用。
display 属性的常见值有哪些？请列举并解释其含义。
- 例如：block、inline、inline-block、flex、grid、none 等。

2. `display: block`

什么是 display: block？它会给元素带来哪些表现？
一个块级元素通常具有哪些特点？例如：它的宽度会如何变化？它是否会换行？

3. `display: inline`

什么是 display: inline？它与 display: block 有什么不同？
内联元素如何处理宽度和高度？它们是否会占据整个可用宽度？
如何让一个内联元素变得像块级元素一样换行？

4. `display: inline-block`

什么是 display: inline-block？它结合了 inline 和 block 的哪些特点？
使用 inline-block 时，元素的宽高如何影响布局？
inline-block 元素如何与其他元素对齐？

5. `display: none`

请解释 display: none 的作用与 visibility: hidden 的区别。
使用 display: none 会有什么样的表现？例如，它对页面布局有何影响？
当你将一个元素的 display 设置为 none 时，它会消失，但仍然存在于 DOM 中。如何通过 JavaScript 使其重新显示？

6. `display: flex`

display: flex 是什么？它通常用来实现什么样的布局效果？
在使用 flex 布局时，如何控制子元素的排列方向、对齐方式等？
justify-content、align-items、flex-direction 等 Flexbox 属性的作用是什么？

7. `display: grid`

什么是 display: grid 布局？它与 flex 布局有何区别？
在 grid 布局中，如何设置行和列的大小？如何控制子元素的位置？
请举例说明 grid-template-columns、grid-template-rows、grid-gap 等属性的使用方法。

8. `display: table`

什么是 display: table，它如何模仿传统的 HTML <table> 元素？
使用 display: table 时，如何控制表格的行和列布局？
display: table-row、display: table-cell 和 display: table-caption 的作用是什么？

9. 布局模型对比：`block` vs `inline` vs `flex` vs `grid`

你如何选择使用 block、inline、flex 或 grid 布局？
在实际项目中，什么时候使用 flex 布局，什么时候使用 grid 布局？
请比较 flex 和 grid 布局的优缺点及应用场景。

10. `display` 与其他布局属性

在使用 display: flex 或 display: grid 布局时，如何与其他布局属性（如 position、float 等）配合使用？
如何解决使用 display: flex 或 display: grid 布局时遇到的常见布局问题，例如元素溢出、对齐等？

11. `display: none` 与性能

display: none 对页面性能有何影响？如何通过 JavaScript 动态控制显示/隐藏元素以提高性能？

12. `display: contents`

什么是 display: contents？它是如何工作的？它与其他 display 值有什么区别？
请举例说明 display: contents 的应用场景及可能的问题。

13. `display` 的继承性

display 属性是否继承？如果没有，如何通过样式继承的方式控制多个元素的 display 属性？
你如何在多个嵌套元素中保持一致的布局设置？

14. `display` 的可见性与布局

display 属性会影响元素的布局、渲染和可见性。请简要解释 display: none 和 visibility: hidden 的区别，它们对页面的影响不同吗？

15. 实际应用

请描述一个你在实际开发中使用 display 属性解决布局问题的案例。
如果需要在一个响应式设计中调整元素的布局，如何根据屏幕尺寸调整 display 属性？

预处理器

Thu, 10 Oct 2024 00:00:00 +0800

前言

花样不断的前端，貌似多技术方案并行，已经成了家常便饭。

从大的框架开始，已经分裂react与vue派系。两者思维上虽然有相互不断的借鉴，但在大的方向思维上却是截然不同。而在react与vue的竞争以及相互较量的过程中，往往把其他的对手都干倒了，现在市场angular，jQuery等都逐步没落。

预编译css也同样，曾经也有多个派系。而后在sass与less的不断竞争中，stylus等其他的编译器也逐步退出市场。本文的重点，对比预编译css，scss与less对比。

基本介绍

先一起看看官方是如何定义或者介绍他们。

Sass

官方定义：

Sass是一种基于Ruby的CSS预处理器，它可以扩展CSS语言，并添加许多其他功能，如变量、嵌套规则、Mixin、函数等。Sass文件以“.scss”扩展名保存，与标准CSS文件兼容，并且可以使用普通CSS代码和语法。Sass也有一个较早的语法格式，以“.sass”扩展名保存，使用缩进的语法来代替括号和分号，但它现在已经不那么流行了。

个人理解：

sass是第一个流行的CSS预处理器，在2006年产生，这也为后续他用户量第一埋下伏笔。

Scss

官方定义：

Scss也是一种基于Ruby的CSS预处理器，它与Sass有很多相似之处，但是它的语法更接近标准CSS，使用花括号和分号。它是一种非常流行的CSS预处理器，与Sass相比，它更容易学习和使用，并且与现有的CSS代码更兼容。

个人理解：

Scss是Sass的一种语法格式，由2007推出。这还要从sass的规范语法说起，最典型的就是Sass使用缩进来表示代码块。这使部分使用者比较别扭。而产生了Scss，基于花括号和分号的CSS语法格式，使得它更易于阅读和理解。随着时间的推移，Scss逐渐取代了Sass作为Sass的主要语法格式。

Less

官方定义：

Less是一种基于JavaScript的CSS预处理器，它与Sass和Scss有很多相似之处，但它使用类似CSS的语法，并且更容易学习和使用。Less支持变量、Mixin、嵌套规则等功能，并且可以在客户端和服务器端使用。

个人理解：

Less由2009推出，也是提供了一套完整的生态链。它的语法跟sass不同。Less的学习成本更低，更容易理解和编写。此外，Less的编译速度比Sass更快。

Stylus

官方定义：

Stylus是一种基于JavaScript的CSS预处理器，它与Less、Sass和Scss有很多相似之处，但它的语法非常灵活，可以自由选择使用缩进或花括号来表示嵌套和块。Stylus还支持变量、Mixin、函数等功能，并且具有非常强大的插件系统，可以轻松地扩展其功能。

个人理解：

Stylus也是曾经一个比较完善的预编译语言。但市场份额却原来越少。个人的观点，一是的学习成本高一些，有入门的门槛。而是生态链的问题，sass跟less的有较完善的生态链，而Stylus更像一个独立的东西。

PostCSS

官方定义：

PostCSS不是一种独立的CSS预处理器，而是一个CSS处理工具集合，可以通过各种插件扩展其功能。PostCSS可以用于转换CSS语法、提供自动前缀、压缩CSS代码、处理嵌套规则、优化图片等。它不像其他预处理器那样提供自己的语言，而是基于现有的CSS语法。使用PostCSS可以通过插件来实现更多的自定义和灵活性，使其成为一个强大的CSS处理工具。

个人理解：

跟上述的其他的处理器不同，PostCSS不应该算是一个预处理器，但却是我们做适配，压缩等处理时的一个选择。

数据分析

市场占有率分析

我们借助npm官网统计工具对比，查看less与scss的数据量对比：

链接： npm-stat.com/charts.html… npm-stat.com/charts.html…

如上图，左侧为less的数据，右侧为scss的数据。

我们可以通过统计清晰的看到。单单一个sass的下载量，基本达到less的两倍以上。此处还不包含sass阵营的其他工具，包括node-scss，dart-scss的下载量。

可以得出结论：sass的使用量约为less的几倍。（但此处有个值得一提的地方：统计为全球的用户量的统计，并非针对国内）

组件库选择分析

从上述的数据中，我们了解到sass的使用量较多，但是国内出名的组件库，却是less居多。毕竟组件库，也代表我们的使用习惯之一。我们一起看看组件库的选择。

ant design

选择了Less，地址：www.antdv.com/docs/vue/cu…

element

选择了scss，地址：element.eleme.io/#/zh-CN/com…

varlet

选择了Less，地址：varlet.gitee.io/varlet-ui/#…

vant

选择了Less，地址：vant-contrib.gitee.io/vant/v3/#/z…

结论：关于组件库的选择，Less还是占大多数，当然Scss也是部分组件库的选择。

个人分析

相同点

都属于css语法编译的工具。
工具提供的方法也很多雷同。如都支持嵌套，都支持混合器（Mixin），都支持扩展（Extend），都支持颜色函数，都支持变量等等。
生态链都一致丰富，常用构建工具都基本支持，如webpack，vite, rollup等。
社区支持都强，提供了大量的插件、工具和资源，可以帮助开发者更好地使用Sass。
目的性也一致，都提高了CSS编写的效率和可维护性而产生。

不同点

部分语法不同，如Sass 和 SCSS 中的变量使用 $ 符号进行定义和引用，而不是 Less 中使用的 @ 符号
Sass 和 Scss 还提供了一些 Less 没有的特性，例如控制流语句和继承等。
Sass 和 Scss 是基于Ruby或者Dart，Node的预处理器，他需要借助机器安装这些环境来支持。而Less, 是基于JavaScript的CSS预处理器，引入一段JS即可编译，有浏览器还是服务端，他都能编译。
虽然都有强大的社区，生态链。但总体还是Scss更丰富一些。

特性分析

Node-Sass 在国内有一定的兼容性问题，但是基于Dart 语言编写的 Dart Sass以及解决了这个问题。还在使用Node-Sass的建议切换Dart Sass。
Less 的语法相对于 Sass 更加简洁，易于学习和理解。这使得 Less 在国内开发者中更受欢迎，尤其是对于那些不太熟悉预处理器语言的开发者来说。
Sass的阵营更丰富，使用量更高一些，市场份额也更加稳定。除了发家早，这也得益于生态圈，例如 Bootstrap、Foundation、Bulma、Vue.js 等，都在曾经的版本自带了Sass。
国内组件库，还是Less居多，很多"高级前端"，都觉得less 一直都比 sass 要稳定。至少不会出现Node版本，Python版本不一致等问题。

结语

所以Sass与Less谁更强？估计短期还是分不出成败。

架构

Thu, 10 Oct 2024 00:00:00 +0800

前言

在项目中经常存在如下问题：

1.模块拆分不合理
2.变量和函数命名不知所云
3.缺少注释或者是写了一堆描述不清的内容
4.重复的代码遍布各个角落等

因为这些不良的编程习惯，导致了项目越来越难以维护，程序性能越来越低，大大降低了日常的工作效率以及提高了公司的开发成本。

下面就以CSS在Vue3项目中的架构为切入点，通过减少CSS代码的冗余度和增强CSS代码的维护性、扩展性来提高我们的编程能力和项目架构能力。

CSS的设计模式

在学习CSS架构之前，我们先简单看一下常见的5种CSS设计模式，这些设计模式都为我们的CSS架构提供了一定的开发思路。

1.OOCSS模式

OOCSS(Object-Oriented CSS)字面意思是面向对象的CSS，在开发中它有如下的规范约定

减少对 HTML 结构的依赖

# bad
# 1.匹配效率低，影响css性能
# 2.和html耦合度高，维护性和扩展性低
.container-list ul li a {}

<div class="container-list">
 <ul>
 <li>
 <a>...</a>
 </li>
 </ul>
</div>

# good
.container-list .list-item {}

<div class="container-list">
 <ul>
 <li>
 <a class="list-item">...</a>
 </li>
 </ul>
</div>

增加样式的复用性

.label {
 # 公共代码
}
.label-danger {
 # 特定代码
}
.label-info {
 # 特定代码
}
<div>
 <p class="label label-danger"></p>
 <p class="label label-info"></p>
</div>

2.BEM模式

BEM 是进阶版的OOCSS，是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 block, element, modifier，分为为块层、元素层、修饰符层。

视觉格式化模型

Thu, 10 Oct 2024 00:00:00 +0800

大部分 Web 开发者都知道 CSS 中有一个盒模型，但很少有人知道在 CSS 的世界中还有另一个模型，他就是 CSS 的视觉格式化模型。

CSS 视觉格式化模型（英文称之Visual Formatting Model）。该模型主要是用来处理在视觉媒体上显示文档时使用的计算规则。仅从这一句话来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是 CSS 中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习 CSS，特别是 Web 布局

什么是视觉格式化模型

在盒模型中我们了解到，在 CSS 的世界中，任何一个元素都是一个盒子，它具有一个专业术语，即盒模型。而视觉格式化模型会根据 CSS 盒模型将文档中的元素转换为一个个盒子。看到这里，很多同学可能更会感到困惑，“任何元素都是一个盒子，视觉格式化模型将元素转换为盒子，那这盒子是不是都是一样的盒子呢”？

首先要声明一点：视觉格式化模型和CSS盒模型不是同一个东西！

简单点说呢。Web 页面（文档树）是由很一个个盒子组成（因为任何元素都可以被视为是一个盒子），而视觉格式化模型却是一套规则，用来计算元素转换为盒子的规则。而页面的布局都由这些盒子的所处的各处位置组合而成。那么理解了元素怎么转成盒子的规则，就理解了 Web 页面是怎么布局。而每个盒子的布局主要由以下几个因素决定：

盒子的尺寸：精确指定、由约束条件指定或没有指定
盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）和块盒子（block）
定位方案：普通流定位、浮动定位或绝对定位
文档树中的其它元素：即当前盒子的子元素或兄弟元素
视窗尺寸与位置
所包含的图片的尺寸
其他的某些外部因素

先来看一张图，这个图是由下面的 HTML 结构构造出来的：

<body>
 <header>
 <nav></nav>
 </header>
 <article>
 <p></p>
 <figure></figure>
 <p></p>
 </article>
 <aside></aside>
 <footer></footer>
</body>

每个元素都是一个盒子，盒子中可以包含另一个或多个盒子。也正如上图所示，CSS 的视觉格式化模型会根据盒子的包含块（Containing Block，即包含其他盒子的块）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不会被包含块限制住，盒子的布局会撑破包含块（即跑出包含块的边界），对于这种现象，在 CSS 中常被称为溢出。

溢出是一个很有意思的东东，在 Web 布局中时常会碰到，但在这一章中不做方面的阐述。

原子化CSS

Sat, 09 Nov 2024 00:00:00 +0800

1. 什么是原子化CSS

1.1 基本概念

原子化CSS(Atomic CSS) 近年来热度逐渐增加，与原子化CSS相关的库在Github上也收获上万的Star。那么什么是原子化CSS呢，引用文章 Let’s Define Exactly What Atomic CSS is 中定义：“原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。”

更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。举个简单的例子：

<!-- 原子化类定义 -->

<style>

 .text-white { color: white; }

 .bg-black { background-color: black; }

 .text-center { text-align: center; }

</style>

<!-- 原子化类使用 -->

<div class="text-white bg-black text-center">hello Atomic CSS</div>

1.2 VS 行内样式

看到以上的示例，你可能很快就想到，直接使用行内样式不是更好吗，还省去了原子类的定义。这个问题可以从样式编写、一致性、功能、和缓存四个方面来回答。

在样式编写层面，CSS预处理和后处理器很大程度上依赖单独的样式表，原子化CSS可以充分利用Sass、Less等CSS预处理器功能进行样式的编写，同时可以借助PostCSS进一步增强CSS的功能。而对于行内样式，虽然在技术上支持使用预处理和后处理器对其进行处理，但很少有成熟的工具对此提供支持和维护。

在一致性层面，原子化CSS框架一般有预定义的设计系统，开发者仅能在设计系统中选择要设置的值。而对于行内样式或者传统CSS类定义来说，可设置的值是没有任何限制的。对于行内样式或者传统的CSS类设置来说，一个标签的字体大小可能是14px或0.875rem，当产品（or 客户）说需要调小一点时，开发者A可能调整为13px，开发者B可能调整为12px。但对于原子化CSS框架来说，调小一点意味着设置的类从text-sm变为text-xs。

以下为部分采用传统CSS类编写的网站样式统计数据（统计来源）：

掘金官网：283种背景颜色 471种字体颜色 264种字体大小

GitLab：1199种背景颜色 1351种字体颜色 450种字体大小

CSDN：585种背景颜色 1190种字体颜色 504种字体大小

在功能方面，原子化CSS本质上还是CSS类，因此支持媒体查询功能，也支持对元素的悬停、聚焦等状态进行处理，而内联样式缺少这部分的能力。

在打包方面，内联样式包含在JS文件中，样式的修改会导致整个bundle的改变，原子化CSS样式定义和JS逻辑分离，修改元素的class属性可能并不影响（在没有新CSS类的情况下）最终打包输出样式文件。

2. 谁在使用原子化CSS

截至目前已经有部分网站借鉴或者使用原子化CSS的思想重构了自己的web网站，比较知名的网站有Facebook、Twitter、Github、swipperjs等。根据网上公开的信息，Facebook在使用原子化CSS思想重构之后，仅登录页面的413KB样式文件，减少为整个站点的74KB。

Facebook

移动端适配

Sat, 09 Nov 2024 00:00:00 +0800

导读

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：

1px问题
UI图完美适配方案
iPhoneX适配方案
横屏适配
高清屏图片模糊问题
…

上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？

本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。

一、英寸

一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。

需要注意，上面的尺寸都是屏幕对角线的长度：

英寸(inch,缩写为in)在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。

英寸和厘米的换算：1英寸 = 2.54 厘米

二、分辨率

2.1 像素

像素即一个小方块，它具有特定的位置和颜色。

图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。

像素可以作为图片或电子屏幕的最小组成单位。

下面我们使用sketch打开一张图片：

将这些图片放大即可看到这些像素点：

通常我们所说的分辨率有两种，屏幕分辨率和图像分辨率。

2.2 屏幕分辨率

屏幕分辨率指一个屏幕具体由多少个像素点组成。

下面是apple的官网上对手机分辨率的描述：

iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。这表示手机分别在垂直和水平上所具有的像素点数。

当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。

2.3 图像分辨率

我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为800 x 400。这表示图片分别在垂直和水平上所具有的像素点数为800和400。

同一尺寸的图片，分辨率越高，图片越清晰。

2.4 PPI

PPI(Pixel Per Inch)：每英寸包括的像素数。

PPI可以用于描述屏幕的清晰度以及一张图片的质量。

使用PPI描述图片时，PPI越高，图片质量越高，使用PPI描述屏幕时，PPI越高，屏幕越清晰。

在上面描述手机分辨率的图片中，我们可以看到：iPhone XS Max 和 iPhone SE的PPI分别为458和326，这足以证明前者的屏幕更清晰。

由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算PPI:

iPhone 6的PPI为

优化性能

Thu, 10 Oct 2024 00:00:00 +0800

前言

随着互联网发展至今，对于网站来说，性能显的越来越重要了，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。所以，我们需要重视与CSS相关的性能优化。

项目开发初期我们可能因为各种原因（很大一部分原因是因为项目工期，产品往往把项目上线时间卡的死死的，根本不听你说的什么性能优化），怎么写的舒服就怎么来，对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化。

为了更多地避免这一情况，首先要重视起性能优化相关的工作，将其贯穿到整个产品设计与开发中。其次，就是了解性能相关的内容，在项目开发过程中，自然而然地进行性能优化。

css渲染规则

想要优化CSS的性能，我们首先需要了解CSS的渲染规则，CSS选择器是从右向左进行匹配的

来看个例子🌰：

.nav h3 a{font-size: 14px;}

渲染过程大概是：首先找到所有的a，沿着a的父元素查找h3，然后再沿着h3，查找.nav。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素html都没有匹配，则不再遍历这条路径，从下一个a开始重复这个查找匹配（只要页面上有多个最右节点为a）。

Tips：为什么CSS选择器是从右向左匹配的？

CSS中更多的选择器是不会匹配的，所以在考虑性能问题时，需要考虑的是如何在选择器不匹配时提升效率。从右向左匹配就是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。这样想来，在匹配时多耗费一些性能也能够想的通了。

内联首屏关键CSS（Critical CSS）

性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而 内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS） 能减少这一时间。

很多人都喜欢通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。

但是我们不应该将所有的CSS都内联在HTML文档中，因为[初始拥塞窗口]存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。

⚠️还有一点需要注意的是内联CSS没有缓存，每次都会随HTML的加载而重新下载，但我们将内联首屏关键CSS控制在 14.6kB以内，它对性能优化还是起到正向作用的。（凡事有利也有弊）

异步加载非首屏CSS

我们需要知道两点内容：（具体可以看我之前的文章：这些浏览器面试题，看看你能回答几个？）

CSS不会阻塞DOM的解析，但会阻塞DOM的渲染
CSS会阻塞JS执行，但不会阻塞JS文件的下载

由于CSS会阻塞DOM的渲染，所以我们将首屏关键CSS内联后，剩余的非首屏CSS内容可以使用外部CSS，并且异步加载，防止非首屏CSS内容阻塞页面的渲染。

CSS异步加载方式

第一种方法是动态创建

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

第二种方法是将link元素的media属性设置为用户浏览器不匹配的媒体类型（或媒体查询）

对浏览器来说，如果样式表不适用于当前媒体类型，其优先级会被放低，会在不阻塞页面渲染的情况下再进行下载。在首屏文件加载完成之后，将media的值设为screen或all，从而让浏览器开始解析CSS。

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

第三种方法是通过rel属性将link元素标记为alternate可选样式表

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

第四种方法是使用rel=preload来异步加载CSS

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

注意，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。as的可选值可以参考上述标准文档。

看起来，rel="preload"的用法和上面两种没什么区别，都是通过更改某些属性，使得浏览器异步加载CSS文件但不解析，直到加载完成并将修改还原，然后开始解析。

但是它们之间其实有一个很重要的不同点，那就是使用preload，比使用不匹配的media方法能够更早地开始加载CSS。所以尽管这一标准的支持度还不完善，仍建议优先使用该方法。

CSS文件压缩

这应该是最容易想到的一个方法了，通过压缩CSS文件大小来提高页面加载速度。现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

CSS层级嵌套最好不要超过3层

一般情况下，元素的嵌套层级不能超过3级，过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大，造成性能浪费，影响渲染的速度！而且过于依赖HTML文档结构。这样的css样式，维护起来，极度麻烦，如果以后要修改样式，可能要使用!important覆盖。尽量保持简单，不要使用嵌套过多过于复杂的选择器。

删除无用CSS代码

一般情况下，会存在这两种无用的CSS代码：一种是不同元素或者其他情况下的重复代码，一种是整个页面内没有生效的CSS代码。

对于前者，在编写的代码时候，我们应该尽可能地提取公共类，减少重复。对于后者，在不同开发者进行代码维护的过程中，总会产生不再使用的CSS的代码，当然一个人编写时也有可能出现这一问题。而这些无用的CSS代码不仅会增加浏览器的下载量，还会增加浏览器的解析时间，这对性能来说是很大的消耗。所以我们需要找到并去除这些无用代码。

那么我们如何知道哪些CSS代码是无用代码呢？

谷歌的Chrome浏览器就有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，点击Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码。

慎用*通配符

我们有时候可能会写下面这种代码来消除一些标签的默认样式或统一浏览器对标签渲染的差异化：

*{
 margin：0；
 padding：0;
}

这样虽然代码量少，但它的性能可不是最佳的，我们最好还是写对应的标签选择器：

新变化

Sat, 09 Nov 2024 00:00:00 +0800

CSS 发展史

上图是20 世纪 90 年万维网刚出现时，由于当时并没有可以装饰网页的方法，原始的 Web 页面呈现的效果，随着 CSS（层叠样式表，Cascading Style Sheets）的诞生与发展，Web页面的样式有了翻天覆地的变化。

CSS的发布过程

CSS1.0 19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
CSS2.0 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
CSS2.1 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性
CSS3 从2011年开始CSS被分为多个模块单独升级。这些模块统称为CSS3 包含有：

CSS 选择器level3
CSS 媒体查询level3
CSS color level3

CSS4 设计中

CSS 标准的制定大概有下面几个步骤

下面主要介绍的是与我们日常工作有关联的一些新特性，其中一些已经在主流浏览器中得到了支持，还有一些特性还在草案阶段，可能还会有一些变化。

CSS 伪类选择器

is()和where()

在编写css时，有时会需要使用很长的选择器列表来定位具有相同样式的子元素，比如对所有H元素下的span设置为block，之前会这么写:

这样写选择器看起来很长，可读性差。此时，可以使用is()来提高易读性，同时避免使用长选择器

浏览器支持:

:is() Chrome 88/ Firefox 78/ Edge 88 /Safari 14
:where() Chrome 88/ Firefox 78/ Edge 88 /Safari 14

注意：

is()和where()在使用方法上和其他的伪类选择器一样，可以任意组合排列。
is()和where()的功能大体上是一样的，他们的差异性体现在选择器的权重上

where()选择器没有权重，也就是权重是0
is()选择器的权重由它的选择器列表中的最搞权重决定

规则示例: