Web フロントエンドの面接で CSS について頻繁に聞かれる 10 の質問

1. BFC メカニズムとは

BFC (ブロック フォーマット コンテキスト)、ブロックレベルフォーマット Context は、内部要素と外部要素の位置が相互に影響しないように、BFC 内の要素を外部要素から分離する独立したレンダリング領域です。

• トリガー条件 (以下のいずれか)
  • float の値が none ではない
  • overflow の値が表示されない
  • display の値は、table-cell、table-caption、inline-block のいずれかです。
  • position の値は、static または relative のいずれでもありません。

## IE では、

zoom:1

BFC レイアウトと通常のドキュメント フロー レイアウトの違いを使用してレイアウトをトリガーできます。 BFC レイアウト ルール:
• 浮動要素の高さは親によって計算されます (親要素が BFC をトリガーします)
  1. 非浮動要素は浮動要素の位置をカバーしません (非浮動要素) )
  2. マージンは親には渡されません (親が BFC をトリガーします)
  3. 同じ BFC に属する 2 つの隣接する要素の上下のマージンは重なり合います
  4. 通常のドキュメント フロー レイアウト : フローティング要素の高さは親によって計算されません
  5. 非フローティング要素はフローティング要素の位置をカバーします
  6. マージンは親要素に渡されます
  7. 隣接する 2 つ要素の上下の余白が重なります
開発中のアプリケーション
• 余白の重なりを防止
  • 含めることができますフローティング要素 - 内部フロートをクリアします (フローティング要素をクリアします。原則として、両方の p が同じ BFC 領域に配置されます)
  • 適応型 2 列レイアウト
  • 要素がカバーされるのを防ぐことができますby フローティング要素

#特別な推奨事項

:2020 年の CSS 面接の質問のまとめ (最新)

##2. CSS3

の新しいセレクターと属性はここにリストされています。具体的な使用方法については、CSS3 の新しいセレクターと属性に関する私の記事を確認してください

属性セレクター

##属性セレクター#意味の説明#E[att^=" val"] E[att$="val"]##E[att*="val"]

属性属性値が「val」で始まる要素

属性 att 値がで終わる要素"val"

属性 att の値には「val」文字列要素が含まれています

#構造体擬似クラスセレクター

##E :root は、ドキュメントのルート要素と一致します。HTML ドキュメントの場合は、HTML 要素 ##E:nth-child(n)##E:nth-last-child(n) 親要素の下で同じタグを使用する最初の子要素と一致します。これは、nth-of-type(1)## 下の同じタグを使用する最後の子要素と一致します。親要素。これは nth-last-of-type(1)##E:only- と同等です。 child 親要素の下にある唯一の子要素と一致します。これは、first-child:last-child または:nth-child( と同等です) 1):nth-last-child(1)

• css3 新しい属性

##セレクター	##意味の説明
親要素の n 番目の子と一致します。 、最初の番号は 1
親要素の下から n 番目の子要素と一致します。最初の番号は 1	E:nth-of-type(n)
## :nth-child() に似ていますが、一致するもののみ同じタグを使用する要素	#E:nth-last-of-type(n)
:nth-last-child() に似ていますが、同じタグを使用する要素のみに一致します	E:last-child
## 親要素の最後の要素と一致します。 子要素。nth- と同等です。 last-child(1)	##E:first-of-type
# と同等です。	#E:last-of-type
##E:-type	のみ は、親要素の下で同じタグを使用する唯一の子要素と一致します。これは、first-of-type:last-of-type または:nth-of と同等です。 -type(1):nth-last-of-type(1)
##E :empty	子要素を含まない要素と一致します。テキスト ノードも子要素とみなされます

#変形効果 (移動、拡大縮小、回転、伸縮)##box-shadowシャドウ効果FF3.5、Safari 4、Chrome 3##テキストシャドウFF 3.5、Opera 10、Safari 4、Chrome 3border -colors##FF 3、Safari 4、Chrome 3不透明度ボックス サイズ ##safari 4、chrome 3、opera 10#background-origin背景画像の表示を開始する位置を指定します

##属性	意味の説明	互換性
トランジション	##トランジション効果を設定します ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃変身＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃＃＃＃
##アニメーション	#アニメーション効果
##テキストシャドウ
##境界線に複数の色を設定	## FF3	boder-image
ピクチャボーダー	##FF 3.5、Safari 4、Chrome 3	テキスト オーバーフロー
テキストの切り詰め	IE6、Safari4、Chrome3、Opera10 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ワードラップ＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃自動行折り返し	##IE6、FF 3.5、Safari 4、Chrome 3
border-radius	円コーナー境界線
##不透明度	すべて
#コントロール ボックス モデル構成モード	FF3、Opera 10、Safari 4、Chrome 3	概要
##外側の境界線	FF3、safari 4、chrome 3、オペラ 10	# #background-size
##背景画像のサイズを指定しないでください
##サファリ 4、クローム 3、FF 3	background-clip	##背景を指定します。画像のトリミングを開始する場所を指定します。
#safari 4、chrome 3	rgba	[透明度の設定] を使用して、r、g、b の 3 つのカラー チャネルに基づいてカラー値を設定します。	サファリ 4、クローム 3、FF3、オペラ 10

3. 中央揃えのレイアウト

• 水平方向の中央揃え
  1. インライン要素: text-align:center
  2. ブロックレベルの要素: margin:0 auto
  3. 絶対的な位置決めと移動: absolute 変換
  4. 絶対的な位置決めと負のマージン: absolute margin
  5. flex レイアウト: flex justify-content:center
• 垂直中央揃え
  1. 子要素は単一行のテキスト: line-height:height
  2. ##絶対変換
  ##flex align-items:center
  3. # table:
  display:table-cell;vertical-align: middle
  4. 位置と上と負のマージンを使用
  水平方向と垂直方向の中央揃え

1. 既知の要素の幅と高さ: 絶対位置マージン:auto:

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

2。既知の要素の幅と高さ: 絶対配置負のマージン

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

3.absolutetransform

   p{
     width: 200px;
     height: 200px;
     background: green;

     position:absolute;
     left:50%;    /* 定位父级的50% */
     top:50%;
     transform: translate(-50%,-50%); /*自己的50% */
   }

4.flex justify-content align-items

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.box{ height:600px; display:flex; justify-content:center; //子元素水平居中 align-items:center; //子元素垂直居中 /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box&gt;p{ background: green; width: 200px; height: 200px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. float をクリアする方法は何ですか?また、それぞれの利点と欠点は何ですか?

空の要素を Clear 属性で使用し、空の要素を Clear 属性の後に使用します。

• などのフローティング要素を使用し、CSS で .clear{clear:both;} 属性を割り当ててフロートをクリアします。クリーニングには <br class="clear" /> または <hr class="clear" /> を使用することもできます。
# 利点: シンプル、少量のコードを記述でき、互換性が高い 欠点: 非セマンティックな HTML 要素の追加はコードのセマンティクスに役立たないため、後のメンテナンスコストが高くなります

CSS の overflow 属性を使用して、フローティング要素のコンテナに

overflow:hidden;

または
• overflow:auto; を追加してフローティング要素をクリアします。 、hasLayout は IE6 でトリガーする必要があります。たとえば、親要素のコンテナーの幅と高さを設定するか、zoom:1 を設定します。オーバーフロー属性を追加した後、フローティング要素はコンテナー層に戻り、コンテナーの高さが上がり、フローティング要素をクリーンアップする効果が得られます。
長所: シンプル、コードが少ない、優れたブラウザサポート 短所: 超過サイズが非表示になるため、位置と一緒に使用できません

overflow:hidden

#CSS の :after 擬似要素を :after 擬似要素と組み合わせて使用​​する (これは擬似クラスではなく、要素の後に最も近い要素を表す擬似要素であることに注意してください) と IEhack 、現在の主流と完全に互換性があります。主要なブラウザの場合、ここでの IEhack は hasLayout をトリガーすることを指します。フローティング要素のコンテナに

clearfix

クラスを追加し、このクラスに :after 疑似要素を追加して、要素の末尾に非表示のブロック要素 (Block 要素) を追加してフローティング要素をクリアします。 CSS疑似要素によりコンテナの内部要素の末尾に不可視のスペース「020」またはドット「.」が追加され、フロートをクリアするためにclear属性が割り当てられます。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1; を clearfix クラスに追加する必要があることに注意してください。

• 長所: ブラウザのサポートが充実しており、奇妙な問題が発生しにくい (現在: Tengxun、NetEase、Sina などの大規模 Web サイトで使用されている) 短所: コードが多い。必須 2 行のコードを組み合わせるだけで、主流のブラウザでサポートが可能になります。

#親要素の高さの設定

シンプル、コードが少なく、簡単欠点: 固定高レイアウトにのみ適用可能

5. 純粋な CSS を使用して三角形を作成する原理とは何ですか

以前に三角形を作成するとき、それらは直接書かれていました。私はコードに行き詰まり、その理由を探りませんでした。面接を受けるまで、面接官は CSS で三角形を作成する原理について話すよう私に求めました。私は今... 戻ってきました。次に、私が当時理解していたことを説明しました。プロセスは次のとおりです:

1. 私たちが最もよく知っているボーダー アプリケーションを作成します

.box{
	width:100px;
	height:100px;
	border: 3px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

効果は次のとおりです。

2. 次に、境界値を増やします#

.box{
	width:100px;
	height:100px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

很容易发现, border渲染并不是正方形, 而是梯形的.

3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

.box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

4. 设置透明, 隐藏其中三个三角形

 .box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:transparent transparent transparent #ef4848;
}

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
}

这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

6. 实现三栏布局有哪些方法, 分别描述一下

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

• Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

• 绝对定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
	}
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
	}
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
	}
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

这种方案也简单实用, 并且可以将 <p class="main"></p>元素放到第一位,使得主要内容优先加载!

• 双飞翼布局

<style>
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellow;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}	

</style>
<p class="content">
  <p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p>

• 圣杯布局

<style>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: yellow;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}
</style>
<p class="container">
  <p class="main"></p>
  <p class="left"></p>
  <p class="right"></p>
</p>

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。

7. css3实现0.5px的细线

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<p class="line"></p>

8. link 与 @import 的区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

1. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

1. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

1. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他

9. 开发中为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

10. CSS を最適化してパフォーマンスを向上させる方法は何ですか?

• スタイルを別の CSS ファイルに記述し、head 要素で参照して次のように記述してみてください。個別の CSS ファイル内のコードには、いくつかの利点があります。
  1. コンテンツとスタイルの分離、管理とメンテナンスの容易さ
  2. ページ サイズの削減
  3. CSS ファイルはキャッシュして再利用できます。メンテナンス コストの削減
• @import
• 複雑なセレクターの使用は避けてください。レベルが少ないほど良いです。セレクターのネストは 3 つを超えないようにすることをお勧めします。
• ページのスタイル ファイルを合理化し、未使用のスタイルを削除します。
• CSS 継承を使用してコードの量を削減します。
• 避けてください。重要なことは、他のセレクターを選択することもできます

推奨される関連チュートリアル: CSS ビデオ チュートリアル

以上がWeb フロントエンドの面接で CSS について頻繁に聞かれる 10 の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。