CSS が広く使用されているのはなぜですか?-htmlチュートリアル-php.cn

これまでの言葉

CSS学習ディレクトリではCSSの使い方が詳しく紹介されています。それが何なのかを知るためには、なぜそうなるのかを知る必要もあります。この記事では、CSS の各部分が登場した理由を紹介します。あくまで個人的な理解のためです。何か間違っている場合は、お気軽に連絡してください。

なぜ CSS なのか

表とフォント要素で構成され、表現する目的に対して、コンテンツは実際の意味を伝えることができないため、文書の使いやすさが低下し、保守が困難になります。そこで 1995 年、W3C は構造とスタイルが混在する問題を解決するために CSS ドラフトをリリースしました

1. 構造とスタイルの完全な分離を考慮し、スタイルシートが複数の HTML ファイルで使用される可能性がある場合は、外部スタイルシート

2. スタイルシートは現在のページにのみ使用され、HTTPリクエストの数を減らします。内部スタイルシートを使用します

3. 単一の要素にいくつかのスタイルを指定したい場合は、次のようにすることができます。インラインスタイルを設定するには HTML の style 属性を使用します

選択する理由

CSS セレクターを通じてドキュメント内の要素タイプのセットに特定のルールを適用します

1. ワイルドカードセレクターはすべての要素を選択します

2. 要素セレクターは要素を選択しますHTMLタグに従って 3. クラス選択セレクターはクラス名を定義することで要素の種類を選択します

4. IDセレクターは特定のIDを持つ要素を選択します

5. 属性セレクターは属性と属性に従って要素を選択します要素の値

6. 子孫セレクターはHTMLの階層関係を渡して要素を選択します

7. グループセレクターは同じルールで要素を組み合わせて設定します

なぜCascading

CSS(カスケーディングスタイルシート)とは中国語ではカスケードスタイルシートとして翻訳され、その最も基本的な機能の 1 つはカスケードです。競合する宣言はカスケードによってソートされ、最終的なドキュメント表現が決定されます

以下の例では、要素セレクター div とクラスセレクター .test の両方が

<style>div{height: 100px;}.test{height: 200px;}    </style><div class="test"></div></h3>
<p> </p>
<div class="cnblogs_code">Hack の理由</div>
<p> CSS Hack は、ブラウザーのスタイルの互換性を実現するための確実な方法です。できる限り使用しないでください。ただし、古いバージョンの IE のバグなど、一部のブラウザのバグでは、CSS ハックの使用が最後の手段になる場合があります</p>
<h3> たとえば、IE6 の場合、ブラウザでは主に underscore_ と center underscore が使用され、これら 2 つの文字がハックとして実装されています。以下に示すように、IE6 ブラウザでは div のテキストの色は青ですが、他のブラウザでは赤になります</h3>
<p></p>
<pre class="brush:php;toolbar:false"><span style="color: #000000;">div{<br>　　color:red;<br>　　_color:blue;<br>}</span>

ログイン後にコピー

なぜ疑似クラスと疑似要素なのか

個人的には、疑似クラスはそして疑似要素は HTML の反映です要素の拡張機能を介して、要素のスタイル表現を豊かにすることができます

疑似クラスは偽のクラスであり、一般的なホバーマウスオーバー効果などの効果を実現するために実際のクラスを追加するのと似ています

a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/

ログイン後にコピー

疑似要素は、実際の要素を追加することで実現できるものと同様の偽の要素です。もちろん、追加されるのは要素ではなく、生成されたコンテンツです

生成されたコンテンツとは、主に
:beforeや:after

大まかに言うとブラウザで作成されたコンテンツを指します。、単位相対概念であり、物座標系の座標軸において個体を構成し得る抽象的な概念である。長さ単位とは、空間距離を測定するための基本単位を指し、CSS が長さを標準化するために開発した基本単位です。

ページの長さをより良く測定して表現するために、CSS は絶対的な長さの単位、フォント関連の長さの単位、ビューポート関連の長さの単位を指定します

【絶対的な長さの単位】

絶対的な長さの単位は物理的な測定を表し、ピクセル px(ピクセル)、インチインチ(インチ)、インチインチ(インチ)、インチインチ(インチ)、インチインチ(インチ)、1/4 mm q(4 分の 1 ミリメートル)、ポイント pt(ポイント)、ピカ PC を含む(picas)

ウェブでは、ピクセル px が一般的な測定単位であり、他の多くの長さの単位はピクセルに直接マッピングされます。最後にピクセルに応じて処理されます

1in = 2.54cm = 96px　
1cm = 10mm = 96px/2.54 = 37.8px
1mm = 0.1cm = 3.78px
1q = 1/4mm = 0.945px
1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px
1pc = 12pt = 1/6in = 1/6*96px = 16px

ログイン後にコピー

【字体相关的长度单位】

　　字体相关的相对长度单位包括em、ex、ch、rem

　　em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size

　　rem是相对于根元素html的font-size属性的计算值

　　ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值

　　ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值

【视口相关的长度单位】

　　视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在

　　关于视口相关的单位有vh、vw、vmin、vmax4个单位

vh:布局视口高度的 1/100
vw:布局视口宽度的 1/100
vmin:布局视口高度和宽度之间的最小值的 1/100
vmax:布局视口高度和宽度之间的最大值的 1/100

ログイン後にコピー

Why 盒模型

　　盒模型是CSS布局的基础，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小　　

【box-sizing】

　　在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸

　　在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式

Why margin重叠

　　在网页布局中，因为margin重叠的原因，我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上，它是在很大的作用的

HTML文档创建的初衷只是用来展示信息的。HTML文档只使用默认样式的前提下，如果上下margin不发生重叠，则会出现以下几个问题：1、连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟元素呈现1:2的关系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都会影响原生的布局，与web设计原则相违背；3、遗落的空的任意多个p标签，会影响原来的阅读排版

所以，我们要善用重叠，可以在列表项中同时使用margin-top和margin-bottom。这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局

【-webkit-margin-collapse】

-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)

ログイン後にコピー

この属性はマージンが重なるかどうかを設定するために使用され、マージンの重なりが発生する 2 つの要素のいずれかに作用します。両方がこの属性を使用し、一方が破棄に設定され、もう一方が分離に設定されている場合、最終的な効果は重複します。 collase

なぜ自動

視覚的な書式設定を理解すると、結果として得られる効果がどのようなものであるかがわかります。と表示されるはずです。正しい効果は依然としてブラウザの互換性バグです。視覚的な書式設定で最も重要な概念の 1 つは auto です。auto 値は、実際の値と必要な合計との間のギャップを補うために使用されます

[デフォルトでブロックレベル要素の幅が親要素を満たす理由]

ブロックレベル要素の幅のデフォルト値はautoであり、margin、border、paddingのデフォルト値はすべて0であるため、ブロックレベル要素のボックスの横方向の合計は以下に等しいという計算式による親要素の幅、ブロックレベル要素の幅のデフォルトは、親要素の幅である包含ブロックの幅になります

【なぜ、ブロックレベル要素はデフォルトで左側に表示されるのですか？幅の設定?】

ブロックレベル要素の幅を設定した後、margin、border、paddingのデフォルト値はすべて0です。ブロックレベル要素のボックスの水平方向の合計によると、等しいです。親要素への幅の計算式。この状況は、過剰制約された書式設定属性と呼ばれます。このとき、margin-right は左側に表示され、margin-right が残りの幅を占めるように強制されます

[固定幅ブロックを使用する理由]レベル要素のmargin:autoを設定すると水平方向の中央揃え表示が実現できます】

ブロックレベル要素のboxの水平方向の合計が親要素の幅に等しいという計算式に基づき、borderとpaddingは0となります。 width、margin-left、margin-right は、残りを均等に分割します。

[ブロックレベル要素の高さがデフォルトで要素自体の高さに設定されるのはなぜですか]

個人的には、これはブラウザーの機能に関連していると思います。レンダリングメカニズムは左から右へ、そして上から下へと続きます。このレンダリングメカニズムにより、幅の値が決定され、高さの値が要素自体の高さが決定されます。高さの値、つまりビューポートの高さも決定されている場合、ブロックレベルの要素がレンダリングされるたびに画面全体のサイズが占有されてしまい、間違いなく大惨事となるため、ブラウザはできるだけ小さくする必要があります。十分な幅を確保しながら、可能な最小の高さは要素自体の高さになります

[margin:auto を設定するとブロックレベルの要素が垂直に表示されない理由]

ブラウザが margin-top と margin を設定する場合-bottom を auto にすると、自動的に 0 にリセットされます。垂直方向のセンタリングを実現したい場合は、calc() を使用して自分で計算できます。高さが 100 ピクセル、境界線が 0、パディングが 10 ピクセル、含まれるブロックの高さが 200 ピクセルの場合、margin-top = となります。 calc((200px - 100px - 10px -10px) / 2)

【注意】垂直方向のマージンの重なりの問題を考慮する必要があります

【画像設定 margin:auto で水平センタリング表示が実現できない理由】

ブロックレベルの要素を垂直方向の中央に配置できないのと同様に、画像を水平方向の中央に配置することはできません。画像の幅はデフォルトで独自の幅であるため、左右のマージンは自動に設定されており、水平方向に中央に表示したい場合は、画像表示をブロックに設定します

理由行の高さと垂直方向の配置

通常の状況では、ブロックレベル要素のレイアウトは主にボックスモデルに基づきますが、インライン要素 (インラインブロック要素を含む) のレイアウトは主に line-height と vertical に依存します。 -align

line-height は、テキストの行のベースライン間の距離を指します。 vertical-align は垂直方向の配置を設定するために使用されます。すべての垂直方向に整列された要素は行の高さに影響します

【inline-block 要素に下部のギャップがある理由】

inline-block 要素がブロックレベルでギャップを残す理由要素は画像によるものです。デフォルトの垂直方向の位置合わせはベースライン位置合わせです (原則として、ベースライン位置合わせは、画像の下端を匿名テキストの大文字の英語文字 X の下端に位置合わせすることと同じです)。行の高さは、親要素で設定された行の高さを継承します。デフォルトは標準（Chrome の font-size の 1.334 倍）なので、下端の間に距離があります。解決策

1. 垂直なので、display:block を設定します。配置は置換要素とインライン要素にのみ適用できます。ブロックレベルの要素に変更すると、垂直配置が無効になります

2. 匿名テキストと行ボックスの間の距離が 0 になるように、親の line-height: 0 を設定します。

3.vertical-alignをtop/middle/bottomに設定します

【インライン要素の垂直マージンが無効な理由】

インライン要素の垂直方向のレイアウトは主に行の高さによって行われるため、行の高さと垂直方向の配置は垂直方向の影響を受けます。 -align、垂直マージンはそれらに影響しないため、垂直レイアウトには影響しません。表示モードでは、マージン領域には要素の背景が表示されないため、独自の要素の表示には影響しません。したがって、インライン要素の垂直マージンは無効です

なぜFloating

の最初の使用法です。フローティングはからのもので、画像の周囲のテキストの植字に使用されます。フローティングは現在 CSS で一般的に使用されるレイアウト方法です

浮動要素は通常の流れから外れ、指定された方向に左または右に移動し、親の境界または他の浮動要素に遭遇すると停止します。フローティングには次の 4 つの特徴があります: 1. フローティングフロー: 通常のフロー内の要素が次々に配置され、フローティング要素もフローティングフローを構成します

2. ブロックレベルのボックス: フローティング要素自体がブロックを生成します。要素に関係なく、レベルボックス浮動要素の周囲のマージンがマージされないようにするにはどうすればよいですか? 3. 折り返し: 浮動要素を含むブロックは、最も近いブロックレベルの祖先要素を参照し、子孫の浮動要素はそれを超えてはなりません。包含ブロック境界の上、左、右。包含ブロックの高さが設定されておらず、包含ブロックがフローティングである場合、包含ブロックの幅が設定されておらず、包含ブロックがフローティングである場合、包含ブロックはその子孫の浮動要素をすべて含むように拡張されます。含まれているブロックは、下降するフローティング要素によって引き伸ばされます。

4. 破壊性: フローティング要素は、通常のフローから切り離され、自身のラインボックス属性を破壊し、それに含まれるブロック要素の高さを崩壊させます。フローティングボックスの隣のラインボックスを短くし、フローティングボックスのスペースを残すと、フローティングボックスの周囲にラインボックスが再配置されます

【フロートをクリアする必要がある理由】

フロートをクリアするのは実際にはです。フローティング要素を含むブロックの高さ崩壊の問題を解決するには

標準ブラウザの場合、フロートをクリアする方法は実際には 2 つだけあり、1 つはフローティング要素の下に新しい要素を追加し、もう 1 つは、フローティング要素が含まれるように、包含ブロックの BFC をトリガーすることです

BFC を使用する理由

フロートをクリアするために BFC をよく使用しますが、実際には BFC には他にも多くの用途があります

BFC について説明する前に、ドキュメントフローについて説明します。私たちがよく言うドキュメントフローは、実はポジショニングフロー、フローティングフロー、通常フローの3種類に分けられます。通常のフローは、実際には BFC の FC を指します。 FC は、フォーマットコンテキストの略語で、文字通りフォーマットコンテキストを意味します。これは、サブ要素がどのようにレイアウトされるか、および他の要素との関係と役割を決定する一連のレンダリングルールを持ちます。要素。一般的な FC には、BFC、IFC、GFC、FFC などがあります。 BFC はブロックレベルのフォーマットコンテキストであり、ブロックレベルのボックスをレイアウトするために使用されるレンダリング領域です

。 1. ルート要素、つまりHTML要素 2. float の値は none ではない 3. overflow の値は目に見えない 4. display の値は inline-block、table-cell、table である-caption

5. 位置の値は絶対または固定です

BFC はページ上で分離された独立したコンテナであり、コンテナ内のサブ要素は外部の要素に影響を与えません

。 BFCは以下の3つの目的を達成するためによく使われます

1.要素がフローティング要素で覆われないようにします

<説明>中身がBFCで背景が赤色のボックスの属性値を変更することでBFCにします緑色のフローティングボックスカバレッジで覆われないようにする

2. フローティング要素を含む

<説明> 高度に折りたたまれた黒い境界ボックスの属性値を変更して、BFC にします。緑色のフローティングボックス

3.
同じBFCに属する2つの隣接するブロックレベルのサブ要素の上下のマージンが重なり合います（writing-mode: tb-rlが設定されている場合、水平方向のマージンが重なります）。したがって、隣接する 2 つのブロックレベルのサブ要素が異なる BFC に属している場合、マージンの重複を防ぐことができます

<説明> 背景が薄赤色のブロックレベルのボックス 2 は、div の属性を変更することでラップされます。この div、赤いボックスと緑のボックスは、マージンの重なりを防ぐために 2 つの異なる BFC に属しています

位置決めの理由

CSS には、通常のフロー、フローティングフロー、位置決めフローという 3 つの基本的なレイアウトメカニズムがあります。位置決めを使用すると、要素のボックスが通常の位置に対して相対的に、または親要素、別の要素、またはブラウザウィンドウ自体に対して相対的にどこに表示されるかを正確に定義できます

要素が絶対的に配置されると、要素は完全に削除されます。文書の削除。要素は、最も近くに配置された祖先を基準にして配置されます。要素に配置された祖先が存在しない場合、その位置は元の包含ブロックドキュメントを基準とし、その境界は offset プロパティに従って配置されます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロックレベルのボックスを生成します。配置された要素は他の要素のコンテンツに流れ込むことはなく、その逆も同様です

要素が相対的に配置されると、その要素は通常の位置から移動されますが、元々占有していたスペースは消えません。相対的に配置された要素は、すべての子要素を含む新しいブロックを作成します。この含むブロックは要素の元の場所に対応します

　　固定定位与绝对定位很类似，元素会完全从文档流中去除，但固定元素的偏移是相对于视窗

【为什么clip属性无效】

　　绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果

.hide{
    position:absolute;
    clip: rect(0,0,0,0);
}

ログイン後にコピー

【为什么静态位置的元素会发生跳动】

　　对于居中对齐的行内元素来说，将元素设置为absolute或fixed会发生静态位置跳动问题。而relative或static则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线，而当元素绝对定位或固定定位之后，定位元素左边界将与其父级块级元素的中线对齐

【为什么overflow属性会失效】

　　当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁

　　解决办法就是有两种，一种是让overflow元素自身成为包含块，给父级设置position:absolute或fixed或relative；另一种是设置overflow元素的子元素为包含块，在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

Why z-index

　　对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index

　　利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放

　　对于CSS2.1来说，页面元素的堆叠规则如下图所示

位置決めされた要素（位置が静的ではない要素）の場合、z-index が設定されていない場合、または z-index が同じ場合、同じスタックコンテキスト内の同じレベルの要素については、後続の要素が前の要素をカバーします。デフォルトの z-index より大きな値は z-index のより小さな値をオーバーライドします

要素に z-index 値 (自動ではない) が指定されると、要素は独自のローカルスタッキングコンテキストを確立します。これは、要素のすべての子孫が、祖先要素に対して独自のスタック順序を持つことを意味します

[注] auto 値は、現在のスタックコンテキストで生成されたスタックレベルがその親ボックスのレベルと同じであることを意味します。新しいローカルオーバーレイコンテキストは作成されません。 z-index:auto と z-index:0 の値は等しいですが、z-index:0 は新しいローカルスタッキングコンテキストを作成します

CSS3 の出現により、これまで多くのルールが疑問視されてきました。スタッキングコンテキストの z-index への影響はより大きく、主に以下の 8 つの属性が含まれます

1. auto 以外の z-index 値を持つ Flex アイテム (親要素の表示: flex | inline-flex)

2.要素の透明度不透明度の値が1ではありません

3.要素の変形transformがnoneではない

4.要素のmix-blend-mode値がnormalではない

5.要素のfilter値がnoneではない

6要素の分離値はisolate

7. will-changeで指定する属性値は上記のいずれか

8. 要素の-webkit-overflow-scrollingはtouchに設定されています

上記8のいずれかを設定属性は、絶対的なカスケードコンテキストの設定に似ています z - インデックスが有効になります

なぜオーバーフローするのか

要素が特定のサイズに固定されているが、コンテンツが要素に収まらない場合。このとき、overflow (overflow)を使用してこの状況を制御できます

overflow-x と overflow-y のプロパティは、もともと IE ブラウザーによって独自に開発されたプロパティであり、後に CSS3 で採用および標準化されました。。 Overflow-x は主に水平コンテンツオーバーフローの剪断を定義するために使用され、overflow-y は主に垂直コンテンツオーバーフローの剪断を定義するために使用されます

オーバーフローが自動、スクロール、または非表示の BFC に設定されている場合にトリガーできますオーバーフローにより、いくつかの関連アプリケーションを実装できるようになります

【スクロールバーが表示される理由】

スクロールバーとオーバーフローは密接な関係があります。親のオーバーフローの値がautoまたはscrollで、要素の内容が要素領域を超えている場合にのみ、スクロールバーが表示されることがあります

どのブラウザでも、デフォルトのスクロールバーはの代わりに。要素にはデフォルトで 8px のマージンがあるためです。スクロールバーが要素から来ている場合、スクロールバーとページの間に 8 ピクセルの隙間があるはずです。そのため、スクロールバーは要素から来ています。

chrome/firefox/IE ブラウザのデフォルトのスクロールバーの幅は 17px、safari ブラウザは 21px です

なぜ flex

CSS3 は新しいレイアウトモデル flex レイアウトを導入します。フレックスとはフレキシブルボックスの略で、一般にフレキシブルボックスモデルと呼ばれています。フレックスレイアウトは、さまざまなタイプの表示デバイスやさまざまなサイズの画面に適応するために、コンテナ内にアイテムをレイアウトするためのより効果的な方法を提供します

フレックスコンテナには、デフォルトで 2 つの軸があります: 水平主軸 (主軸)。そして垂直方向の交差軸

[注意] 主軸の方向は必ずしも水平である必要はなく、主に justify-content 属性に依存します

主軸の開始点をメイン開始点、メイン軸の終了点を呼びます軸はメインエンドと呼ばれます; クロス軸の始点はクロススタートと呼ばれ、サイド軸の終点はクロスエンドと呼ばれます

デフォルトでは、伸縮アイテムは主軸に沿って配置されます。単一のテレスコピックプロジェクトが占める主軸のスペースはメインサイズと呼ばれ、側軸のスペースが占めるクロスサイズはクロスサイズと呼ばれます

[注] テレスコピックプロジェクトのメインサイズとクロスサイズは主に幅または高さによって決まります

Flex を使用すると、さまざまなレイアウト形式を簡単に実現できます。詳細はこちら

複数列レイアウトを使用する理由

一般的な組版方法として、フローティングは当初、グラフィックスの混合レイアウトを実現するためにのみ使用されていました。これは、グラフィックとテキストの混合レイアウトにのみ使用するのが最適です。これは、より複雑なレイアウト構造ではありません

位置決めは、要素の正確な位置決めに使用されます

個人的には、フレックスレイアウトによって提供される柔軟なレイアウトは、次のようなことができると思います。使いすぎたフローティングレイアウトを置き換えるために使用できます

そして、複数列レイアウトは、新聞や雑誌のレイアウト方法に似たものを提供します

CSS には、ブラウザがいつ 1 つの列を終了して開始するかを決定できる新しい複数列レイアウト機能が追加されました追加のマークアップなしで次の列に進みます。簡単に言うと、CSS3 のマルチカラムレイアウトは、指定されたカラム数に従ってコンテンツを自動的に配置することができ、この機能によって実現されるレイアウト効果は、新聞や雑誌の組版に非常に似ています

。

以上がCSS が広く使用されているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。