CSS 面接の一般的な質問を整理する-CSSチュートリアル-php.cn

CSS 面接の一般的な質問を整理する

coldplay.xixi

リリース： 2020-08-03 17:07:34

転載

1769 人が閲覧しました

ボックスモデル

奇妙なボックスモデル: ボーダーコンテンツ

特別な推奨事項:2020 年の CSS 面接の質問のまとめ(最新)

インライン要素

- マージンの設定のみが有効です左右、上下に対して無効です
- パディングの設定は上下左右に対して有効であり、スペースが確保されます
- 行は自動的に折り返されません

インラインブロック要素

- すべてのインライン要素は同じ行に表示されます

機能

幅と高さを設定できます
- すべてのブロックレベルの要素は 1 行を占めます
- 幅と高さが設定されていない場合、デフォルトで親から継承されますレベルの幅と高さ
Commonブロックレベルの要素
p p ul li h1-h6

margin: 0 auto;

position 位置は、translate:translate
flexlayout
text-align は、line-height と一致し、使用されます。フォントは、親要素の領域内の中央に配置されます。
vertical-align: middle; インライン要素のセンタリングを設定するために使用されます
css hack

説明: ブラウザーごとに、互換性のために別の CSS を作成します

条件ハック
- ログイン後にコピー
  ログイン後にコピー
属性ハック
- ```
.p {
    color: red; /*IE 8+*/
    *color: green; /*IE 7*/
    _color: yellow; /*IE 6*/}
```
  ログイン後にコピー
  ログイン後にコピー
セレクターハック
- ```
/*IE 6*/* html .p {
    color: red;}/*IE 7*/* + html .p {
    color: green;}
```
  ログイン後にコピー
  ログイン後にコピー

px は絶対単位であり、値は固定です

em は親から継承されます要素のフォントサイズのサイズ単位

@support は、ブラウザが特定の css 属性をサポートしているかどうかを検出するために使用され、条件判断として理解でき、一般に互換性処理に使用されます。

media

ビューポートのケースに対応する CSS スタイルに基づくメディアクエリは、通常、モバイル互換性を確保するために rem で動作します。

calc

css 計算属性。長さの値を動的に計算するために使用され、数学的演算をサポートします。

Float のクリア

疑似要素の float のクリア

原則: 高さ崩れの問題を解決するには、親要素の疑似要素に clear:both を設定します。
- ```
::after {
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;}
```
  ログイン後にコピー
  ログイン後にコピー

書式設定コンテキストは独立したレンダリング領域であり、BFC 内の要素を外部から分離できます。内部要素と外部要素の位置が相互に影響を与えないように要素を配置します。

ルール
同じ BFC の下では、デフォルトで 2 つの隣接するボックスが縦に配置されます。
- 同じ BFC の下では、上下の隣接する 2 つのボックスの余白が重なり合います。
- #BFC の高さを計算するとき、フローティングサブ要素も計算に参加するため、BFC の高さが設定されていない場合は、BFC も引き伸ばされます。浮動サブ要素によって。
- テキストレイヤーはフローティングレイヤーで覆われませんが、フローティングレイヤーを囲みます。

#ボックスモデル

インライン要素

インラインブロック要素

ブロックレベルの要素

- ##幅と高さが設定されていない場合、デフォルトで親の幅と高さが継承されます
css センタリング

margin: 0 auto;

cssハック

説明: ブラウザごとに異なるCSSを記述し、互換性のあるものとして使用します

- #属性ハック
```
.p {
    color: red; /*IE 8+*/
    *color: green; /*IE 7*/
    _color: yellow; /*IE 6*/}
```
ログイン後にコピー
ログイン後にコピー
- セレクターハック
```
/*IE 6*/* html .p {
    color: red;}/*IE 7*/* + html .p {
    color: green;}
```
ログイン後にコピー
ログイン後にコピー