CSS、px、em、remにおけるボックスモデル、セレクターの優先順位、重み計算の違い

CSSボックスモデル?

ボックス モデルは、内側の余白、境界線、外側の余白、実際の
コンテンツなどの要素をレイアウトするために使用できます。

ボックスモデルは2種類に分かれる

1つ目はW3C 标准的盒子模型(标准盒模型)
2つ目ですIE 标准的盒子模型(怪异盒模型)

標準ボックスモデルと奇妙なボックスモデルの性能の違い:

标准盒模型

标准盒模型中 width 指的是内容区域 content 的宽度
height 指的是内容区域 content 的高度
标准盒模型下盒子的大小 = content(内容区域) + border(边框) + padding(内边距) + margin(外边距)

怪异盒模型

怪异盒模型中的 width 指的是内容、边框、内边距总的宽度(content + border + padding);
height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小 = width(content + border + padding) + margin

CSSにおけるセレクターの優先順位

!important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性

CSS の重みはどのように計算されますか?

ここに画像の説明を挿入

优先级注意点:

  1. ウェイトは4グループの数字で構成されていますが、キャリーはありません。
  2. クラス セレクターは常に要素セレクターよりも大きく、ID セレクターは常にクラス セレクターよりも大きい、などということが理解できます。
  3. レベルは左から右に判定し、ある桁の値が同じであれば次の桁の値を判定します。
  4. 簡単な暗記方法: ワイルドカードと継承の重みは 0、ラベル セレクターは 1、クラス (疑似クラス) セレクターは 10、ID セレクターは 100、インライン スタイル シートは 1000、!重要は無限です。
  5. 継承される重みは 0 です。要素が直接選択されていない場合は、親要素の重みがどんなに高くても、子要素の重みは 0 になります。
    权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。

CSS単位のpx、em、remの違いは?

1 px 是绝对单位. ピクセル px はディスプレイの画面解像度に相対し、仮想の長さの単位です。

2.em 是相对长度单位現在のオブジェクト内のテキストのフォント サイズに相対します。インライン テキストの現在のフォント サイズが
手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。それ親要素のフォントサイズを継承しますしたがって、
固定値ではありません

3. rem 是 CSS3 新增的一个相对单位rem を使用して要素のフォント サイズを設定する場合
、それは依然として相対的なサイズですが、反対は単なる HTML ルート要素です

おすすめ

転載: blog.csdn.net/weixin_50370865/article/details/128486959