フロントエンド CSS の古典的な面接の質問の概要

2.1 CSSのボックスモデルを導入する？

IEボックスモデル、W3Cボックスモデルの2種類あり、
ボックスモデル：コンテンツ(content)、パディング(padding)、ボーダー(マージン)、ボーダー(border)、
違い：IEのコンテンツ部分がボーダーとパディングを計算する。

2.2 CSSセレクターの優先順位?

!重要 > インライン スタイル (重み 1000) > ID セレクター (重み 100) > クラス セレクター (重み 10) > ラベル (重み 1) > ワイルドカード > 継承 > ブラウザーのデフォルト属性

2.3 垂直方向に中央揃えにする方法は何通りありますか?

単一行のテキスト: line-height = height
画像: 垂直配置: 中央;
絶対位置決め: 上: 50%;左: 50%;変換: 変換(-50%, -50%);
フレックス: 表示:フレックス;マージン: 自動

2.4 CSSリンクと@importの違いと使い方を簡単に説明しますか？

link は XHTML タグであり、CSS を読み込むことに加えて、RSS などの他のものも定義できます。@import は CSS のカテゴリに属し、CSS のみを読み込むことができます。
リンクが CSS を参照する場合、ページのロードと同時にロードされます。@import はページが完全にロードされた後にロードする必要があります。
link は XHTML タグで互換性の問題はありませんが、@import は CSS2.1 で提案されており、それより前のバージョンのブラウザではサポートされていません。
link では、JavaScript を使用して DOM を制御してスタイルを変更することがサポートされていますが、@import はサポートしません。

2.5 rgba の透明効果と不透明度の違いは何ですか?

opacityは親要素の不透明度属性を継承し、RGBAで設定した要素の子孫要素は不透明度属性を継承しません。

2.6 表示:なしと可視性:非表示の違いは何ですか?

display:none は、対応する要素を非表示にし、ドキュメント レイアウト内でその要素にスペースが割り当てられないようにします。要素の両側の要素は、あたかも存在しなかったかのように閉じられます。
Visibility:hidden は、対応する要素を非表示にしますが、ドキュメント レイアウト内の元のスペースを保持します。

2.7 位置の値、相対的および絶対的は誰に対して相対的なものですか?

相対: 通常のドキュメント フローにおける自身の位置を基準とした相対位置。
Absolute: 最も近いレベルで位置が静的ではない親要素を基準とした絶対位置を生成します。
修正: (古いバージョンの IE はサポートしていません) 位置決めのためにブラウザ ウィンドウまたはフレームを基準とした絶対位置を生成します。
static: デフォルト値、位置決めなし。要素は通常のドキュメント フローに表示されます。
Sticky: スティッキー配置の要素を生成します。コンテナーの位置は、通常のドキュメント フローに従って計算されます。

2.8 0.5pxの直線を描きますか？

テストはcss3の変換です

height: 1px;
transform: scale(0.5);

2.9 calc、support、mediaの意味と使い方は何ですか?

• @support は主にブラウザが CSS の特定の属性をサポートしているかどうかを検出するために使用されます. 実際には条件判定です. 特定の属性をサポートしている場合はスタイルのセットを記述できます. 特定の属性をサポートしていない場合は,代わりに、別のスタイルのセットを提供することもできます。
• calc() 関数は、長さの値を動的に計算するために使用されます。calc() 関数は、「+」、「-」、「*」、「/」の演算をサポートします。
• @media クエリでは、メディア タイプごとに異なるスタイルを定義できます。

2.10 1rem、1em、1vh、1px は何を表しますか?

• rem
  rem はすべて、ルート要素 element を基準とした長さです。通常は、HTML 要素のフォント サイズを設定し、他の要素の長さの単位は rem になります。
• em
  サブ要素のフォント サイズの em は、親要素のフォント サイズを基準にします。
  要素の幅/高さ/パディング/マージンは、em が使用されている場合は要素のフォント サイズに相対します。
• vw/vh
  の正式名は、ビューポートの幅とビューポートの高さです。ウィンドウの幅と高さは、画面の幅と高さの 1% に相当します。ただし、幅を扱う場合は % 単位の方が適切で、vh 単位は高さを扱う場合はより良いです。
• ピクセル
  ピクセル ピクセル (ピクセル)。相対的な長さの単位。ピクセル px は、モニターの画面解像度を基準としています。
  一般的なコンピュータの解像度は｛1920 1024｝であり、その他の解像度は
  1920 1024 です。前者は画面の幅が合計 1920 ピクセル、後者は画面の高さが 1024 ピクセルです。

2.11 三角形を描きますか?

これは簡単な CSS テストです。コンポーネント ライブラリを使用するときは、ネイティブ CSS を忘れないでください。

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

2.12 CSS モジュール性についての理解について話す

CSS開発

CSS を記述するとき、実際には次の段階を経ました。

• 手書きのネイティブCSS
• プリプロセッサ Sass/Less の使用
• ポストプロセッサー PostCSS の使用
• CSSモジュールを使用する
• jsでCSSを使う

手書きのネイティブCSS

私たちが最初にページの書き方を学んだとき、誰もが次のような状況で CSS の書き方を学びました。

• インライン スタイル、つまり、HTML の style 属性に CSS コードを直接記述します。
• 埋め込みスタイル、つまりhtml hのstyleタグ内にクラスを記述し、現在のページに提供します。
• スタイルをインポートします。つまり、インライン スタイルで @import メソッドを使用して他のスタイルをインポートし、現在のページで使用できるように提供します。
• 外部スタイル。つまり、HTML のリンク タグを使用してスタイルを読み込み、現在のページに提供します。

私たちは常に探求を続け、埋め込みスタイルと外部スタイルを書く習慣を徐々に形成してきました。

これを読んだ後、誰もが疑問を抱くはずです。なぜインライン スタイルの使用が推奨されないのですか?

インラインスタイルを使用するデメリット

• スタイルは再利用できません。
• スタイルの重みが高すぎるため、スタイルがうまくカバーされません。
• プレゼンテーション層は構造層から分離されていません。
• キャッシュできないため、読み込み効率に影響します。

それでは、分析を続けてみましょう。なぜインポート スタイルの使用が推奨されないのでしょうか?

テスト後、CSS で @import を使用すると、次の 2 つの状況が発生します。

1. IE6-8 では、@import ステートメントが指すスタイル シートはページ上の他のリソースと同時に読み込まれませんが、ページ上のすべてのリソースが読み込まれた後にダウンロードが開始されます。

2. リンク タグ内の他の CSS を @import する場合、ページは、リンク タグ内の @import CSS の解析を開始する前に、すべてのリソースが読み込まれるまで待機します。

インポートされたスタイルを使用するデメリット

• インポート スタイルはスタイル タグの最初の行にのみ配置でき、他の行は無効になります。
• @import で宣言されたスタイル シートは、リソースを同時に要求するブラウザの動作を最大限に活用できず、その読み込み動作は他のリソースの読み込みによって遅延または中断されることがよくあります。
• @import スタイルシートの遅延読み込みにより、ページ スタイルがちらつく場合があります。

プリプロセッサ Sass/Less の使用

時間が経つにつれて、ネイティブ CSS の作成は実際にはフレンドリーではないことが徐々にわかりました。たとえば、ネイティブ CSS は変数をサポートしていません、ネストをサポートしていません、親セレクターをサポートしていません。これらのさまざまな問題が発生しています。 sass/less のようなプリプロセッサ。

プリプロセッサは主に CSS の構文を強化し、上記の問題を補いますが、本質的にはパッケージ化された結果は元の CSS と同じですが、開発者に優しく、よりスムーズに記述できます。

ポストプロセッサPostCSS

フロントエンド エンジニアリングの継続的な発展に伴い、フロントエンド リーダーによってますます多くのツールが開発され、すべての反復作業を機械に引き渡すというビジョンがあり、CSS 分野では postcss が登場しました。

postcss は CSS の世界のバベルとも呼ばれ、その実装原理は、ast を介して CSS コードを解析し、その解析結果を処理することにより、CSS を処理するための多くの使用シナリオを導き出すことです。

一般的な postcss の使用シナリオは次のとおりです。

• stylelint と連携して CSS 構文を検証する
• ブラウザーのプレフィックス自動プレフィクサーを自動的に増やす
• 次にCSSをコンパイルするための構文

CSS のモジュール性が急速に拡大

React や Vue などのモジュールベースのフレームワークの普及と使用により、ネイティブ CSS を作成する機会はますます少なくなっています。多くの場合、ページを多くの小さなコンポーネントに分割し、複数の小さなコンポーネントを構成要素のように最終的にレンダリングされたページに組み立てます。

しかし、CSS はクラス名に基づいて要素を照合することはわかっています。2 つのコンポーネントが同じクラス名を使用すると、後者が前者のスタイルを上書きします。スタイル名の競合を解決するのは大きな問題のようです。

この問題を解決するために、CSS モジュール化の概念が生まれました。

CSS モジュール定義

• 你是否为 class 命名而感到苦恼？
• 你是否有怕跟别人使用同样 class 名而感到担忧？
• 你是否因层级结构不清晰而感到烦躁？
• 你是否因代码难以复用而感到不爽？
• 你是否因为 common.css 的庞大而感到恐惧？

你如果遇到如上问题，那么就很有必要使用 css 模块化。

CSS 模块化的实现方式

BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。

BEM 的命名规范如下：

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}

通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。

并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式如下：

1、定义 css 文件。

.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}

/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}

.otherClassName {
  composes: className from "./style.css";
}

2、在 js 模块中导入 css 文件。

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              // 自定义 hash 名称
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};

4、最终打包出来的 css 类名就是由一长串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。

CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

使用方式如下：

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

js内に直接cssを記述していることがわかりますが、この場合、ソースhtmlを定義する際にスタイルが作成され、使用時にスタイル付きのコンポーネントを描画することができます。

さらに、他にもよく知られたライブラリがあります。

• 感情
• ラジウム
• グラマラス

要約する

最後にまとめ画像を載せておきます。

2.13 CSS で事前にプログラムされた言語の理解とそれらの違いについて話す

1. それは何ですか?

Cssマークアップ言語としては、構文は比較的単純でユーザーの要件は低いですが、いくつかの問題も伴います。

一見非論理的に見えるコードを大量に記述する必要があるため、保守や拡張に不便であり、再利用にもつながりません。 -Css執筆Css経験の不足によりコードを保守するため

Cssプリプロセッサは上記の問題を解決します。

前処理言語

言語が拡張されCss、変数、ミックスイン、関数などの機能が追加され、Css保守と促進が容易になりました。

本質的に、前処理はCss次のスーパーセットです。

カスタム文法とパーサーのセットが含まれています。これらの文法に従って、独自のスタイル ルールを定義できます。これらのルールは最終的にコンパイルされ、パーサーを通じて対応するCssファイルが生成されます。

二つ、何ですか

Cssプリコンパイル済み言語には、フロントエンドに 3 つの優れたプリコンパイル済みプロセッサがあります。

• 生意気な
• 少ない
• スタイラス

生意気な

2007 年に誕生した最も初期かつ最も成熟したプリプロセッサは、Ruby コミュニティと最も強力なフレームワークCss のサポートを受けて、現在は完全な互換性のあるフレームワークの影響を受け、進化しています。CompassCss LESSCssScss

ファイルのサフィックスは.sassandですscssが、sass のインデント方法に従って中括弧とセミコロンを厳密に省略できます。

少ない

2009 年に登場し、SASS多大な影響を受けましたが、 の構文を使用しているためCss、ほとんどの開発者やデザイナーが簡単に始めることができ、Ruby コミュニティの外にはるかに多くの支持者がいます。SASS

其缺点是比起 SASS 来，可编程功能不够，不过优点是简单和兼容 Css，反过来也影响了 SASS 演变到了 Scss 的时代

stylus

Stylus 是一个Css的预处理框架，2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 Css 预处理支持

所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的 Css。比较年轻，其本质上做的事情与SASS/LESS等类似

三、区别

虽然各种预处理器功能强大，但使用最多的，还是以下特性：

• 变量（variables）
• 作用域（scope）
• 代码混合（ mixins）
• 嵌套（nested rules）
• 代码模块化（Modules）

因此，下面就展开这些方面的区别

基本使用

less和scss

.box {
  display: block;
}

sass

.box
  display: block

stylus

.box
  display: block

嵌套

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

less

.a {
  &.b {
    color: red;
  }
}

变量

变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复「硬编码」

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

@red: #c00;

strong {
  color: @red;
}

sass声明的变量跟less十分的相似，只是变量名前面使用$开头

$red: #c00;

strong {
  color: $red;
}
stylus`声明的变量没有任何的限定，可以使用`$`开头，结尾的分号`;`可有可无，但变量与变量值之间需要使用`=

在stylus中我们不建议使用@符号开头声明变量

red = #c00

strong
  color: red

作用域

Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找

sass中不存在全局变量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

编译后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
} 

所以，在sass中最好不要定义相同的变量名

lessstylusと のスコープは非常javascriptに似ています。まず、ローカルに定義された変数を検索します。見つからない場合は、ルートまでバブリングのように下位レベルごとに検索します。

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

コンパイル後:

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
} 

混入

Mixin はプリプロセッサの最も重要な機能の 1 つと言うべきで、簡単に言うとMixinsスタイルの一部を別途定義したモジュールとして抽出し、多くのセレクタで再利用することができます。

Mixins変数またはデフォルトのパラメータは次の場所で定義できます。

では、混合使用法は、定義済みのものを別のすでに定義されているものに導入することlessを指します。また、パラメーターを渡すために使用することもできます。パラメーター変数は宣言です。ClassAClass@

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

コンパイル後

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sassを宣言するmixinsときに使用する必要があり@mixinn、その後にmixin名前が続き、パラメータも設定できます。パラメータ名は$変数宣言の形式です。

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylusこの混合は、Css前の 2 つのプリプロセッサ言語の混合とは少し異なり、記号Mixinsを使用せずに名前を直接宣言し、等号 (=) を使用して定義されたパラメーターとデフォルト値を接続できます。

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

コードのモジュール化

モジュール化とは、Cssコードをモジュールに分割することです

scss、、、lessのstylus3つの利用方法は以下の通りです。

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

2.14 CSS のみを使用して、幅と高さが適応可能な正方形を実装するにはどうすればよいですか?

電子商取引や個人のブログなどの Web サイトで CSS スクエアの適用シナリオが多かれ少なかれ見られるため、アダプティブ スクエア レイアウトを習得する必要があります。

四角

とても簡単です。ボックスの幅と高さを 200px に設定するだけです。

<div class="box">小明写的</div>

.box {
    width: 200px;
    height: 200px;
    background: pink;
}

アダプティブスクエア

ブロンズ

自己適応というとremやvwなどの相対単位を考える必要がありますが、これらの単位を使って実現してみましょう。

レム

<div class="rem">rem</div>

body {
    font-size: 16px;
}

.rem {
    width: 10rem;
    height: 10rem;
    background: pink;
}

@media only screen and (max-width: 1200px) {
    body {
        font-size: 12px;
    }
}

画面幅が 1200px を超える場合、フォントは 16px、レム ボックスのサイズは 160px * 160px になります。

画面幅が 1200px 未満の場合、フォントは 12px、レムボックスのサイズは 120px * 120px です。

rem の値は、実際のアプリケーション シナリオで画面幅が変化すると動的に計算され、ケースを理解するためにのみ使用されます。

アドバンテージ

rem に適応したプロジェクトでは、rem を直接使用してボックス、つまり適応正方形の幅と高さを設定できます。

欠点がある

rem が設定されていないプロジェクトでは、適応二乗を単独で達成するのは少しやりすぎです。

vw

<div class="vw">vw</div>

.vw {
    width: 10vw;
    height: 10vw;
    background: yellow;
}

正方形が画面幅の変化に適応していることがわかります。これが目的の効果です。

アドバンテージ

vw は組み込みのビューポート ユニットであり、直接使用できます。

欠点がある

実際のビジネスシーンでは、設計図のサイズを vw に変換するのは比較的面倒です

金

パーセンテージ + パディングを使用する場合、非常に詳細な知識ポイントが得られます。パディングとマージンの値がパーセンテージである場合、パーセンテージの値は親要素の幅に基づきます。

<div class="padding"></div>

.padding {
    width: 20%;
    padding-top: 20%;
    /* padding-top或padding-bottom都可以 */
    background: #696969;
}

ボックスの幅を 20% に設定し、パディングの垂直軸を使用してボックスの高さを拡張し、適応可能な正方形を取得します。

注意深い友人なら、それが適応型の広場であることに気づくでしょうが、高さは完全に占有されており、コンテンツを置く場所がありません。はい、現時点では正方形のみですが、実際のビジネスシーンでは内部に写真やその他のコンテンツが使用され、正方形以上のものが必要になります。

解決策: コンテンツ ボックスの別のレイヤーをネストします。外側の正方形のボックスは相対配置で、内側のコンテンツ ボックスは絶対配置です。内側のボックスの幅と高さは外側の正方形のボックスに基づきます。コードは次のとおりです。

<div class="box-wrap">
    <div class="box-content">我是内容区域</div>
</div>

.box-wrap {
    position: relative;
    width: 20%;
    padding-top: 20%;
}

.box-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: burlywood;
}

.box-contentクラスはコンテンツ ボックスであり、コンテンツ ボックス内で自由にデザイン ドラフトを復元できます。

正方形の領域に写真を表示するだけでよい場合も同様の理由で次のようになります。

<div class="box-wrap">
    <img src="./img/A.webp" alt="">
</div>

.box-wrap {
    position: relative;
    width: 20%;
    padding-top: 20%;
}

.box-wrap > img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
}

ここでは適応型正方形画像を実装しました。

アドバンテージ

他の構成は必要なく、柔軟な設定と強力な拡張性を備えています。

欠点がある

コンテンツ ボックスの追加レイヤーをネストする必要があります (個人的な意見)

ダイヤモンド

名前が示すように、これはかなり醜いもので、CSS 属性のアスペクト比です。

アスペクト比 MDN ドキュメント

要するに、アスペクト比はアスペクト比です。これ以上言っても無駄です、コードに行きましょう

<div class="box-square">我是内容</div>

.box-square {
    aspect-ratio: 1 / 1;
    /* aspect-ratio: 1; 可简写 */
    width: 20%;
    background: chocolate;
}

プレビュー

1 つの属性、アダプティブ スクエアであれば問題ありません。属性がどれほど優れていても、それは互換性とブラウザのサポートに依存します。

アドバンテージ

属性は理解しやすく、他の構成は必要なく、ネストされたコンテンツ ボックスも必要ありません。

欠点がある

唯一の欠点は互換性です。基本的にサポートされるべきものはすべて 2023 年にサポートされる予定です。この問題を完了するのは困難です。

学びながら使う

ここまでで知識ポイントをマスターする必要があります。図に示すように、実際のビジネス要件を実現してみましょう。

このレイアウトを実現するには、全体の幅を1000px、商品カードの左右の間隔を12pxとすると、アダプティブ＋レスポンシブなレイアウトが必要となります。

パーセンテージ + パディングの実装

<main>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
   <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
</main>
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .shop {
        width: calc(25% - 9px);
        box-shadow: 0 0 8px #0002;
        border-radius: 4px;
       overflow: hidden;

        .shop-img {
            position: relative;
            width: 100%;
           padding-top: 100%;

            > img {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1;
                object-fit: cover;
            }
        }

        .shop-title {
            padding: 8px;
            font-size: 14px;
            color: #232323;
        }
    }
}

@media only screen and (max-width: 768px) {
    main {

        .shop {
            width: calc(50% - 6px);
            margin-bottom: 12px;
        }
    }
}

効果を見てみましょう

アスペクト比の実装

アスペクト比属性を使用すると、外側の正方形のボックスを 1 つ減らしてネストできます。

<main>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
</main>

スタイルは基本的に同じままで、画像の関連部分を変更するだけです。

main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

   .shop {
        width: calc(25% - 9px);
        box-shadow: 0 0 8px #0002;
        border-radius: 4px;
        overflow: hidden;

        > img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .shop-title {
            padding: 8px;
            font-size: 14px;
            color: #232323;
        }
    }
}

@media only screen and (max-width: 768px) {
    main {
        .shop {
            width: calc(50% - 6px);
            margin-bottom: 12px;
        }
    }
}

効果を見てみましょう

拡大する

実際のビジネスでは、正方形だけでなく長方形や円などのレイアウトが適用されます。

別の要件を見てみましょう。UI では画像領域のアスペクト比が 4:3 であることが規定されており、指定された画像も 4:3 です。

一般に、私たちの解決策は次のとおりです。画像の幅を設定すると、高さが適応されます。これは比較的単純ですが、いくつかの問題もあります。たとえば、画像のアスペクト比が多かれ少なかれ 4:3 ではない、またはアップロードされた画像が不規則であるため、ページ レイアウトが制御不能になります。 -損失と呼ばれる それは千マイルも離れています。

このとき、コードの堅牢性とスケーラビリティが関係しますが、フロントエンド開発者としては、ユーザーのトレーニングではなく、ページのユーザー エクスペリエンスが優れている必要があると個人的に考えています。次に、パーセンテージ + パディング、アスペクト比、その他のソリューションを使用してビジネス シナリオを実現します。

正方形の例を借りて、ここではキーコードのみを貼り付けます

パーセンテージ + パディングの実装

main {
    .shop {
        .shop-img {
            width: 100%;
            padding-top: 75%;
        }
    }
}

アスペクト比の実装

main {
    .shop {
        > img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
        }
    }
}

効果を見てください

2.15 リフローと再描画を理解するにはどうすればよいですか? どのような状況で発動するのでしょうか？

1. それは何ですか?

ではHTML、各要素はボックスとして理解できます。ブラウザの解析プロセス中に、リフローと再描画が行われます。

• リフロー: レイアウト エンジンは、さまざまなスタイルに基づいてページ上の各ボックスのサイズと位置を計算します。
• 再描画：ボックスモデルの位置、サイズなどの属性を計算した後、ブラウザは各ボックスの特性に従って描画します。

ブラウザーの具体的な解析およびレンダリングのメカニズムは次のとおりです。

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-dfKKrtqV-1683893248605)(null)]

• HTMLの解析、DOMツリーの生成、CSSの解析、CSSOMツリーの生成
• DOM ツリーと CSSOM ツリーを結合してレンダー ツリーを生成する
• レイアウト（リフロー）：生成されたレンダリングツリーに従い、リフロー（レイアウト）を実行し、ノードの幾何情報（位置、サイズ）を取得します。
• ペイント(再描画): レンダリングツリーとリフローで得られた幾何情報に従って、ノードの絶対ピクセルを取得します。
• ディスプレイ: ピクセルを GPU に送信し、ページ上に表示します。

ページの最初のレンダリング段階では、必然的にリフローがトリガーされます。これは、ページの先頭では空白の要素として理解でき、後で新しい要素が追加されてページ レイアウトが変更されます。

幾何学的サイズを変更する場合 (要素の幅と高さの変更、要素の非表示など)、ブラウザは要素の幾何学的プロパティを再計算し、計算結果を描画する必要がありDOMます。DOM

要素の変更によってスタイル (または)DOM が変更されるが、その幾何学的プロパティには影響しない場合、ブラウザは要素の幾何学的プロパティを再計算する必要はなく、要素の新しいスタイルを直接描画します。これはトリガーのみを行います。再描画colorbackground-color

2. トリガー方法

リフローと再描画の数を減らすには、まずリフローと再描画がどのようにトリガーされるかを理解します。

リフロートリガータイミング

リフローの段階では主にノードの位置と幾何情報を計算するため、ページ レイアウトや幾何情報が変更された場合は、次のようにリフローが必要になります。

• 表示される DOM 要素を追加または削除する
• 要素の位置が変わります
• 要素のサイズが変更されます (余白、内側の境界線、境界線のサイズ、高さと幅などを含む)
• テキストの変更や画像が異なるサイズの別の画像に置き換えられるなど、コンテンツの変更
• ページのレンダリングが開始されるとき (これは回避できません)
• ブラウザのウィンドウ サイズが変更されます (リフローではビューポートのサイズに基づいて要素の位置とサイズが計算されるため)

見落とされやすい操作もいくつかあります。特定の属性の値を取得するなどです。

offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

これらの属性には共通点が 1 つあり、その場で計算する必要があるということです。したがって、これらの値を取得するために、ブラウザもリフローします。

getComputedStyle 方法以外にも原理は同じです

再描画トリガーのタイミング

リフローをトリガーすると確実に再描画がトリガーされます

このページは黒板として理解でき、黒板には小さな花が描かれています。ここで、この花を左から右に移動したいと思います。次に、右側の特定の位置を決定し、形状を描画し (リフロー)、元の色をペイントする (再描画) 必要があります。

さらに、他にもいくつかの再描画動作があります。

• 色の変更
• テキストの向きの変更
• 影の修正

ブラウザ最適化メカニズム

再配置のたびに追加の計算消費が発生するため、ほとんどのブラウザは変更をキューに入れてバッチで実行することで再配置プロセスを最適化します。ブラウザは変更操作をキューに入れますが、一定時間が経過するか、操作がしきい値に達するまでキューは空になりません。

レイアウト情報の操作を取得すると、上記のメソッドを含めてキューが強制的に更新され、offsetTop最新のデータが返されます。

したがって、ブラウザはキューをクリアし、リフロー再描画をトリガーして正しい値を返す必要があります。

3. 削減方法

リフローをトリガーしてシーンを再描画する方法を学習しました。リフローを回避した経験を以下に示します。

• 要素のスタイルを設定したい場合は、要素のクラス名を変更しますclass（DOMツリーの最内層で可能な限り）。
• 複数のインライン スタイルを設定しないようにする
• (前の例で説明したように)position属性のfixed値を使用して、要素のアニメーションを適用します。absolute
• tableレイアウトの使用は避けてください。table変更内の各要素のサイズと内容によって全体のtable再計算が発生します。
• position: fixed/absolute複雑なアニメーションの場合は、その要素がドキュメント フローからできるだけ外れるように設定し、他の要素への影響を軽減します。
• css3 ハードウェア アクセラレーションを使用すると、transform、opacity、およびfiltersこれらのアニメーションがリフロー再描画を引き起こさないようにすることができます
• CSSJavaScript式を避ける

複数のノードを動的に挿入する場合に使用JavaScriptできます。DocumentFragment一度作成したら、一度挿入するだけで済みます。多重レンダリングのパフォーマンスを回避できます。

しかし、場合によっては、必然的にリフローまたは再描画が行われ、それらをより有効に活用できるようになります。

たとえば、要素のレイアウトを複数回変更する場合、次のことを行う可能性があります。

const el = document.getElementById('el')
for(let i=0;i<10;i++) {
    el.style.top  = el.offsetTop  + 10 + "px";
    el.style.left = el.offsetLeft + 10 + "px";
}

offset各サイクルでは複数の属性を取得する必要がありますが、これはさらに悪いことに、属性を変数の形式でキャッシュし、計算完了後にブラウザに送信して再計算リクエストを発行することができます。

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el') 
let offLeft = el.offsetLeft, offTop = el.offsetTop

// 在JS层面进行计算
for(let i=0;i<10;i++) {
  offLeft += 10
  offTop  += 10
}

// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

スタイルの変更を避け、クラス名を使用してスタイルをマージすることもできます。

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

クラス名を使用してスタイルを組み合わせる

<style>
    .basic_style {
        width: 100px;
        height: 200px;
        border: 10px solid red;
        color: red;
    }
</style>
<script>
    const container = document.getElementById('container')
    container.classList.add('basic_style')
</script>

前者は、個別に操作されるたびにレンダリング ツリーの変更をトリガーします (新しいブラウザーでは変更されません)。

レンダリング ツリーの変更をトリガーし、対応するリフローおよび再描画プロセスを実行します。

マージ後、すべての変更を一度に送信することを意味します

要素属性を設定してdisplay: noneページから要素を削除し、その後の操作を実行することもできます。これにより、リフローや再描画はトリガーされません。このプロセスはオフライン操作と呼ばれます。

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

オフライン操作後

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'

2.16 z-index 属性はどのような状況で失敗しますか?

通常、z-index は、重複する 2 つのラベルがあり、特定の状況下で、一方が他方の上または下に表示される場合に使用されます。z-index 値が大きいほど、レイヤーが高くなります。z-index 要素の位置属性は、相対、絶対、または固定である必要があります。

次の場合、z-index 属性は失敗します。

• 親要素の位置が相対的な場合、子要素の z-index は無効になります。解決策: 親要素の位置が絶対位置または静的位置に変更されます。
• 要素には、非静的属性に設定された位置属性がありません。解決策: 要素の位置属性を相対、絶対、または固定のいずれかに設定します。
• この要素は、z-index を設定するときに float も設定します。解決策: float を削除し、display：inline-block;に変更します。

20230116、友人が次のように追加しました。

• 携帯端末iOS 13システムで-webkit-overflow-scrolling:touchもz-index無効化してtouch置き換えますunset

具体的な理由については、次の記事を参照してください。「Z-index が機能しなくなったのはなぜですか?」

2.17 ネイティブ JS を使用して、次の効果を実現します。コンテナ内のアイコンをクリックすると、アイコンの境界線が境界線になります: 1 ピクセルの赤一色、空白をクリックしてリセットします

const box = document.getElementById('box');

function isIcon(target) {
 return target.className.includes('icon');
}

box.onclick = function(e) {
 e.stopPropagation();
 const target = e.target;
 if (isIcon(target)) {
   target.style.border = '1px solid red';
 }
}

const doc = document;

doc.onclick = function(e) {
 const children = box.children;
 for(let i = 0; i < children.length; i++) {
   if (isIcon(children[i])) {
     children[i].style.border = 'none';
   }
 }
}

2.18 位置: ブラウザ ウィンドウを基準にして位置を固定する必要がありますか?

不確かな。

position:fixed;要素は通常のドキュメント フローの外に移動され、要素用のスペースは確保されません。代わりに、要素の位置は、画面のビューポート (ビューポート) を基準とした要素の位置と、画面がスクロールされても要素は変化しません。fixedプロパティは新しいスタッキング コンテキストを作成します。

transform、perspectiveまたは要素の祖先のfilter属性が指定されている場合非 none、コンテナはビューポートからその祖先に変わります。

2.19 CSS セレクターとは何ですか? 優先事項は何ですか? 継承できるプロパティはどれですか?

1. セレクター

CSS セレクターは CSS ルールの最初の部分です

これは、要素と他の部分を組み合わせて、アプリケーション ルールの CSS プロパティの値としてどの HTML 要素を選択する必要があるかをブラウザーに伝える方法です。

セレクターで選択された要素を「セレクターオブジェクト」といいます。

Html構造から始めます

<div id="box">
	<div class="one">
	    <p class="one_1"></p>
	    <p class="one_1"></p>
	</div>
	<div class="two"></div>
	<div class="two"></div>
	<div class="two"></div>
</div>

一般的にcss使用される属性セレクターは次のとおりです。

1- id选择器（#box），选择id为box的元素
2- 类选择器（.one），选择类名为one的所有元素
3- 标签选择器（div），选择标签为div的所有元素
4- 后代选择器（#box div），选择id为box元素内部所有的div元素
5- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
6- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
7- 群组选择器（div,p），选择div、p的所有元素

あまり使用されないセレクターもいくつかあります。

• 疑似クラスセレクター

1:link ：选择未被访问的链接
2:visited：选取已被访问的链接
3:active：选择活动链接
4:hover ：鼠标指针浮动在上面的元素
5:focus ：选择具有焦点的
6:first-child：父元素的首个子元素

• 擬似要素セレクター

1:first-letter ：用于选取指定选择器的首字母
2:first-line ：选取指定选择器的首行
3:before : 选择器在被选元素的内容前面插入内容
4:after : 选择器在被选元素的内容后面插入内容

• 属性セレクター

1[attribute] 选择带有attribute属性的元素
2[attribute=value] 选择所有使用attribute=value的元素
3[attribute~=value] 选择attribute属性包含value的元素
4[attribute|=value]：选择attribute属性以value开头的元素

CSS3の新しいセレクターは次のとおりです。

• 階層セレクター (p~ul)、p 要素が先行するすべての ul 要素を選択します
• 疑似クラスセレクター

1:first-of-type 父元素的首个元素
2:last-of-type 父元素的最后一个元素
3:only-of-type 父元素的特定类型的唯一子元素
4:only-child 父元素中唯一子元素
5:nth-child(n) 选择父元素中第N个子元素
6:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
7:last-child 父元素的最后一个元素
8:root 设置HTML文档
9:empty 指定空的元素
10:enabled 选择被禁用元素
11:disabled 选择被禁用元素
12:checked 选择选中的元素
13:not(selector) 选择非 <selector> 元素的所有元素

• 属性セレクター

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

2. 優先順位

CSSセレクターの優先順位については誰もがよく知っていると思います。

インライン > ID セレクター > クラス セレクター > ラベル セレクター

特定の計算レベルでは、A、B、C、D の値によって優先度が決定され、その値の計算規則は次のとおりです。

• インライン スタイルが存在する場合は A = 1、それ以外の場合は A = 0
• B の値は、ID セレクターの出現数と同じです。
• C の値は、クラス セレクター、属性セレクター、および疑似クラスの合計出現数に等しくなります。
• D の値は、タグ セレクターと疑似要素の合計出現数に等しくなります。

以下に例を示します。

1#nav-global > ul > li > a.nav-link

上記のアルゴリズムを適用して、A B C D次の値を見つけます。

• インラインスタイルがないため、A = 0
• ID セレクターの合計 1 回の出現、B = 1
• クラス セレクターは 1 回出現し、属性セレクターは 0 回出現し、擬似クラス セレクターは 0 回出現するため、C = (1 + 0 + 0) = 1
• ラベル セレクターは 3 回出現し、擬似要素は 0 回出現するため、D = (3 + 0) = 3

上記で計算されたA、B、CはD次のように省略できます。(0, 1, 1, 3)

優先度の計算方法を理解した後、比較ルールを見てみましょう。

• 左から右に比較し、大きい方が優先されます
• それらが等しい場合は、比較のために 1 ビット右に移動し続けます
• 4 ビットすべてが等しい場合、後者が前者を上書きします。

上記の優先度の計算ルールの後、インライン スタイルの優先度が最も高いことがわかります。外部スタイルがインライン スタイルをオーバーライドする必要がある場合は、次のようにする必要があります。!important

3. 継承されたプロパティ

ではcss、継承とは、親要素にいくつかの属性を設定することを指し、子孫要素には自動的にこれらの属性が設定されます。継承属性に関しては、次のように分類できます。

• フォントファミリー属性

1font:组合字体
2font-family:规定元素的字体系列
3font-weight:设置字体的粗细
4font-size:设置字体的尺寸
5font-style:定义字体的风格
6font-variant:偏大或偏小的字体

• テキストシリーズのプロパティ

1text-indent：文本缩进
2text-align：文本水平对齐
3line-height：行高
4word-spacing：增加或减少单词间的空白
5letter-spacing：增加或减少字符间的空白
6text-transform：控制文本大小写
7direction：规定文本的书写方向
8color：文本颜色

• 要素の可視性

1visibility

• テーブルレイアウトのプロパティ

1caption-side：定位表格标题位置
2border-collapse：合并表格边框
3border-spacing：设置相邻单元格的边框间的距离
4empty-cells：单元格的边框的出现与消失
5table-layout：表格的宽度由什么决定

• リストプロパティ

1list-style-type：文字前面的小点点样式
2list-style-position：小点点位置
3list-style：以上的属性可通过这属性集合

• 引用

1quotes：设置嵌套引用的引号类型

• カーソルのプロパティ

1cursor：箭头可以变成需要的形状

継承におけるいくつかの特別なポイント:

• タグの文字色は継承できません
• h1～h6ラベルのフォントサイズは継承できません

継承されたプロパティはありません

• 画面
• テキスト属性: 垂直配置、テキスト装飾
• ボックス モデルのプロパティ: 幅、高さ、内側と外側のマージン、境界線など。
• 背景プロパティ: 背景画像、色、位置など。
• 位置決めプロパティ: float、clear float、position 位置など。
• コンテンツ属性の生成: コンテンツ、カウンタリセット、カウンタインクリメント
• アウトラインスタイル属性: アウトラインスタイル、アウトライン幅、アウトラインカラー、アウトライン
• ページスタイル属性: サイズ、改ページ前、改ページ後

2.20 BFC をトリガーする方法と、BFC にはどのようなアプリケーション シナリオがありますか?

書類の流れ

BFC を導入する前に、ドキュメント フローを紹介する必要があります。

私たちがよく言うドキュメントフローは、実際には定位流、 、浮动流の3 つのタイプに分類されます普通流。

絶対位置決め

要素の属性positionがabsoluteまたは の場合fixed、それは絶対配置要素です。

絶対配置レイアウトでは、要素全体が通常のフローから外れるため、絶対配置要素は兄弟要素に影響を与えず、要素の具体的な位置は絶対配置の座標によって決まります。

これは、そのブロックを含むブロック、関連する CSS プロパティ: top、bottom、left、right;に対して相対的に配置されます。

の場合position: absolute、要素の位置は最も近い親要素を基準とするrelative、fixed、absoluteか、存在しない場合は body を基準とします。

の場合position:fixed、通常はブラウザ ウィンドウを基準に配置されますが、要素の祖先のtransform属性がでない場合はnone、祖先を基準に配置されます。

浮く

フローティング レイアウトでは、要素は最初に通常のフローの位置に表示され、次にフローティング方向に従って可能な限り左または右にオフセットされます。その効果は、タイポグラフィーにおけるテキストの折り返しに似ています。

通常の流れ

通常のフローとは、実際には 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 中。

BFC的触发方式

MDN上对于BFC的触发条件写的很多，总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：

• 根元素，即 <html>
• 浮动元素：float 值为 left 、right
• overflow 值不为 visible，即为 auto、scroll、hidden
• display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 绝对定位元素：position 值为 absolute、fixed

BFC的特性

• BFC はページ上の独立したコンテナであり、コンテナ内の子要素は外部の要素に影響を与えません。
• BFC 内のブロックレベルのボックスが次々と垂直に配置されます
• 同じ BFC の下にある隣接するブロック レベルの要素ではマージンの崩壊が発生する可能性があり、新しい BFC を作成するとマージンの崩壊を回避できます。
• 浮動小数点数を使用している場合でも、各要素のマージン ボックス ( margin box) の左側が、それを含むブロックの境界ボックス ( ) の左側に接していますborder box(右から左への書式設定の場合はその逆)。
• フローティング ボックスの領域は BFC と重なりません。
• BFC の高さを計算するとき、浮遊要素も計算に参加します。

応用

BFC はページ上で分離された独立したコンテナーであり、コンテナー内の子要素は外部要素に影響を与えず、その逆も同様です。BFC のこの機能を使用して、さまざまなことができます。

適応型 2 列レイアウト

左側の列はフローティング (固定幅または可変幅が許容されます) で、右側の列では BFC が有効になっています。

<div>
    <div class="left">浮动元素，无固定宽度</div>
    <div class="right">自适应</div>
</div>
* {
    margin: 0;
    padding: 0;
}
.left {
    float: left;
    height: 200px;
    margin-right: 10px;
    background-color: red;
}
.right {
    overflow: hidden;
    height: 200px;
    background-color: yellow;
}

効果：

• 左の列を左にフロートするように設定し、他のブロックレベルの要素が同じ行を占有できるように、その列自体の高さを折りたたみます。
• 右側の列は div ブロック レベルの要素で、独自のフロー特性を使用して行全体を埋めます。
• 右列に overflow: hidden を設定すると、BFC 機能が左列のフローティング要素から分離され、行全体を占有しないようにトリガーされます。

これは上記の BFC の特徴の 1 つです。フローティング ボックスの面積は BFC と重なりません。

余白が重ならないようにする

兄弟要素間のマージンの重なり

<div>
    <div class="child1"></div>
    <div class="child2"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
.child1 {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
}
.child2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: green;
}

効果：

2 つのブロック レベル要素、赤い div は下から 10 ピクセル、緑の div は上から 20 ピクセルです。論理的には、2 つのブロック レベル要素間の距離は 30 ピクセルである必要がありますが、実際には距離が大きい方が採用されます。 、つまり 20px です。

ブロック レベル要素の上マージンと下マージンは、サイズが大きい方の 1 つの外側マージンにマージ (または折り畳まれ) されることがあります。この動作は、外側マージンの折りたたみ (オーバーラップ) と呼ばれます。これは、ブロック レベル間で発生することに注意してください。同じ BFC の下にある要素

BFC 機能によれば、新しい BFC を作成してもマージンの崩壊は発生しません。たとえば、2 つの div の外側のレイヤーにコンテナーのレイヤーをラップし、属性を追加してoverflow: hiddenBFC をトリガーした場合、2 つの div は同じ BFC に属しません。

<div>
    <div class="parent">
        <div class="child1"></div>
    </div>
    <div class="parent">
        <div class="child2"></div>
    </div>
</div>
.parent {
    overflow: hidden;
}

/* ... */

兄弟要素の外側のマージンをオーバーレイする問題については、BFC をトリガーする以外にも他の解決策があります。たとえば、上マージンまたは下マージンのみを均一に使用する場合、上記の問題は発生しません。

親要素と子要素の余白が重なっている

この条件は、親要素とその最初または最後の子要素 ​​(ネストされた要素) の間に存在します。

親要素とその最初/最後の子要素の間に境界線、パディング、インライン コンテンツがなく、ブロック フォーマット コンテキストが作成されない場合、またはクリア フロートが 2 つのマージンを区切っている場合、子要素のマージンは外側に「オーバーフロー」します。親要素。

<div id="parent">
  <div id="child"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
#parent {
    width: 200px;
    height: 200px;
    background-color: green;
    margin-top: 20px;
}
#child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 30px;
}

上に示したように、赤の div は緑の div の中にあり、margin-top30px に設定されていますが、赤の div の上部は緑の div の上部と一致しており、上から 30px ではなく、上にオーバーフローしていることがわかりました。計算のために親要素の外側にあります。つまり、親要素は上から20pxしか離れていないのですが、子要素のオーバーフローの影響で外余白が重なってしまい、大きい方の値を取ると上からの距離は30pxになります。

解決：

• 親要素の BFC をトリガーします (オーバーフロー: 非表示の追加など)
• 親要素に枠線を追加する
• 親要素にパディングを追加する

これにより、望ましい効果が得られます。

float をクリアして、親要素の高さが崩れる問題を解決します。

コンテナ内の子要素をフロートに設定すると、ドキュメント フローから外れ、コンテナ内の親要素の高さの合計は境界部分の高さのみになります。

<div class="parent">
  <div class="child"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
.parent {
    border: 4px solid red;
}
.child {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}

解決策: 親要素の BFC をトリガーして、BFC 特性を持つようにします。BFCの高さを計算するとき、浮動要素も計算に参加します。

.parent {
    overflow: hidden;
    border: 4px solid red;
}

上記の BFC のトリガーは実際に一般的に使用されてoverflow: hiddenいるため、誰もが使用しますが、BFC をトリガーする方法は複数あります。

float: left;上に書いたように、 、float: right;、display: inline-block;、overflow: auto;、 、、display: flex;、display: table;、 、、 、 などを設定すると、それらはすべてトリガーされますが、親要素の幅は同じではなく、親要素の高さが引き伸ばされる可能性があります。positionabsolutefixed

もちろん、実際の用途は、適当に選ぶのではなく、シーンに応じて選ぶことになります。

2.21 CSS エンジニアリングの理解について話す

CSS は、次の問題を解決するように設計されています。

1. マクロ設計：CSSコードをどう整理するか、分割するか、モジュール構造をどう設計するか？
2. コーディングの最適化: より良い CSS を書くには?
3. ビルド: 最適にパックするには CSS をどうすればよいですか?
4. 保守性: コードを作成した後、その後の変更コストを最小限に抑えるにはどうすればよいでしょうか? 同僚の誰かが簡単に引き継ぎできるようにするにはどうすればよいでしょうか?

次の 3 つの方向は、一般的で普遍的な CSS エンジニアリングの実践です。

• プリプロセッサ: Less、Sass など。
• 重要なエンジニアリング プラグイン: PostCss。
• Webpack ローダーなど

これら 3 つの方向に基づいて、いくつかの典型的な部分問題を導き出すことができます。ここでは、それらを 1 つずつ見ていきます。

(1) プリプロセッサ: なぜプリプロセッサを使用するのでしょうか? それはどのような問題を解決すると思われますか?

プリプロセッサは実際には CSS 世界の「車輪」です。プリプロセッサを使用すると、実際には CSS ではない CSS に似た言語を記述し、それを CSS コードにコンパイルできます。

では、なぜよく書かれた CSS コードを書くのか、なぜ「CSS っぽい」ものを書きたいのでしょうか。これはすべての機能を JS で実現するのと同じですが、最終的には React の jsx や Vue のテンプレート構文を書くのと同じです。

フロントエンド ビジネスの複雑化に伴い、フロントエンド エンジニアリングにおける CSS に対して次の要件が提起されています。

1. マクロ設計: CSS ファイルのディレクトリ構造を最適化し、既存の CSS ファイルを再利用したいと考えています。
2. コーディングの最適化: 明確な構造、簡潔で理解しやすい CSS を記述できることを望んでおり、無差別な 1 対 1 の記述方法ではなく、明確なネストされた階層関係を持つ必要があり、変数が含まれることを望んでいます。特性、計算機能、およびループ機能 より強力なプログラマビリティを待ち、無駄なコードを少なく書けるようになります。
3. 保守性の面では、プログラマビリティの向上はコード構造の改善、再利用の実現はディレクトリ構造の簡素化と拡張性の強化、この2点が実現できれば、必然的に保守性も向上します。

この 3 点は従来の CSS ではできないことであり、プリプロセッサが解決する問題です。プリプロセッサには通常、次の機能があります。

• コードをネストして、ネストを通じてさまざまな CSS 属性間の階層関係を反映する機能。
• CSS 変数の定義のサポート。
• 計算機能を提供します。
• コードスニペットの拡張と混合を可能にします。
• ループステートメントの使用をサポートします。
• 再利用のための CSS ファイルのモジュール化をサポートします。

(2) PostCss: PostCss はどのように機能しますか? どのようなシナリオで PostCss を使用しますか?

プリプロセッサとの違いは、プリプロセッサは CSS のように処理するのに対し、PostCss は CSS 自体を処理することです。Babel は、高バージョンの JS コードを低バージョンの JS コードに変換できます。PostCss も同様のことを行います。ブラウザーでまだ広くサポートされていない高度な CSS 構文をコンパイルでき、追加の互換性を必要とする一部の構文にプレフィックスを自動的に追加できます。さらに、PostCss は強力なプラグイン機構を備えているため、さまざまな拡張機能をサポートしており、CSS の機能が大幅に強化されています。

ビジネスにおける PostCss の使用シナリオは数多くあります。

• CSS コードの可読性の向上: PostCss は、プリプロセッサが実行できることと同様のジョブを実際に実行できます。
• CSS コードを低バージョンのブラウザに適応させる必要がある場合、PostCss Autoprefixerプラグインを使用すると、ブラウザのプレフィックスを自動的に増やすことができます。
• 将来性のある CSS を作成できるようにします。PostCss は、次の CSS コードのコンパイルに役立ちます。

(3) WebpackはCSSを扱えますか? どうやって達成するのか？

• Webpack は streaking の状態では CSS を処理できません。Webpack 自体は JavaScript 向けのモジュール式パッケージング ツールであり、JavaScript コードのみを処理できます。
• ローダーの助けを借りて、Webpack は CSS を処理できます。

Webpack を使用して CSS 処理を実装する方法:

• Webpack で CSS を操作するには、css-loader と style-loader という 2 つの主要なローダーが必要です。
• 「何を使用するか」に答えるだけでは不十分な場合があることに注意してください。面接官は、あなたが答えを暗記しているかどうか疑問に思うでしょう。そのため、各ローダーが何を行うのかについても知っておく必要があります。
  • css-loader: CSS モジュールをインポートし、CSS コードをコンパイルして処理します。
  • style-loader: スタイル タグを作成し、CSS コンテンツをタグに書き込みます。

実際に使用する場合は、css-loader の実行順序を style-loader より前に配置する必要があります。CSS コードはコンパイル プロセスが完了した後にのみ挿入できるため、コンパイルされていないコードが事前に挿入されていれば、Webpack はこれを理解できず、間違いを犯すことはありません。

2.22 位置を変更するために、position を使用する代わりに、translate を使用することがあるのはなぜですか?

translation は、transform プロパティの値です。

変換または不透明度を変更しても、ブラウザのリフローまたは再ペイントはトリガーされず、コンポジションのみがトリガーされます。

また、絶対位置を変更すると再レイアウトがトリガーされ、さらに再描画と複合がトリガーされます。

変換によりブラウザは要素の GPU レイヤーを作成しますが、絶対位置の変更には CPU が使用されます。

したがって、translate() はより効率的であり、スムーズなアニメーションの描画時間を短縮できます。

移動によって位置が変更されると、要素は引き続き元のスペースを占有しますが、絶対配置ではこのようなことは起こりません。

具体的な原則については、【フロントエンド基礎シリーズ】CSS編～「ハードウェアアクセラレーション」を理解する～をご覧ください。

2.23 ハードウェア アクセラレーションの原理は何ですか?

インタビュー中に、アニメーションのフリーズを解決する方法という問題に遭遇することがよくあります。その後、ハードウェア アクセラレーションについて説明されます。では、ハードウェア アクセラレーションとは正確には何ですか?また、なぜアニメーションの効率を向上させることができるのでしょうか? 今日調べてみましょう。

まずはCPUとGPUから見ていきましょう。

CPUとGPUの違い

CPUつまり、中央処理装置、GPUつまりグラフィックス処理装置です。

CPU是计算机的大脑，它提供了一套指令集，我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码，然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段，叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五步，这是一个指令周期。CPU会不断的执行指令周期来完成各种任务。

GPU，是Graphics ProcessingUnit的简写，是现代显卡中非常重要的一个部分，其地位与CPU在主板上的地位一致，主要负责的任务是加速图形处理速度。GPU是显卡的“大脑”，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。

要解释两者的区别，要先明白两者的相同之处：两者都有总线和外界联系，有自己的缓存体系，以及数字和逻辑运算单元。

一句话，两者都为了完成计算任务而设计。

两者的区别在于存在于片内的缓存体系和数字逻辑运算单元的结构差异：

• CPU虽然有多核，但总数没有超过两位数，每个核都有足够大的缓存和足够多的数字和逻辑运算单元，并辅助有很多加速分支判断甚至更复杂的逻辑判断的硬件；
• GPU 的核数远超CPU，被称为众核（NVIDIA Fermi有512个核）。每个核拥有的缓存大小相对小，数字逻辑运算单元也少而简单（GPU初始时在浮点计算上一直弱于CPU）。

从结果上导致CPU擅长处理具有复杂计算步骤和复杂数据依赖的计算任务，如分布式计算，数据压缩，人工智能，物理模拟，以及其他很多很多计算任务等。

GPU由于历史原因，是为了视频游戏而产生的（至今其主要驱动力还是不断增长的视频游戏市场），在三维游戏中常常出现的一类操作是对海量数据进行相同的操作，如：对每一个顶点进行同样的坐标变换，对每一个顶点按照同样的光照模型计算颜色值。

GPU的众核架构非常适合把同样的指令流并行发送到众核上，采用不同的输入数据执行。在通用计算领域有广泛应用，包括：数值分析，海量数据处理（排序，Map-Reduce等），金融分析等等。

简而言之，当程序员为CPU编写程序时，他们倾向于利用复杂的逻辑结构优化算法从而减少计算任务的运行时间，即 Latency。当程序员为GPU编写程序时，则利用其处理海量数据的优势，通过提高总的数据吞吐量（Throughput）来掩盖 Lantency。

目前，CPU 和 GPU 的区别正在逐渐缩小，因为GPU也在处理不规则任务和线程间通信方面有了长足的进步。

每一帧的执行步骤

一般浏览器的刷新率为60HZ，即1秒钟刷新60次。

1000ms / 60hz = 16.6 ，也就是大概每过 16.6ms 浏览器就会渲染一帧画面。

浏览器对每一帧画面的渲染工作都要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

简单概括下，浏览器在每一帧里会依次执行以下这些动作：

• JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
• Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
• Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
• Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
• Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

減らすか回避すると、ページの詰まりが軽減され、アニメーション効果がよりスムーズになりますlayout。paint

完全なレンダリングプロセス

より具体的には、完全なレンダリング ステップは次のように大まかに要約できます。

• レンダリング プロセスでは、HTML コンテンツが人間が判読できる DOM ツリー構造に変換されます。
• レンダリング エンジンは、CSS スタイル シートをブラウザが理解できるものに変換しstyleSheets、DOM ノードのスタイルを計算します。
• レイアウト ツリーを作成し、要素のレイアウト情報を計算します。
• レイアウトツリーを階層化し、階層ツリーを生成します。
• 各レイヤーの描画リストを生成し、それを合成スレッドに送信します。
• 合成スレッドはレイヤーをタイルに分割し、タイルをラスタライザー スレッド プール内のビットマップに変換します。
• 合成スレッドは、描画タイル コマンド DrawQuad をブラウザ プロセスに送信します。
• ブラウザプロセスはDrawQuadメッセージに従ってページを生成し、モニターに表示します。

通常レイヤーと複合レイヤー

上記の導入部分では、compositeこの概念について言及しています。

ブラウザによってレンダリングされるレイヤーには、一般に次の 2 つのカテゴリが含まれることが簡単に理解できます渲染图层（普通图层）。复合图层

• レンダリング レイヤー: デフォルトの複合レイヤーとも呼ばれ、ページの一般的なドキュメント フローです。絶対配置、相対配置、およびフローティング配置を使用してドキュメント フローから切り離すことができますが、それでもデフォルトの複合レイヤーに属し、同じ描画コンテキスト オブジェクト ( ) を共有しますGraphicsContext。
• リソースを個別に割り当てる複合レイヤー (もちろん、通常のドキュメント フローからも切り離されます。そのため、この複合レイヤーにどのような変更があったとしても、デフォルトの複合レイヤーでのリフロー再描画には影響しません)。

一部の特別なレンダー レイヤはコンポジット レイヤ ( ) に昇格されCompositing Layers、コンポジット レイヤには別のレンダ レイヤがありGraphicsLayer、コンポジット レイヤではない他のレンダ レイヤはGraphicsLayer最初の親レイヤと 1 つを共有します。

それぞれGraphicsLayerに 1 つありGraphicsContext、GraphicsContextこのレイヤーのビットマップの出力を担当します。ビットマップは共有メモリに保存され、テクスチャとして GPU にアップロードされます。最後に、GPU は複数のビットマップを合成して、画面に描画します。このとき、 , そして私たちのページが画面に表示されます。

ご覧のとおりChrome源码调试 -> More Tools -> Rendering -> Layer borders、黄色のものは複合レイヤー情報です。

ハードウェアアクセラレーション

ハードウェア アクセラレーションは、直感的に言えば、グラフィック レンダリングのアクセラレーションを実現するために GPU に依存します。ソフトウェア アクセラレーションとハードウェア アクセラレーションの違いは主に、グラフィック レンダリングが GPU によって処理されるか CPU によって処理されるかです。GPU の場合、ハードウェア アクセラレーションと見なされます。 -高速レンダリング、それ以外の場合はソフトウェア レンダリングです。

一般に、ハードウェア アクセラレーションを有効にすると、要素は通常のドキュメント フローから独立した複合レイヤーになり、変更後にページ全体の再描画が回避され、パフォーマンスが向上します。

一般的に使用されるハードウェア アクセラレーション方法は次のとおりです。

• 最も一般的な方法: translate3d、translateZ
• opacity属性/遷移アニメーション (アニメーションの実行プロセス中に複合レイヤーが作成され、アニメーションが開始または終了しなかった後、要素は前の状態に戻ります)
• will-change属性 (このナレッジ ポイントは比較的離れたところにあります) は、一般的opacityにtranslate組み合わせて使用​​されます (テスト済みですが、ハードウェア アクセラレーションを引き起こす可能性がある上記の属性を除き、他の属性は複合レイヤーになりません)。この機能は、ブラウザーに通知することです。変更に進むと、ブラウジングが可能になります。コンパイラーは最適化作業を開始します (これは使用後に解放するのが最適です)。
• <video>、<iframe>、<canvas>、<webgl>およびその他の要素
• flashその他、以前のプラグインなど

もちろん、ハードウェア レンダリングを強制的にトリガーしたい場合もあります。次のような上記のプロパティを使用できます。

1will-change: transform; 

または

1transform:translate3d(0, 0, 0);

ハードウェア アクセラレーションの使用に関する考慮事項

ハードウェア アクセラレーションの使用は、次のように完璧なものではありません。

• メモリ。特にモバイル ブラウザーで GPU が大量のテクスチャを読み込む場合、コンテンツの問題が発生しやすくなります。そのため、ページのすべての要素にハードウェア アクセラレーションを使用しないように注意してください。
• GPU を使用したレンダリングは、フォントのアンチエイリアスに影響を与える可能性があります。これは、GPU と CPU のレンダリング メカニズムが異なるためです。ハードウェア アクセラレーションが最終的に停止したとしても、アニメーション中はテキストがぼやけて表示されます。

したがって、複合レイヤーを大量に使用しないでください。そうしないと、過剰なリソース消費によりページがさらにスタックする可能性があります。

z-index同時に、ハードウェア アクセラレーションを使用する場合は、ブラウザがデフォルトで後続の要素の複合レイヤー レンダリングを作成しないように、できるだけハードウェア アクセラレーションを使用してください。

具体的な原則は次のとおりです。

Webkit CSS3 では、ハードウェア アクセラレーションが要素に追加され、z-indexそのレベルが比較的低い場合、この要素の背後にある他の要素 (この要素よりも高いレベル、または同じ、またはreleative同じabsolute属性) がデフォルトで複合レイヤーになります。 、適切に扱わないと、パフォーマンスに大きな影響を与える可能性があります。

これを簡単に理解すると、実際には暗黙的な合成の概念と考えることができます。a が複合レイヤーで、b が a の上にある場合、b も暗黙的に複合レイヤーに変換されるため、特別な注意が必要です。

2.24 CSSアニメーションとJSアニメーションの長所と短所は何ですか?

CSSアニメーション

アドバンテージ

• ブラウザでアニメーションを最適化できる
• コードは比較的シンプルで、パフォーマンスチューニングの方向性は固定されています
• フレーム レートのパフォーマンスが低い低バージョンのブラウザの場合、CSS3自然な低下が発生する可能性がありますが、JS追加のコードを記述する必要があります。

欠点がある

• 実行中のプロセスの制御が弱く、イベントバインディングのコールバック関数を付けることができない
• CSSコードが長いので、もう少し複雑なアニメーションを実現するために使用すると、最終的にはCSS非常に面倒なコードになります。

JSアニメーション

アドバンテージ

• 制御能力は非常に強力で、アニメーションの再生プロセス中にアニメーションを制御できます。開始、一時停止、再生、終了、キャンセルがすべて可能です。
• アニメーション効果はcss3アニメーションよりも豊富で、曲線モーション、ショックフリッカー、視差スクロール効果などの一部のアニメーション効果はjsアニメーションでのみ完成させることができます。
• CSS3互換性の問題はありますが、JSほとんどの場合、互換性の問題はありません

欠点がある

• CSSコードはアニメーションよりも複雑です
• JavaScriptブラウザのメイン スレッドで実行され、JavaScriptメイン スレッドで実行する必要がある他のスクリプト、スタイル計算、レイアウト、描画タスクなどが存在します。干渉するとスレッドがブロックされ、フレーム損失が発生する可能性があります。

2.25 フロントエンドでアニメーションを実装するにはどのような方法がありますか?

フロントエンドで一般的に使用されるアニメーション実装メソッドは次のとおりです。

1. css3transitionプロパティ
2. css3animationプロパティ
3. ネイティブJSアニメーション
4. canvas描画アニメーションを使用する
5. SVGアニメーション
6. JQueryanimate関数
7. GIF画像を使用する

1.css3transition

transition属性:

スタイルの設定に使用されるプロパティ値が、ある状態から別の状態にスムーズに移行する方法

文法：

1transition: property duration timing-function delay;

transitionは短縮形の属性であり、4 つの遷移属性に分割できます。このように書くこともできますし、 、、、このように書くことtransition: 值1，值2，值3，值4もできます。transition-property: 值1;transition-duration:值2;transition-timing-function:值2;transition-delay:值4;

価値	説明する
遷移プロパティ	トランジション効果を設定する CSS プロパティの名前を指定します。
移行期間	移行が完了するまでにかかる秒数またはミリ秒数を指定します。
遷移タイミング関数	ベロシティエフェクトのベロシティカーブを指定します。
遷移遅延	トランジション効果がいつ開始されるかを定義します。

デモコード:

<div></div>

div{
  width:50px;
  height: 50px;
  background-color: pink;
}

div:hover{
  width:200px;
}

レンダリング:

上の図から、マウスが出入りすると、width状態の変更が瞬時に完了することがわかります。

追加transition: 1s;後

div{
  width:50px;
  height: 50px;
  background-color: pink;
  transition: 1s;
}
div:hover{
  width:200px;
}

レンダリング:

transition: 1s;width属性状態変化の遷移時間を1秒に設定します。

transition`属性默认为：`transition: all 0 ease 0;
transition:1s;` 等价于 `transition: all 1s ease 0;

2.css3animation

animation属性: Flash のフレーム単位のアニメーションに似ています。勉強したことのある学生flashならわかると思いますが、このコマ送りアニメーションはキーフレームで構成されており、多数のキーフレームを連続再生することでアニメーションが構成されます。 では、コマ送りアニメーションは 属性 によって完成しますCSS3。keyframes

animation属性とtransition属性の違い:

• transitionアニメーションの開始状態と終了状態を指定するだけで、アニメーション プロセス全体が特定の関数によって制御されるため、心配する必要はありません。
• animationアニメーション処理の各キーフレームを設定できます

デモコード:

<div></div>

1div{
	width:50px;
	height:50px;
	background-color: pink;
}
div:hover{
	animation: change1 5s;
}
@keyframes change1{
	25%  {width:130px;background-color: red;}
	50%  {width:170px;background-color: blue;}
	75%  {width:210px;background-color: green;}
	100% {width:250px;background-color: yellow;}
}

レンダリング:

3. ネイティブJSアニメーション

主なアイデアは、setInterval メソッドまたは setTimeout メソッドのコールバック関数を通じて要素の CSS スタイルを継続的に呼び出して変更し、要素スタイルの変更の効果を実現することです。

アニメーションを Javascript で実装すると、通常、ページの並べ替えと再描画が頻繁に行われ、パフォーマンスが消費されるため、通常はデスクトップ ブラウザで使用する必要があります。モバイル端末で使用すると明らかに遅延が発生します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #rect {
            width: 200px;
            height: 200px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="rect"></div>
    <script>
        let elem = document.getElementById('rect');
        let left = 0;
        let timer = setInterval(function(){
            if(left<window.innerWidth-200){
                elem.style.marginLeft = left+'px';
                left ++;
            }else {
                clearInterval(timer);
            }
        },16);
    </script>
</body>
</html>

上の例では、設定した setInterval 時間間隔は 16ms です。人間の目で認識できる滑らかなアニメーションは 1 秒あたり 60 フレームであると一般に考えられており、ここでの 16 ミリ秒は (1000 ミリ秒/60) フレームよりわずかに小さいですが、一般的にアニメーションは滑らかです。

多くのモバイル側アニメーションのパフォーマンスを最適化する場合、継続的にトリガーされるブラウザー イベントの調整と処理に通常 16 ミリ秒が使用されます。たとえば、touchmove イベントやスクロール イベントを抑制します。このように連続イベントのトリガー頻度を減らすことで、アニメーションの流暢性を大幅に向上させることができます。

4.canvas描画アニメーションの使用

H5 の新しい要素である Canvas は、Web API を利用してアニメーションを実現します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="700" height="550"></canvas>
    <script type="text/javascript">
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let left = 0;
        let timer = setInterval(function(){
            ctx.clearRect(0,0,700,550);
            ctx.beginPath();
            ctx.fillStyle = "#ccc";
            ctx.fillRect(left,0,100,100);
            ctx.stroke();
            if(left>700){
                clearInterval(timer);
            }
            left += 1;
        },16);
    </script>
</body>
</html>

注: getContext() を通じて要素の描画オブジェクトを取得し、clearRect を通じてキャンバスを常にクリアし、fillStyle を使用して新しい位置に新しい長方形のコンテンツを描画して、ページ アニメーション効果を実現します。

Canvas の主な利点は、ページ上の複数のアニメーション要素のレンダリングの遅さに対処でき、JavaScript を通じてアニメーションの実行を完全にレンダリングおよび制御できることです。より複雑なアニメーションを実装するために使用できます。

5.SVGアニメーション

SVG は XML ベースの画像形式で、HTML の仕組みとよく似ています。これは、マークアップで組み合わせて 2 次元の図形を作成できる、よく知られた多くの幾何学的形状のさまざまな要素を定義します。

同じ高解像度のテクスチャ、ベクトルグラフィックスは拡大することを恐れず、小さなサイズです。

ここで注意すべき点の 1 つは、SVG は点、線、および面の情報を保存するため、解像度やグラフィック サイズとは関係がなく、画像の複雑さのみに関係するため、画像ファイルが占有するストレージ スペースは通常より小さくなるということです。 pngよりも。

SVG アニメーションの利点:

• SVG画像はXML（Extensible Markup Language[英語：Extensible Markup Language、略称：XML]）マークアップを使用しているため、SEOとアクセシビリティを最適化するための鋭いツールです。マークアップとは、コンピュータが理解できる情報記号を指します。このマークアップを通じて、コンピュータはさまざまな情報を含む記事を処理できますなど）、ブラウザは、特定のスペースを事前定義されたピクセルで埋めるのではなく、描画することによって各点と線を印刷します。これにより、SVG 画像がさまざまな画面サイズや解像度に適応できるようになります。
• SVG 画像は XML で定義されているため、JPG や PNG 画像よりも柔軟性があり、CSS と JavaScript を使用して操作できます。SVG 画像設定には CSS と JavaScript を含めることができます。React や Vue などのデータ駆動型ビューのフレームワークの下では、SVG 操作がさらに快適になります。(以下では、私たちのプロジェクトでの小さな SVG アニメーションの実践を共有します)
• アプリケーション レベルでは、SVG はマスキングやトリミング、フィルターの適用などのいくつかの画像編集効果を提供します。SVG は単なるテキストなので、GZip を使用して効果的に圧縮できます。

6. JQueryanimate()メソッド

• animate()CSSメソッドを使用して、プロパティ セットのカスタム アニメーションを実行します。
• このメソッドは、CSS スタイルを介して要素をある状態から別の状態に変更します。
• アニメーション効果を作成できるように、CSS プロパティの値が徐々に変更されます。
• アニメーションできるのは数値のみです（「margin:30px」など）。文字列値（「 」などbackground-color:red）はアニメーション化できません。

コードデモ:

<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height:"300px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height:"100px"});
    });
});

レンダリング:

7.gif画像を使用する

誰もがgif画像に触れたことがあるはずですが、フロントエンドでの使用も非常に簡単です。

要約:

• コードの複雑さの観点から見た単純なアニメーション:cssコードの実装はより単純になり、jsより複雑になります。複雑なアニメーションの場合:cssコードが冗長になり、js実装が改善されます。
• アニメーションの実行中、アニメーションの制御の程度は js比較的柔軟です。アニメーションの一時停止、キャンセル、終了などのcssアニメーションを制御できます。イベントを追加することはできず、トランジション アニメーションを実行するように設定できるのは固定ノードのみです。
• 互換性 ほとんどの場合、cssブラウザの互換性の問題はありません。js
• 性能方面 css动画相对于优一些，css 动画通过GUI解析js动画需要经过js引擎代码解析，然后再进行 GUI 解析渲染。

2.26 为何CSS不支持父选择器？

这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。

浏览器解析HTML文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后主体内容再出现的加载情况。

但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？于是，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。加载多少HTML就可以渲染多少HTML，在网速不是很快的时候，就显得尤为的必要。比方说你现在看的这篇文章，只要文章内容加载出来就可以了，就算后面的广告脚本阻塞了后续HTML文档的加载，我们也是可以阅读和体验。但是，如果支持父选择器，则整个文档不能有阻塞，页面的可访问性则要大大降低。

有人可能会说，要不采取加载到哪里就渲染到哪里的策略？这样子问题更大，因为会出现加载到子元素的时候，父元素本来渲染的样式突然变成了另外一个样式的情况，体验非常不好。

“相邻选择器只能选择后面的元素”也是一样的道理，不可能说后面的HTML加载好了，还会影响前面HTML的样式。

所以，从这一点来讲，CSS支持“父选择器”或者“前兄弟选择器”的可能性要比其他炫酷的CSS特性要低，倒不是技术层面，而是CSS和HTML本身的渲染机制决定的。当然，以后的事情谁都说不准，说不定以后网速都是每秒几个G的，网页加载速度完全就忽略不计，说不定就会支持了。

2.27 脱离文档流有哪些方法？

一、什么是文档流？

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

理解するのは難しくありません。HTML のすべての要素はボックス モデルです。ボックス モデルは一定のスペースを占め、HTML 内に順番に配置されてドキュメント フローを形成します。

次に、文書フローから外れたものは何でしょうか?

要素がドキュメント フローから離れると、ドキュメント フロー内のスペースを占有しなくなりますが、フローティング状態になります (ドキュメント フローの上に浮いていると理解できます)。ドキュメント フローからの要素の配置は、通常のドキュメント フローに基づいています。要素がドキュメント フローから離れると、ドキュメント フロー内に残っている他の要素はその要素を無視し、元のスペースを埋めます。

3. 文書フローから抜け出すにはどうすればよいですか?

浮く

ドキュメント フローから抜け出すには、float を使用します。

知らせ！！！: float を使用してドキュメント フローから離れると、他のボックスはこの要素を無視しますが、他のボックス内のテキストは依然としてこの要素のためのスペースを確保し、その要素を囲みます。

絶対

Absolute は絶対配置と呼ばれます。実際、ブロガーは相対配置と呼ぶべきだと考えています。これは、絶対を使用してドキュメント フローから切り離された後の要素は、要素の親クラス (直接の親クラスの場合はそれ以上) に対して相対的なためです。要素が条件を満たしていない場合は、位置決めのために上向きの ) 要素のクエリを続行します。この親要素の位置は非静的位置決めである必要があります (静的がデフォルトの位置決め方法です)。

修理済み

ドキュメント フローから完全に外れ、ブラウザ ウィンドウを基準にして配置されます。(ブラウザ ウィンドウを基準としたものは、HTML を基準としたものです)。

2.28 CSS スプライトとは何ですか?またその使用方法は何ですか?

とは

CSS スプライトは、Web ページの画像アプリケーションを処理する方法です。これは、Web ページ内のいくつかの背景画像を 1 つの画像ファイルに統合し、CSS の「background-image」、「background-repeat」、および「background-image」の組み合わせを使用します。位置」 背景の位置。

アドバンテージ

その利点は次のとおりです。

• Web ページの http リクエストを減らしてパフォーマンスを向上させることも、CSS スプライトの最大の利点であり、CSS スプライトが広く普及し、適用される主な理由です。
• 画像のバイトを削減します。1 つの画像に結合された複数の画像のバイトは、複数の画像のバイトの合計より小さくなります。
• 命名の問題の軽減: 画像のコレクションに名前を付けるだけで済み、小さな要素にすべて名前を付ける必要がなく、生産効率が向上します。
• スタイルの変更が簡単: 1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できるため、保守がより便利になります。

欠点がある

CSS スプライトが非常に強力であることは事実ですが、無視できない欠点もいくつかあります。

• 画像合成はさらに面倒です。
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

2.29 html和css中的图片加载与渲染规则是什么样的？

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。

浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。

简单的归纳就是浏览器渲染Web页面大约会经过六个过程：

• 解析HTML，构成DOM树
• 解析加载的样式，构建样式规则树
• 加载JavaScript，执行JavaScript代码
• DOM树和样式规则树进行匹配，构成渲染树
• 计算元素位置进行页面布局
• 绘制页面，最终在浏览器中呈现

是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：

• 解析HTML时，如果遇到img或picture标签，将会加载图片
• 解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
• 加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中
• DOM ツリーがスタイル ルールに一致する場合にレンダリング ツリーを構築し、DOM ツリー ノードがスタイル ルールの backgorund-image に一致する場合、背景画像が読み込まれます。
• レイアウト用の要素（画像）の位置を計算します
• 画像のレンダリングを開始すると、ブラウザがレンダリングされた画像をレンダリングします。

上記ではブラウザのページ レンダリング メカニズムが適用されていますが、画像の読み込みとレンダリングには依然として一定のルールがあります。ページ上のすべての (または画像) 要素が、background-image によって導入された画像と背景画像を読み込むわけではないためです。次に、実際にいつロードされるのか、ロード ルールは何なのかという新たな疑問が生じます。

少し要約すると、次のようになります。

Web ページ内のすべての画像が読み込まれてレンダリングされるわけではありません。

先ほど紹介したブラウザの読み込みとレンダリングのメカニズムによれば、次のように要約できます。

• そして、background-imageを持つ要素がdisplay:noneに遭遇すると、画像はロードされますが、レンダリングされません。
• 、および、background-image を設定する要素の祖先要素に display:none を設定すると、background-image はレンダリングまたはロードされませんが、img および pictach によって導入されたピクチャはレンダリングされませんが、ロードされます。
• と、background-image が同じパスと同じ画像ファイル名をインポートすると、画像は 1 回だけロードされます。
• スタイルファイルのbackground-imageによって導入された画像がDOM要素と一致しない場合、画像はロードされません
• 疑似クラスによって導入される背景画像 (hover など)。疑似クラスがトリガーされた場合にのみ、画像がロードされます。

2.30 BFCとは何ですか?

BFC: ブロックフォーマットコンテキスト、ブロックレベルフォーマットコンテキスト。

BFC は、Web ページの視覚的な CSS レンダリングの一部であり、ブロック ボックスのレイアウト プロセスが発生し、フローティング要素が他の要素と対話する領域です。

位置決めスキーム:

• 内側のボックスは縦方向に順番に配置されます。
• Box の垂直方向の距離はマージンによって決まり、同じ BFC に属する 2 つの隣接する Box のマージンは重なり合います。
• 各要素のマージン ボックスの左側は、それを含むブロックの境界ボックスの左側に接しています。
• BFC の領域はフロート ボックスと重なりません。
• BFC はページ上で分離された独立したコンテナーであり、コンテナー内の子要素は外部の要素に影響を与えません。
• BFC の高さを計算する場合、浮動要素も計算に参加します。

BFC は、次の条件のいずれかが満たされた場合にトリガーされます。

• ルート要素、つまり html
• float の値は None (デフォルト) ではありません
• オーバーフローの値は表示されません (デフォルト)
• 表示値は、table-cell、table-caption、inline-block、flex、または inline-flex のいずれかです。
• 位置の値は絶対または固定です

2.31 不透明度：0、可視性：非表示、表示：なしの分析と比較メリット・デメリットと適用可能なシナリオ

構造

display:none: 要素はレンダリング ツリーから完全に消え、レンダリング時にスペースを占有せず、クリックできなくなります。

可視性: 非表示: 要素はレンダリング ツリーから消えず、レンダリング要素はスペースを占有し続けますが、コンテンツは非表示でクリックできません。

不透明度: 0: 要素はレンダリング ツリーから消えず、レンダリング要素はスペースを占有し続けますが、コンテンツは非表示になり、クリックできます。

継承する

display: none と opacity: 0: は非継承属性であり、子孫ノードの消失はレンダリング ツリーからの要素の消失によって引き起こされ、子孫ノードの属性を変更することによって表示することはできません。

Visibility:hidden:は継承属性であり、hiddenの継承により子孫ノードは消滅しますが、visible:visibleとすることで子孫ノードを明示することができます。

パフォーマンス

displaynone : 要素を変更するとドキュメントがリフローされ、スクリーン リーダーは display: none 要素のコンテンツを読み取らないため、パフォーマンスが大幅に消費されます。

Visibility:hidden: 要素を変更すると、要素が再描画されるだけで、パフォーマンスの消費が少なくなります。スクリーン リーダーは、visibility: hidden 要素の内容を読み取ります。

opacity: 0 : 要素を変更すると再描画が発生し、パフォーマンスの消費が少なくなります

2.32 Atom CSS とは何ですか?

アトム CSS: アトミック CSS は、クラスが 1 つのことだけを実行することを意味します。

一般的に使用される BEM ルールとは異なり、アトミック CSS は分割されており、すべての CSS クラスに固有の CSS ルールがあります。たとえば次のように

.w-full{
  width:100%;
}
.h-full{
  height:100%;
}

しかし、このようなものではありません

.w&h-full{
  width:100%;
  height:100%;
}

使うときはクラス名を直接書くだけです

<html>
	<body>
    	<div id="app" class="w-full h-full">
        </div>
	</body>
</html>

アトミック CSS の長所と短所

• アドバンテージ
  • CSS ボリュームの削減と CSS の再利用の向上
  • 名前付けの複雑さを軽減する
• 欠点がある
  • メモリコストの増加。CSS をアトムに分割した後、記述する前にいくつかのクラスを覚えておく必要があります。tailwindcss が完全なツール チェーンを提供する場合でも、バックグラウンドを記述するときは、それが bg で始まることを覚えておく必要があります。
  • HTML 構造の複雑さが増加しました。dom 全体がこのようなクラス名を持つと、デバッグ時に問題が発生するのは避けられず、特定の CSS の問題を特定するのが困難になる場合があります。
  • やはりクラス名が必要です。ほとんどの属性では、center、auto、100%、これらの値のみを使用できますが、left、top などの別のパラメータ値を設定する必要がある場合もあります。このとき、クラス名も指定する必要があります。

2.33 CSS の 1 ピクセル問題とは何ですか? 解決策は何ですか?

1px境界線問題の原因

Apple iPhone4 が最初に Retina Display (網膜スクリーン) の概念を提案しましたが、iPhone4 で使用されている Retina スクリーンでは、2x2 ピクセルが 1 物理ピクセルとして使用され、つまり、1 物理ピクセルで表示されるコンテンツを表示するのに 2x2 ピクセルが使用されます。 UI 表示はより洗練され、鮮明になり、これらの 2x2 ピクセルは論理ピクセルと呼ばれます。

画素比が 2 (画素比 (すなわち dpr) = 物理ピクセル / 論理ピクセル) の Retina スクリーンはダブル スクリーンとも呼ばれますが、現在、より高い画素比の 3 画面や 4 画面が市販されています。

CSS では、1px は物理ピクセルを指します。そのため、1px に設定された境界線は、実際には dpr = 2 の網膜スクリーン上で 2 論理ピクセルの幅を占有し、視覚的にインターフェイスの境界線が太くなることになります。

変換を使用して解決する

要素のボックス サイズをボーダー ボックスに設定し、疑似要素を構築し、CSS3 の変換を使用してズームすることにより、これは現在市場で最も評価されているソリューションです。この方法はあらゆるシナリオに対応でき、柔軟に変更できますが、唯一の欠点は、疑似要素を使用した要素に対して追加の無駄な要素をネストする必要があることです。具体的な実装は以下の通りです。

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

これにより、0.5pxの境界線が表示されます。

次のように、メディア クエリ (@media) を組み合わせて、異なる dpr 値を持つ画面の境界線の問題を解決することもできます。

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

もちろん、border-image、background-image、viewport + rem + js、box-shadow など、他にも多くの解決策がありますが、それらはすべて独自の欠点があるため、推奨されず、詳細は紹介しません。ここ。

2.34 CSS の読み込みによりブロックが発生しますか?

まず結論からお話しますと、

• CSS の読み込みによって DOM ツリーの解析がブロックされることはありません
• CSS の読み込みにより DOM ツリーのレンダリングがブロックされる
• CSS の読み込みにより、後続の JS ステートメントの実行がブロックされます。

ユーザーに長い白い画面時間が表示されないようにするには、CSS の読み込み速度を可能な限り高める必要があります。たとえば、次の方法が考えられます。

• CDN を使用します (CDN はキャッシュされたコンテンツを持つ最も近いノードを選択し、ネットワーク状況に応じてリソースを提供するため、読み込み時間を短縮できます)
• css を圧縮します (webpack、gulp などの多くのパッケージ化ツールを使用することも、gzip 圧縮を有効にすることもできます)
• キャッシュの合理的な使用 (キャッシュ制御、有効期限、および E タグの設定は良いことですが、注意すべき 1 つの問題は、ファイルが更新された後はキャッシュの影響を回避する必要があることです。解決策の 1 つは、次のとおりです。ファイル名にバージョン番号が続くことは避けてください)
• http リクエストの数を減らすか、複数の CSS ファイルをマージするか、単純にインライン スタイルを直接記述します (インライン スタイルの欠点の 1 つは、キャッシュできないことです)。

原理分析

ブラウザのレンダリング プロセスは次のとおりです。

• HTML はファイルを解析して DOM ツリーを生成し、CSS ファイルを解析して CSSOM ツリーを生成します
• Dom Tree と CSSOM Tree を結合して Render Tree (レンダー ツリー) を生成する
• Render Tree レンダリングに従ってピクセルを画面にレンダリングします。

プロセスから次のことがわかります。

• DOM 解析と CSS 解析は 2 つの並列プロセスであるため、CSS の読み込みによって DOM 解析がブロックされない理由もこれで説明されます。
• ただし、レンダー ツリーは DOM ツリーと CSSOM ツリーに依存しているため、レンダリングを開始する前に、CSSOM ツリーが構築されるまで、つまり CSS リソースの読み込みが完了する (または CSS リソースの読み込みが失敗する) まで待つ必要があります。したがって、CSS の読み込みにより Dom のレンダリングがブロックされます。
• js は以前の Dom ノードと css スタイルを操作する可能性があるため、ブラウザーは html 内の css と js の順序を維持します。したがって、後続の js が実行される前に、スタイル シートが読み込まれて実行されます。したがって、css は後続の js の実行をブロックします。

2.35 CSSにはどのような配置方法がありますか?

• 静的

これは要素のデフォルトの配置方法です。要素は通常のドキュメント フローに表示され、ページ上のスペースを占めます。

• 相対的

相対配置方法は、親要素を基準にして配置され (この時点で親要素がどのように配置されているかに関係なく)、親要素の残りの未占有スペースを基準にして正確に配置されます (親要素は次のように配置されます)。相対的に配置された子要素が複数ある場合に見られます)、ドキュメント内の要素の最初のページ スペースを占有します。つまり、上、下、左、右を使用して位置を移動した後、占有スペースの位置が決まります。まだ変わりません。z-index を使用して、z 軸方向に移動できます。

• 絶対

絶対配置方法はドキュメント フローの外にあるため、ページ スペースを占有しません。最も近い非静的親要素が位置決めの基準として使用されます。すべての親要素が静的位置決めである場合、この要素は最終的に現在のウィンドウを基準として位置決めされます。

上下左右を使用して位置を移動できます。また、z-index を使用して Z 軸上を移動することもできます。このために要素を配置すると、要素がインライン要素の場合はブロック レベルの要素になります。つまり、幅と高さを直接設定できます。要素がブロック レベルの要素の場合、幅は初期値から変更すると100%がautoになります。

注: 要素が絶対配置に設定されている場合、上、下、左、右の値が指定されていない場合、それらの値は 0 ではありません。これらの値にはデフォルト値があり、デフォルト値は要素が絶対位置に設定されていること。 通常のドキュメント フローにおける前の位置。

• 修理済み

ブラウザウィンドウを位置決めの基準として直接使用する絶対位置決め方法。その他の機能は絶対位置決めと同じです。

親要素がtransformを使用する場合、親要素と一緒に配置されます。

• 粘着性のある

スティッキー配置は、相対レイアウトと固定レイアウトの混合として単純に理解できます。

スティッキー制約四角形が表示範囲内で相対的である場合、それ以外の場合は固定されます。スティッキー位置決め要素がその親要素と同じ高さである場合、垂直方向にスクロールするときに、スティッキー位置決め効果は表示されません。その位置決め効果は完全に制限されています。親要素について。

親要素のオーバーフロー属性がスクロール、自動、およびオーバーレイの値に設定されている場合、スティッキー配置は無効になります。同じコンテナ内に貼り付けられた複数の配置要素は個別にオフセットされるため、重複する可能性があります。異なるコンテナ内のスティッキー配置は、位置は上下に近くなります。要素はカササギの巣を占有し、元の要素を押し出し、場所を 1 つずつ占有する効果を形成します。

2.36 アニメーションを手動で作成する必要がある場合、最小時間間隔はどれくらいだと思いますか?またその理由は何ですか?

ほとんどのモニターのデフォルト周波数は 60Hz、つまり 1 秒あたり 60 回リフレッシュするため、理論上の最小間隔は 1/60*1000ms = 16.7ms です。

2.37 CSS の最適化とパフォーマンス向上の方法は何ですか?

• 過度の拘束を避ける
• 子孫セレクターを避ける
• 連鎖セレクターを避ける
• コンパクトな構文を使用する
• 不要な名前空間を避ける
• 不必要な繰り返しを避ける
• 意味的に表現力のある名前を使用することをお勧めします。適切なクラス名は、それがどのようなものであるかではなく、それが何であるかを説明する必要があります。
• 避ける！重要なのは、他のセレクターを選択することもできます
• ルールをできるだけコンパクトに保ち、異なるクラスの重複ルールを組み合わせることができます

2.38 マージンとパディングはどのようなシナリオに適していますか?

マージンを使用する場合:

• 境界線の外側に空白を追加する必要がある
• 空白部分に背景色は必要ありません
• 接続された 2 つのボックス間の空白スペースは、互いに打ち消し合う必要があります。

パディングを使用する場合:

• 境界線の内側に空白を追加する必要がある
• 空白には背景色が必要です
• 上下につながった 2 つのボックスの空白部分は、その 2 つの合計になると予想されます。

2.39 なぜフロートが表示されるのですか? フロートをクリアする必要があるのはいつですか? フロートをクリアするにはどのような方法がありますか?

フロート要素は、その要素を含む境界線またはフロート要素の境界線に達すると停止します。フローティング要素はドキュメント フロー内にないため、ドキュメント フローのブロック ボックスはフローティング ボックスが存在しないかのように動作します。フローティング要素は、ドキュメント フロー内のブロック ボックス上にフロートします。

フロートに関する問題:

• 親要素の高さを拡張できないため、親要素と同じレベルの要素に影響します
• float 要素と同じレベルの非 float 要素 (インライン要素) が続きます。
• それがフローティングされる最初の要素ではない場合、この要素の前の要素もフローティングする必要があります。そうしないと、ページ表示の構造に影響します。

フロートをクリアする方法:

• 親 div は高さを定義します
• 最後のフローティング要素の後に空の div タグを追加し、clear:both スタイルを追加します。
• フローティング要素を含む親タグのスタイル オーバーフローを hidden または auto に追加します。
• 親 div はズームを定義します

2.40 CSS3 の新しい疑似クラスとは何ですか?

• p:first-of-type は、その親要素に属する最初の要素を選択します
• p:last-of-type は、親要素に属する最後の要素を選択します
• p:only-of-type は、親に固有の要素を選択します
• p:only-child は、親要素に属する唯一の子要素を選択します
• p:nth-child(2) は、親要素に属する 2 番目の子要素を選択します
• :enabled :disabled フォーム コントロールの無効状態。
• :checked ラジオまたはチェックボックスがチェックされています。

2.41 CSS では、box-sizing 属性値はどのように使用されますか?

要素のボックス モデルを制御するために使用される解析モード。デフォルトは content-box です。

• context-box: W3C の標準ボックス モデル。要素の高さ/幅属性の設定は、コンテンツ部分の高さ/幅を参照します。
• border-box: IE の従来のボックス モデル。設定要素の高さ/幅属性は、ボーダー+パディング+コンテンツ部分の高さ/幅を指します。

box-sizing プロパティを使用すると、いくつかの一般的なレイアウトの問題が解決され、CSS コード作成の効率と保守性も向上します。たとえば、要素のサイズを設定するためにパーセンテージやレムなどの相対単位を使用する場合は、ボーダー ボックス ボックス モデルを使用する方が適切です。また、固定サイズを扱い、きめ細かい制御が必要な場合は、コンテンツ ボックス ボックスを使用する方が適切です。実用性を考えると、モデルの方が適切かもしれません。

ボックスのサイズ設定が異なると要素のサイズ計算方法が変わるため、CSS コードを記述する際にはこのプロパティがレイアウトやスタイルに与える影響を十分に考慮する必要があることに注意してください。

2.42 フロントエンド プロジェクトで CSS スタイルを初期化する必要があるのはなぜですか?

ブラウザの互換性の問題により、ブラウザごとにタグのデフォルト値が異なるため、ブラウザのCSSが初期化されていないと、同じページでもブラウザごとに表示に差異が生じます。

2.43 CSS マッチング ルールの順序は何ですか?

ほとんどの初心者は、CSS のマッチングは左から右に行われると考えていると思いますが、実際はその逆です。

CSS マッチングは、レンダー ツリーの構築時に行われます (Chrome デベロッパー ツールは、これをレイアウト プロセスに関連付けます)。このとき、ブラウザは DOM を構築し、CSS スタイルを取得します。このときに行う必要があるのは、スタイルと DOM 上のノードを一致させることです。パフォーマンスを向上させるためにブラウザが行う必要があるのは、素早く一致させることです。 。

まず第一に、ブラウザはこの時点で「表示されている」ノードに対応するルールを探していることを明確にする必要があります。これは、ルールを使用して対応するノードを見つける jQuery セレクターとは異なるため、より高速である可能性があります。左から右へ。ただし、前者の場合、CSS のサイズが大きいため、CSS ファイル内に数千のルールが存在する可能性があり、現在のノードではほとんどのルールが一致しません。より正確な位置から開始します)、ほとんどのルールを削除できます。左から開始すると、深く進んだときにマッチングが失敗することがわかります。ほとんどのルールが深い場合、リソースの無駄になります。

上記の点に加えて、DOM の構築は「ステップバイステップ」であり、DOM はレンダー ツリーの構築をブロックしません (CSSOM ブロックのみ) ことにも言及しました。これは、ページの早い段階で要素をレンダリングできるようにするためでもあります。

次の状況を考えてみましょう。この時点で DOM の一部のみを構築し、CSSOM が構築された場合、ブラウザはレンダー ツリーを構築します。

この時点で、各ノードについて、右から左に一致するルールが見つかった場合は、ノードの親ノードがレイヤーごとに一致するかどうかを観察するだけでよく、その親ノードはこの時点ですでに DOM 上に存在している必要があります。 。

しかし、DOM 上に存在しないノードと一致する可能性があり、このときの一致プロセスはリソースを無駄にします。

2.44 CSS を使用して視差スクロール効果を完成させるにはどうすればよいですか?

1. それは何ですか?

視差スクロールとは、マルチレイヤーの背景が異なる速度で移動して 3 次元のモーション効果を形成し、非常に優れた視覚体験をもたらすことを指します。

ウェブページを背景レイヤー、コンテンツレイヤー、サスペンションレイヤーに分割できます。

マウスホイールをスクロールすると、各レイヤーが異なる速度で移動し、視覚的な違いの効果を形成します。

2. 実施方法

フォームを使用してcss視差スクロール効果を実現する方法は次のとおりです。

• 背景添付ファイル
• 変換:変換3D

背景添付ファイル

この役割は、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定することです。

値は次のとおりです。

• スクロール: デフォルト。ページの残りの部分がスクロールされると背景画像が移動します。
• 修正: ページの残りの部分をスクロールしても背景画像が動かない
• 継承: 親要素のbackground-attachment属性の値を継承します。

スクロール視差を実現するには、背景がビューポートに対して固定されるように、background-attachmentプロパティを に設定する必要があります。fixed要素にスクロール機構がある場合でも、背景は要素のコンテンツと一緒にスクロールしません。

つまり、背景は最初から初期位置に固定されています

コアcssコードは次のとおりです。

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

栗全体はこんな感じです。

<style>
div {
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            line-height: 100vh;
            text-align: center;
           font-size: 20vh;
        }

        .a-img1 {
            background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img2 {
            background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img3 {
            background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
</style>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

変換:変換3D

もう一度、2 つの概念を見てみましょう。まず、次のtransformとおりperspectiveです。

• 変換: css3 属性。要素 (2D/3D) を変換できます。これには、平行移動、回転、ズーム スケールなどが含まれます。
• パースペクティブ: css3 属性。要素に 3D 変換が含まれる場合、パースペクティブは私たちの目で見る 3D 立体効果、つまり空間の感覚を定義できます。

3D透視図は次のとおりです。

栗を取ります：

<style>
    html {
        overflow: hidden;
        height: 100%
   }

    body {
        /* 视差元素的父级需要3D视角 */
        perspective: 1px;
        transform-style: preserve-3d; 
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #app{
        width: 100vw;
        height:200vh;
        background:skyblue;
        padding-top:100px;
    }
    .one{
        width:500px;
        height:200px;
        background:#409eff;
        transform: translateZ(0px);
        margin-bottom: 50px;
    }
    .two{
        width:500px;
        height:200px;
        background:#67c23a;
        transform: translateZ(-1px);
        margin-bottom: 150px;
    }
    .three{
        width:500px;
        height:200px;
        background:#e6a23c;
        transform: translateZ(-2px);
        margin-bottom: 150px;
    }
</style>
<div id="app">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

このような視覚的な違いの原理は次のとおりです。

• コンテナにtransform-style:preserve-3dとperspective:xpxを設定すると、このコンテナ内の子要素が3D空間に配置されます。
• サブ要素は、translateZ() という異なる変換を設定しますが、このとき、各要素の画面 (目) からの 3D Z 軸方向の距離も異なります。
• スクロールバーをスクロールすると、サブ要素が異なるtransform:translateZ()で設定されているため、画面(私たちの目)に対するtranslateYの上下の距離も異なり、スクロール視差の効果が得られます。

2.45 単一行/複数行のテキスト オーバーフローの省略記号スタイルを実装するにはどうすればよいですか?

2. 実施方法

単一行テキストのオーバーフローを省略

テキストは一行で表示され、余分な部分は省略記号の形で表示されるため、理解も非常に簡単です。

実装方法も非常にシンプルで、関連する属性は次のcssとおりです。

• text-overflow: テキストがオーバーフローした場合に、トリミングされたテキストを表す省略記号が表示されることを指定します。
• ホワイトスペース: テキストを 1 行で表示するように設定します。折り返すことはできません。
• オーバーフロー: テキストの長さが制限された幅を超える場合、超過したコンテンツは非表示になります。

overflowに設定するhiddenと、通常はブロックレベル要素の外層を使用して内部オーバーフロー要素を非表示にするか、次の 2 つのプロパティと連携してテキスト オーバーフローの省略を実現します。

white-space:nowrap、この機能はテキストを折り返さずに設定することであり、合計が有効になるための基礎overflow:hiddenとなります。text-overflow：ellipsis

text-overflow属性値は次のとおりです。

• クリップ: オブジェクト内のテキストのオーバーフロー部分が切り取られる場合
• 省略記号: オブジェクト内のテキストがオーバーフローした場合に省略記号マーカー (…) を表示します。

text-overflowoverflow:hiddenおよび の場合にwhite-space:nowrapのみ有効になります。

例えば

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

単行テキストのオーバーフローの設定が比較的簡単で、省略記号の表示位置が適切であることがわかります。

複数行テキストのオーバーフローを省略

複数行のテキストがオーバーフローする場合は、次の 2 つの状況に分類できます。

• 高さに基づいてカットされます
• 行数に基づいて切り詰める

高さに基づいてカットされます

疑似要素 + 位置決め

コアのcssコード構造は次のとおりです。

• 位置:相対:擬似要素の絶対位置
• オーバーフロー: 非表示: テキストが制限された幅を超えてコンテンツが非表示になります)
• 位置: 絶対: 省略記号の絶対位置
• line-height: 20px: 要素の高さと組み合わせて、高さが固定されている場合、行の高さを設定し、表示される行数を制御します
• height: 40px: 現在の要素の高さを設定します
• ::after {} : 省略記号のスタイルを設定します

コードは次のようになります。

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>

実装原理は分かりやすく、疑似要素を必ず行末に配置してテキストを覆い、冗長overflow: hiddenなテキストを非表示にします。

この実装には次の利点があります。

• 優れた互換性、主要な主要ブラウザのサポートが良好
• さまざまな幅に応じて調整された応答性の切り捨て

word-break: break-all英語の一般的な文章が存在する場合、改行時に単語を分割するように設定できます

行数に基づいて切り詰める

純粋なcss実装も非常にシンプルで、コアcssコードは次のとおりです。

• -webkit-line-clamp: 2: ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります)
• 表示: -webkit-box: 1 と組み合わせると、オブジェクトはフレキシブル ボックス モデルとして表示されます。
• -webkit-box-orient:vertical: フレックス ボックス オブジェクトの子要素の配置を設定または取得するために 1 と組み合わせて使用​​されます。
• overflow: hidden: テキストが制限された幅を超えてコンテンツを非表示にします。
• text-overflow: ellipsis: 複数行のテキストの場合、省略記号「...」を使用して、あふれたテキストを非表示にします。

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

上記で使用した属性拡張は、端末のカーネルを備えたブラウザと互換性があることがわかりますが、ほとんどのモバイル端末で使用されるためwebkit、この形式はモバイル端末で一般的に使用されます。CSSPCwebkitwebkit

テキストが長い英語や数字の場合は、word-wrap: break-word属性を追加する必要があることに注意してください。

javascript連携を実現するためにも使用できますcss。実装コードは次のとおりです。

CSS の構造は次のとおりです。

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

JavaScript コードは次のとおりです。

$(function(){
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})

2.46 CSS3 を使用してアニメーションを実現するにはどうすればよいですか?

1. それは何ですか?

CSS アニメーション (CSS アニメーション) は、CSS を使用して拡張マークアップ言語 (XML) 要素のアニメーションを可能にするカスケード スタイル シート用に提案されたモジュールです。

要素をあるスタイルから別のスタイルに徐々に移行させるプロセスを指します。

移動、回転、スケーリングなどの一般的なアニメーション効果が多数あり、複雑なアニメーションは複数の単純なアニメーションを組み合わせたものです。

cssアニメーションを実装するにはいくつかの方法があります。

• トランジションはグラデーションアニメーションを実装します
• 変形変形アニメーション
• アニメーションはカスタムアニメーションを実装します

2. 実施方法

トランジションはグラデーションアニメーションを実装します

transitionプロパティは次のとおりです。

• プロパティ: 変更する必要がある CSS プロパティを入力します。
• 継続時間: トランジション効果を完了するのに必要な時間単位 (秒またはミリ秒)
• タイミング関数: エフェクトを完成させるためのスピード カーブ
• 遅延: アニメーション効果の遅延トリガー時間

値timing-functionは次のとおりです。

価値	説明する
線形	均一速度 (3 次ベジェ (0,0,1,1) に等しい)
容易に	低速から高速、そして低速へ (cubic-bezier(0.25,0.1,0.25,1))
イーズイン	徐々に速くなります (cubic-bezier(0.42,0,1,1) と同等)
イーズアウト	徐々に遅くなります (cubic-bezier(0,0,0.58,1) に等しい)
イージーインアウト	最初は速く、次に遅くなります (cubic-bezier(0.42,0,0.58,1) に等しい)、フェードインとフェードアウト
cubic-bezier( n , n , n , n )	cubic-bezier 関数で独自の値を定義します。可能な値は 0 から 1 までの数値です

注: すべての属性でトランジションを使用できるわけではありません。display:none<->display:block

たとえば、マウスが上に移動して変化するアニメーション効果を実現するには

<style>
       .base {
    
    
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*简写*/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
    
    
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div class="base"></div>

変形変形アニメーション

よく使用される 4 つの関数が含まれています。

• 変換: 変位
• スケール:スケーリング
• 回転：回転
• スキュー: 傾き

一般的なフィットtransition感

transform要素はサポートされていないことに注意してくださいinline。次のように変更します。block

例えば

<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div class="base base2"></div>

ボックスが回転、傾斜、平行移動、ズームインされたことがわかります。

アニメーションはカスタムアニメーションを実装します

animation以下の8つの属性の略称です。

属性	説明する	属性値
アニメーション期間	アニメーションが 1 サイクルを完了するのに必要な時間を秒 (s) またはミリ秒 (ms) で指定します。デフォルトは 0 です。
アニメーションタイミング関数	アニメーションのタイミング関数、つまりアニメーションのスピードカーブを指定します。デフォルトは「ease」です。	リニア、イーズ、イーズイン、イーズアウト、イーズインアウト
アニメーション遅延	アニメーションの遅延時間を指定します。つまり、アニメーションが開始されるとき、デフォルトは 0 です。
アニメーションの反復回数	アニメーションを再生する回数を指定します。デフォルトは 1 です。
アニメーションの方向はアニメーションが再生される方向を指定します。	デフォルトは通常です	ノーマル、リバース、オルタネート、オルタネート-リバース
アニメーションフィルモード	アニメーションの塗りつぶしモードを指定します。デフォルトはなしです	前方、後方、両方
アニメーションの再生状態	アニメーションの再生状態 (実行中または一時停止) を指定します。デフォルトは実行中です	ランニング、休憩
アニメ名	@keyframes アニメーションの名前を指定します

CSSアニメーションではいくつかのキー フレームを定義するだけで済み、ブラウザはタイミング関数に従って残りのフレームを補間して計算します。

キーフレームは次のように@keyframes定義されます。

したがって、要素を円状に回転させたい場合は、開始と終了の 2 つのフレームを定義するだけで済みます。

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from先頭のフレームとto最後のフレームを示します

パーセンテージを使用してライフサイクルを説明することもできます

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

キーフレームを定義したら、それを直接使用できます。

1animation: rotate 2s;

3. まとめ

属性	意味
トランジション（過度）	要素の過剰なスタイルを設定するために使用され、アニメーションと同様の効果がありますが、詳細は大きく異なります
変身	要素の回転、拡大縮小、移動、傾斜に使用され、スタイルのアニメーションとは何の関係もありません。要素の「外観」を設定する色と同等です。
翻訳（移動）	これは単なるtransform、つまり移動の属性値です。
アニメーション	アニメーション プロパティを設定するために使用され、6 つのプロパティを含む短縮プロパティです。

2.47 em/px/rem/vh/vw これらの単位の違いは何ですか?

1. はじめに

px従来のプロジェクト開発では、 、%、およびこれらの単位のみを使用しますem。これらの単位は、ほとんどのプロジェクト開発に適用でき、比較的良好な互換性があります。

最初からCSS3、ブラウザの測定単位のサポートが別のレベルに引き上げられ、rem、vh、vwなどvmのいくつかの新しい測定単位が追加されました。

これらの新しいユニットを使用して、モバイル デバイスなどのさまざまな解像度の端末に適応して、比較的応答性の高いページを開発します。

2.ユニット

単位ではcss、以下の表に示すように、長さの単位と絶対単位に分けることができます。

CSSユニット
相対的な長さの単位	em、ex、ch、rem、vw、vh、vmin、vmax、%
長さの絶対単位	cm、mm、in、px、pt、pc

ここでは主に px、em、rem、vh、vw について説明します。

ピクセル

px, ピクセルの略です。いわゆるピクセルは、ディスプレイ上に表示される小さな点です。各ピクセルは同じサイズであるため、ピクセルは測定単位であり、絶対的な長さの単位に分割されます。

pxモバイル端末にはデバイスのピクセル比があり、px実際に表示されるサイズは不確実であるため、相対的な長さだと考える人もいます。

px絶対単位とみなされている理由はpx、要素のサイズが要素の他の属性とは何の関係もないためです。

えっと

em は長さの相対単位です。現在のオブジェクト内のテキストのフォント サイズを基準とします。インライン テキストの現在のフォント サイズが手動で設定されていない場合、ブラウザのデフォルトのフォント サイズを基準とします ( 1em = 16px)。

font-sizeの変換を簡素化するには、のセレクターで= を宣言する必要があります。cssこれにより、 em の値は次のようになります。bodyfont-size62.5%16px*62.5% = 10px

このように12px = 1.2em、10px = 1emつまり、元の px値を 10 で割って、それをem 単位として置き換えるだけで済みます。

特徴：

• em の値は固定されていません
• em は親要素のフォント サイズを継承します。
• em は相対的な長さの単位です。現在のオブジェクト内のテキストのフォント サイズを基準とします。インライン テキストの現在のフォント サイズが手動で設定されていない場合、ブラウザのデフォルトのフォント サイズを基準とします。
• どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです

例えば

<div class="big">
    我是14px=1.4rem
    <div class="small">我是12px=1.2rem</div>
</div>

としてスタイル

<style>
html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
.big{font-size: 1.4rem}
.small{font-size: 1.2rem}
</style>

このとき.big要素font-sizeは14px、.small要素font-sizeは12pxです

レム

font-sizerem、相対単位、相対は HTML ルート要素の値にすぎません

同様に、変換を簡略化したい場合はfont-size、ルート要素にhtml追加できます。font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 

このようにして、ページ内で 1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px となり、視覚、使用、書き込みが大幅に助けられました。

特徴：

• レム単位は、相対サイズと絶対サイズの利点を組み合わせたものとして説明できます。
• em との違いは、サイズの計算にカスケード メソッドを使用する em とは異なり、rem は常にルート要素に対して相対的であることです。

vh、vw

vw はウィンドウの幅に応じて 100 等分され、100vw は全幅、50vw は半幅を意味します。(vw は常にウィンドウの幅です)、同様にvhウィンドウの高さです

ここでのウィンドウは、いくつかの状況に分かれています。

• デスクトップ上、ブラウザの表示可能な領域
• モバイル端末はレイアウト ビューポートを参照します

vw、と同様にvh、より紛らわしい単位の 1 つは です%が、パーセンテージは主に親要素を基準にしています。

通常の位置決め要素の場合、それは私たちが理解している親要素です

• 位置の場合: 絶対; 要素は位置決めされた親要素を基準とします
• 位置の場合: 固定; 要素は ViewPort (ビジュアル ウィンドウ) に相対的です

3. まとめ

px : 絶対単位。ページは正確なピクセルで表示されます。

em : 相対単位、基準点は親ノードのフォントサイズ、単独で定義されている場合はfont-sizeページ全体で1em固定値ではない

remroot em : 相対単位。ルートノードのフォントサイズを基準にしてhtml計算されたものとして理解できます。

vh、vw : 主にページ ビューポート サイズのレイアウトに使用され、ページ レイアウトでより便利でシンプルです。