CSS实践系列

CSS

CSS预编语言

CSS预编语言是指可以在CSS基础上添加一些扩展功能和语法，从而提高CSS编写的效率和可维护性的语言。常见的CSS预编语言有LESS、Sass和Stylus等。
其主要优点包括：

1. 变量支持：可以定义变量来存储颜色、字体、间距等信息，并在需要时进行调用，提高了代码的复用性和可维护性。
2. 嵌套支持：可以将选择器进行嵌套，从而避免了冗长的CSS代码，同时也使得HTML结构与样式更加清晰。
3. 混合（Mixin）支持：可以定义一些通用且重复使用的样式，然后在需要时进行调用，减少了代码的冗余。
4. 函数支持：提供了强大的函数库，例如计算器函数、字符串处理函数、颜色函数等，使得样式的编写更加灵活和方便。
5. 自动化处理：通过使用Gulp、Webpack等工具，可以自动编译CSS代码，从而节省开发时间和提高工作效率。

不同的CSS预编语言之间存在一些区别，例如：

1. 语法不同：不同的CSS预编语言可能会有不同的语法规则和关键字。
2. 文件扩展名不同：LESS的文件扩展名是.less，Sass的文件扩展名是.scss或.sass，Stylus的文件扩展名是.styl。
3. 编译方式不同：不同的CSS预编语言在编译过程中可能会使用不同的引擎和工具，例如LESS使用Less.js进行编译，Sass使用Ruby Sass或LibSass等工具进行编译。

   在Chrome中实现小于12px的文字

   在Chrome中，小于12px的文字默认会被设置为12px的大小，这是因为Chrome将最小字体大小限制在了12px。但是，可以通过以下几种方式来实现小于12px的文字：

   使用-webkit-text-size-adjust属性

   可以使用-webkit-text-size-adjust属性来控制文本的缩放效果。例如，可以设置如下样式：

   body {
   -webkit-text-size-adjust: none;
   }

   上述代码中，将-webkit-text-size-adjust属性设置为none可以禁用浏览器的自动缩放功能，从而使得小于12px的文字可以正常显示。

   使用transform属性

   可以使用transform属性对元素进行缩放操作，从而使得文本的大小可以小于12px。例如，可以设置如下样式：

   .small-font {
   font-size: 10px;
   display: inline-block;
   transform: scale(0.8);
   transform-origin: 0 0;
   }

   上述代码中，将元素的字体大小设置为10px，并使用transform的scale属性对元素进行缩放，从而实现了小于12px的文本。

   使用CSS画三角形

   在CSS中，可以使用border属性以及其相关属性来画一个三角形。以下是一个示例代码：

   .triangle {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 50px solid red;
   border-right: 50px solid transparent;
   }

   上述代码中，通过设置元素的宽度和高度为0，并使用border-top、border-left和border-right等属性来定义三角形的形状和样式。其中，border-top属性设置了三角形的高度和颜色，border-left和border-right属性设置了三角形两侧的边框。
   三角形的原理基于CSS有一个特性：当一个块级元素的宽度和高度都为0时，它会自动变成一个没有内容的盒子。此时，如果在这个盒子上应用一个或多个边框，就可以在页面上画出一个三角形。

   视差滚动效果

   视差滚动效果可以通过CSS的transform和perspective属性来实现。以下是一些常用的方法：

   基于背景图实现视差滚动

   可以将背景图固定在页面上，然后使用transform属性对其进行平移、缩放等操作，以实现视差滚动的效果。例如，可以设置如下样式：

   .background {
   background-image: url("bg.jpg");
   background-attachment: fixed;
   background-size: cover;
   height: 100vh;
   transform: translateZ(-50px) scale(1.2);
   }

   上述代码中，translateZ属性可以将元素向后平移50px，产生立体感；scale属性可以缩放元素，从而使得前景元素看起来更大。

   基于文字实现视差滚动

   可以使用perspective属性和transform属性来实现文本的视差滚动效果。例如，可以设置如下样式： ```css .parallax-text { perspective: 1px; font-size: 24px; }

.parallax-text span { display: inline-block; transform: translateZ(-1px); }

上述代码中，`perspective`属性可以设置元素的透视距离，使得元素具有3D效果；`translateZ`属性可以控制元素沿着Z轴方向移动，从而产生视差效果。
<a name="h3xsv"></a>
## 单行文本溢出的省略样式
单行文本溢出的省略样式可以通过以下代码实现：
```css
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上述代码中，white-space属性设置为nowrap可以让文本不换行，overflow属性设置为hidden可以隐藏超出部分，text-overflow属性设置为ellipsis可以显示省略号。

多行文本溢出的省略样式

而多行文本溢出的省略样式则需要使用CSS3新增的-webkit-line-clamp属性，该属性需要结合display: -webkit-box;和-webkit-box-orient: vertical;属性一起使用，示例代码如下：

.text-overflow-multiline {
  overflow : hidden;
  display : -webkit-box;
  -webkit-line-clamp: 2; /* 行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

上述代码中，-webkit-line-clamp属性指定了需要显示的行数，-webkit-box-orient属性指定为竖向排列。需要注意的是，这种方式目前只支持WebKit内核的浏览器（如Safari、Chrome等），其他浏览器可能无法生效。

CSS的性能优化

CSS的性能优化对于网站性能的提升至关重要，以下是一些CSS提高性能的方法：

1. 减少HTTP请求：将多个CSS文件合并为一个文件，或使用CSS预处理器（如Sass、Less等）来减少CSS文件数目。
2. 压缩CSS文件：使用CSS压缩工具，例如CSSNano和UglifyCSS等，可以去除CSS中的注释、空格和冗余代码，从而减小文件体积，加快页面加载速度。
3. 使用字体图标：使用字体图标而不是图片，可以减少HTTP请求数量，提高网页性能。同时，字体图标可以通过CSS控制大小、颜色和样式等，更加灵活。
4. 避免使用@import：@import语句会导致浏览器在下载完主样式表之后再次发送请求下载其他样式表，因此应该尽可能避免使用@import。
5. 避免使用过于复杂的选择器：使用简单的选择器可以提高CSS解析速度，避免影响页面渲染性能。
6. 避免使用!important：虽然!important可以强制覆盖其他样式，但是滥用它会导致CSS的可维护性变差，同时也会降低性能。
7. 使用CSS Sprites：将多个小图片合并成一张图片，可以减少HTTP请求数量，提高网页性能。

8. 避免使用表格布局：表格布局会导致浏览器不得不重新计算整个文档，应该尽可能使用CSS布局来代替表格布局。

   响应式设计

   响应式设计（Responsive Design）是一种能够自适应不同设备和屏幕尺寸的网页设计方式。它可以让用户在任何设备上都能够获得最佳的浏览体验，而不需要针对每个设备单独创建一个独立的网站。
   响应式设计的基本原理是根据设备屏幕的尺寸或者分辨率等特征，动态地调整页面布局、字体大小、图片大小等元素，使其能够适应不同的设备屏幕，并保证内容的可读性和易用性。通常，响应式设计会使用CSS3媒体查询、弹性盒子布局、图像缩放与裁剪等技术来实现。
   要做好一个响应式网站，以下是几个关键的步骤：

9. 设计阶段：在设计网站时需要先考虑不同设备上的展示效果，即采用流体布局和可伸缩的设计风格。同时，需要注意颜色、字体、图像等方面的选取，以确保在各种设备上都具有良好的视觉效果和可读性。

10. HTML编码：应该使用语义化标签来搭建页面结构，便于搜索引擎获取信息，同时也为不同设备提供了适配的基础。同时，需要注意在HTML中添加viewport meta标签，以确保页面在移动设备上能够正常显示。
11. CSS编码：按照响应式布局的原则设计CSS样式，使用媒体查询来针对不同屏幕尺寸做出调整，使用流式单位（如百分比、em等）来实现元素的伸缩效果，避免设置固定的宽度和高度。

12. 图像优化：使用无损压缩技术，压缩图像文件大小，选择合适的图片格式（如JPEG、PNG、SVG等），同时针对不同屏幕尺寸提供不同大小的图片版本，以达到更好的加载速度和效果。

    回流（reflow）和重绘（repaint）

    回流（reflow）和重绘（repaint）是页面性能优化中需要掌握的两个关键概念。
    回流指的是当DOM结构发生变化或者浏览器窗口尺寸改变时，浏览器需要重新计算元素的位置和大小，然后将视图更新到屏幕上的过程。这个过程十分消耗性能，因为它涉及到了整个文档的重新布局和重新绘制。
    重绘指的是当元素的样式属性发生变化，但不影响其在文档流中的位置和大小时，浏览器只需要重新绘制元素的外观，而无需重新计算布局和重新绘制整个文档的过程。
    在实际开发中，以下场景可能会触发回流和重绘：

13. 改变窗口大小：浏览器需要重新计算布局和重新绘制整个文档。

14. 修改CSS样式：例如修改元素的宽度、高度、边距、位置等，都可能导致元素的回流和重绘。
15. 操作DOM结构：例如添加、删除、移动元素等，都可能导致整个文档重新布局和重新绘制。
16. 获取一些计算值：例如offsetTop、offsetWidth等，这些值需要浏览器重新计算元素的位置和大小。

为了减少回流和重绘，可以采取以下几种方式：

1. 使用相对定位、绝对定位等方式摆放元素，避免影响其他元素的布局。
2. 将需要多次操作的元素离线处理，例如使用document fragment操作DOM结构。
3. 通过合理设置CSS属性，尽可能减少浏览器计算量。

4. 避免在循环中操作DOM，尽可能减小DOM树的深度。

   CSS3动画

   CSS3动画指的是使用CSS3中的特定属性和值来实现元素动态效果的技术。以下是CSS3动画常用的一些属性和值：

5. transition：过渡动画，可以在状态改变时添加平滑的动画效果。

6. transform：变形动画，可以通过缩放、旋转、倾斜或移动等操作实现元素的变形效果。
7. animation：关键帧动画，可以分别定义不同的动画状态，并在指定时间内自动切换。
8. @keyframes：定义关键帧动画中的各个关键帧，可以控制元素在不同时间点的状态。
9. perspective：透视距离，可以设置元素的透视效果，使得元素看起来更加真实。
10. backface-visibility：背面可见性，可以控制元素的背面是否可见，使得元素旋转时呈现更好的效果。

11. will-change：预设元素的某些属性，优化GPU处理并提高动画性能。

    CSS3的主要特性

    CSS3是CSS的最新标准，包含了许多新的功能和特性。以下是CSS3新增的一些主要特性：

12. 强大的选择器：CSS3引入了很多强大的选择器，例如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选择网页中的元素。

13. 盒模型：CSS3中新增了盒模型的box-sizing属性，可以控制盒子的宽高计算方式，包括content-box（默认值）、border-box和padding-box。
14. 文字和字体：CSS3中新增了text-shadow属性和font-face规则，可以实现文字阴影和自定义字体。
15. 背景和渐变：CSS3中新增了background-size属性和多种渐变效果，例如线性渐变、径向渐变等。
16. 2D转换和动画：CSS3中新增了transform属性和transition属性，可以实现元素的2D变形和动画效果。
17. 3D转换和动画：CSS3中还新增了类似于transform的3D变形和过渡动画的属性，例如perspective、rotateX、rotateY、scaleZ、translateZ等。
18. Flexbox布局：CSS3中引入了Flexbox布局，可以轻松地实现弹性布局，使得页面布局更加灵活。

19. Grid布局：CSS3中还引入了Grid布局，可以方便地实现复杂的网格布局结构。

    Grid网格布局

    Grid网格布局是CSS3中引入的新一代布局方式，它可以使我们更方便地进行页面布局，实现复杂的网格结构。与Flexbox不同的是，Grid布局能够同时管理行和列，具有更高的灵活性和自由度。

    Grid布局的基本概念：

20. 网格容器（grid container）：使用display: grid属性定义的元素，它的子元素将成为网格项。

21. 网格线（grid line）：将网格划分为行和列的线，在网格线上的位置可以用来定位网格项。
22. 网格轨道（grid track）：相邻两个网格线之间的空间，可以是行或列。
23. 网格单元格（grid cell）：网格交叉处形成的矩形区域，是网格容器的最小单位。

24. 网格区域（grid area）：由四条网格线围成的矩形区域，可以包含一个或多个网格单元格。

    Grid布局的常用属性：

25. grid-template-columns/grid-template-rows：定义网格容器的列/行大小和数量。

26. grid-template-areas：定义网格容器中每个网格区域的名称，用于布局。
27. grid-column-start/grid-column-end/grid-row-start/grid-row-end：定义网格项所占据的网格线位置。
28. grid-column/grid-row：简写属性，同时定义grid-column-start和grid-column-end/grid-row-start和grid-row-end。
29. grid-area：定义网格项所占据的网格区域。
30. justify-items/align-items：定义网格容器内网格项的对齐方式。

31. justify-content/align-content：定义网格容器内所有网格项的对齐方式。

    Grid布局适用于以下场景：

32. 多列布局：可以方便地实现多列布局，不必使用浮动和定位等传统布局技术。

33. 复杂布局：可以通过网格线和网格区域的划分和合并，实现各种复杂的布局效果。
34. 响应式布局：可以根据屏幕尺寸自动调整布局，适用于各种设备和终端。

    Flexbox（弹性盒布局模型）

    Flexbox（弹性盒布局模型）是CSS3中引入的一种新的布局模型，它可以方便地实现各种复杂的页面布局效果。Flexbox将容器内的元素放在一个主轴上，并定义了如何分配剩余空间和对齐元素等属性，可以完全改变元素默认排列顺序、大小、位置和流动方向。

    Flexbox的适用场景如下：

    实现可以自适应的网页布局

    Flexbox可以使得网页元素更加灵活，可以根据不同的屏幕尺寸和设备自适应调整布局，从而提高多终端访问体验。

    解决传统布局中存在的难以解决的问题

    传统布局中，当两个或多个元素具有不同的高度时，往往需要使用hack方法来解决，而在Flexbox中，只需要简单设置一些属性即可实现元素的自适应调整。

    可以快速创建响应式布局

    通过使用Flexbox技术，可以快速构建出符合计算机屏幕尺寸的响应式布局，这样可以大大提升用户交互体验。

    两栏布局，右侧自适应：

    使用float属性实现，左边固定宽度，右边设置为100%减去左边的宽度。具体代码如下： ```html

另一种方法是使用flex布局，将容器设置为`display: flex;`，并将左侧元素的flex-basis属性设置为固定宽度，右侧元素的flex-grow属性设置为1。具体代码如下：
```html
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
  .container {
    display: flex;
  }
  .left {
    flex-basis: 200px; /* 左侧宽度 */
  }
  .right {
    flex-grow: 1;
  }
</style>

三栏布局，中间自适应：

同样可以使用float或者flex布局实现。
使用float属性实现，左右两侧宽度固定，中间宽度为100%减去左右两侧宽度之和。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<style>
  .left {
    float: left;
    width: 200px; /* 左侧宽度 */
  }
  .center {
    float: left;
    width: calc(100% - 400px); /* 中间宽度 */
  }
  .right {
    float: left;
    width: 200px; /* 右侧宽度 */
  }
</style>

使用flex布局实现，将容器设置为display: flex;，左右两侧元素的flex-basis属性设置为固定宽度，中间元素的flex-grow属性设置为1。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<style>
  .container {
    display: flex;
  }
  .left {
    flex-basis: 200px; /* 左侧宽度 */
  }
  .center {
    flex-grow: 1;
  }
  .right {
    flex-basis: 200px; /* 右侧宽度 */
  }
</style>

元素水平垂直居中的方法

元素水平垂直居中的方法有以下几种：

1. 绝对定位 + margin: auto：将元素设置为绝对定位，将左右和上下方向的margin都设置为auto。这个方法需要知道要居中元素的宽高，并且元素必须是块级元素。
2. flex布局：使用flex布局，将父容器设置为display: flex; align-items: center; justify-content: center;，子元素即可实现水平垂直居中。这个方法适用于块级元素和行内元素。
3. display: table-cell + vertical-align: middle：将元素设置为表格单元格，并将其vertical-align属性设置为middle。这个方法适用于块级元素和行内元素。

如果元素不定宽高，以上方法中第一种方法无法使用，但是前两种方法仍然适用：

1. flex布局：使用flex布局，将父容器设置为display: flex; align-items: center; justify-content: center;，子元素即可实现水平垂直居中。此时需要将子元素的width和height设为100%或者min-width和min-height设为0，以使子元素能够随着父元素的大小而自适应。

2. display: table-cell + vertical-align: middle：将元素设置为表格单元格，并将其vertical-align属性设置为middle。此时需要将子元素的display设置为inline-block或table-cell，以便它能够在表格单元格中显示，并且随着父元素的大小而自适应。

   BFC（块级格式化上下文）

   BFC（块级格式化上下文）是CSS中的一个重要概念，它是一个独立的渲染区域，具有一定的特性和约束条件。在BFC内部的元素按照一定规则进行排列和布局，不会影响到外部的元素。

   BFC的主要作用如下：

3. 清除浮动：当一个元素浮动之后，它会脱离普通流并且可能会导致父容器高度塌陷。而当一个元素触发BFC时，它可以包含浮动的子元素并计算它们的尺寸。

4. 防止边距重叠：当两个相邻元素的margin相遇时，它们之间的margin会合并为一个值。但是当一个元素触发BFC时，它的margin不会和相邻元素合并。

5. 分属于不同的块级格式化上下文，互相独立，不会影响到其他元素。

   BFC的触发条件如下：

6. 根元素或包含根元素的元素

7. 浮动元素（float不为none）
8. 绝对定位元素（position为absolute或fixed）
9. 行内块元素（display为inline-block）
10. 表格单元格（display为table-cell, table-caption, table-row）
11. 弹性盒子元素（display为flex或inline-flex）
12. overflow不为visible的块级盒子

触发BFC后，BFC内部的元素按照一定规则进行排列和布局。具体来说，BFC内部的元素会按照下列规则进行排列：

1. 垂直方向上的距离由margin决定，同一个BFC内相邻两个块级元素之间的margin会发生重叠。
2. BFC内部的所有元素从包含块的顶部开始放置，它们在垂直方向上一个接一个地放置。

3. 浮动元素将被包裹在BFC内部，并不会影响到BFC外面的元素。

   在CSS中隐藏页面元素的几种方式

   在CSS中，有以下几种方式可以隐藏页面元素：

4. display: none;：将元素设置为不显示，并且不占据页面任何空间。该方法隐藏的元素将无法通过JavaScript访问。

5. visibility: hidden;：将元素设置为不可见，但是仍会占据页面空间。该方法隐藏的元素仍然可以通过JavaScript访问。
6. opacity: 0;：将元素透明度设置为0，使其不可见。该方法隐藏的元素仍然占据页面空间，但是可以通过JavaScript访问。
7. height: 0; width: 0; overflow: hidden;：使用这些属性将元素高度和宽度设置为0，同时隐藏内容溢出的部分。该方法隐藏的元素仍然占据页面空间，可以通过JavaScript访问。
8. position: absolute; left: -9999px;：使用这些属性将元素移除屏幕外。该方法隐藏的元素仍然占据页面空间，可以通过JavaScript访问。

在具体应用时，需要根据需求选择适合的方式进行隐藏。display: none;将完全从DOM中删除被隐藏元素，对性能相对友好；visibility: hidden;将仅仅是视觉上隐藏但仍占据空间；opacity: 0;则是通过改变元素的透明度来实现隐藏；height: 0; width: 0; overflow: hidden;则是隐藏元素的内容以及溢出部分，但是占据空间；position: absolute; left: -9999px;则是将元素移动到屏幕外，但也仍然占据空间。

设备像素（physical pixel）

设备像素（physical pixel）：指的是物理硬件屏幕上的最小显示单元，也称为物理像素或点。设备像素是屏幕上可以看到的微小方块，每个方块都有自己的颜色值。
CSS像素（CSS pixel）：指的是CSS中使用的逻辑单位，通常用于浏览器渲染Web页面。在大多数情况下，1个CSS像素等于1个设备独立像素。
设备独立像素（device-independent pixel，也称为密度无关像素、逻辑像素或虚拟像素）：是一种基于CSS像素的视觉单位，与设备的物理性质无关。设备独立像素是浏览器和操作系统用来确定在各种分辨率和尺寸的设备上如何呈现Web页面的重要因素。
DPR（device pixel ratio）：设备像素与设备独立像素之间的比率，表示屏幕上一个CSS像素对应于几个设备像素。例如，如果一个设备的DPR为2，那么1个CSS像素将对应于4个设备像素（2x2）。
PPI（pixels per inch）：每英寸的像素数，通常用于描述屏幕的分辨率。PPI越高，屏幕的分辨率就越高，显示的图像就越清晰。
综上所述，设备像素是屏幕上的物理点，CSS像素是逻辑单位用于浏览器渲染Web页面，设备独立像素是基于CSS像素的视觉单位，DPR是设备像素和设备独立像素之间的比率，PPI表示每英寸的像素数。在移动端开发中，通常通过控制CSS像素和设备像素之间的比率来实现高清屏幕的适配。
em、px、rem、vh和vw都是CSS中用于设置长度或大小的单位。

1. px（像素）：最常用的单位，指定一个具体的像素数值。在不同设备上显示的尺寸可能会有所不同。
2. em（相对单位）：基于当前元素的字体大小计算，在不同环境下可能会有所不同。例如，如果当前元素的字体大小为16px，那么1em就等于16px；如果嵌套的子元素设置了字体大小为1.2em，则相对于父元素来说，子元素的字体大小为19.2px（1.2 x 16px）。
3. rem（根元素相对单位）：与em类似，但是它基于根元素的字体大小计算，即html元素的字体大小。这意味着rem的大小不会受到父元素的影响，更容易控制整个页面的尺寸。例如，如果html元素的字体大小为16px，那么1rem就等于16px；如果嵌套的子元素设置了字体大小为1.2rem，则相对于html元素来说，子元素的字体大小为19.2px（1.2 x 16px）。
4. vh（视口高度的百分比）：基于视口高度计算，1vh等于视口高度的1%。例如，如果视口高度为1000px，那么1vh就等于10px。

5. vw（视口宽度的百分比）：基于视口宽度计算，1vw等于视口宽度的1%。例如，如果视口宽度为800px，那么1vw就等于8px。

   CSS选择器

   CSS选择器包括以下几种：

6. 元素选择器（element selector）

7. ID选择器（ID selector）
8. 类选择器（class selector）
9. 属性选择器（attribute selector）
10. 伪类选择器（pseudo-class selector）
11. 伪元素选择器（pseudo-element selector）
12. 后代选择器（descendant selector）
13. 子元素选择器（child selector）
14. 相邻兄弟选择器（adjacent sibling selector）

15. 通用选择器（universal selector）

    CSS选择器优先级

    CSS选择器优先级按照以下顺序进行排序，从高到低：

16. !important声明的样式

17. 行内样式（即直接在HTML标签中使用style属性定义的样式）
18. ID选择器
19. 类选择器、属性选择器和伪类选择器
20. 元素选择器和伪元素选择器

21. 通配符选择器

    CSS中可以继承的属性

    可以继承的属性包括：

22. 字体系列（font-family）

23. 字体大小（font-size）
24. 字体样式（font-style）
25. 字体粗细（font-weight）
26. 颜色（color）
27. 行高（line-height）
28. 文本缩进（text-indent）
29. 文本对齐方式（text-align）
30. 文本装饰（text-decoration）
31. 垂直对齐方式（vertical-align）
32. opacity属性
33. visibility属性

    盒子模型

    盒子模型是指在网页布局中，HTML元素被看作是一个矩形的盒子，该盒子由四个边框（border）、内边距（padding）和内容区域（content）组成。这些部分被称为盒子模型的属性。
    每个盒子都有自己的宽度和高度，可以通过CSS来设置、修改和控制。边框决定了盒子的外观，内边距在内容区域和边框之间创建空白区域，而内容区域则包含了HTML元素的实际内容。
    盒子模型在网页设计和布局中起着非常重要的作用，可以用于控制元素的位置、大小和间距等属性。同时，理解盒子模型也有助于更好地掌握CSS布局技能。