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 の重みはどのように計算されますか?
优先级注意点:
- ウェイトは4グループの数字で構成されていますが、キャリーはありません。
- クラス セレクターは常に要素セレクターよりも大きく、ID セレクターは常にクラス セレクターよりも大きい、などということが理解できます。
- レベルは左から右に判定し、ある桁の値が同じであれば次の桁の値を判定します。
- 簡単な暗記方法: ワイルドカードと継承の重みは 0、ラベル セレクターは 1、クラス (疑似クラス) セレクターは 10、ID セレクターは 100、インライン スタイル シートは 1000、!重要は無限です。
- 継承される重みは 0 です。要素が直接選択されていない場合は、親要素の重みがどんなに高くても、子要素の重みは 0 になります。
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
CSS単位のpx、em、remの違いは?
1
px 是绝对单位
. ピクセル px はディスプレイの画面解像度に相対し、仮想の長さの単位です。
2.
em 是相对长度单位
現在のオブジェクト内のテキストのフォント サイズに相対します。インライン テキストの現在のフォント サイズが
手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。それ親要素のフォントサイズを継承しますしたがって、
固定値ではありません
3.
rem 是 CSS3 新增的一个相对单位
rem を使用して要素のフォント サイズを設定する場合
、それは依然として相対的なサイズですが、反対は単なる HTML ルート要素です