ホームページ > 記事 > ウェブフロントエンド > 古典的な CSS 面接の質問

古典的な CSS 面接の質問

coldplay.xixi転載: 2020-08-03 15:18:424050ブラウズ

古典的な CSS 面接の質問

#1. 標準ボックスモデルと下位バージョンの IE ボックスモデル (奇妙なモード) の違いは何ですか?

標準ボックスモデル: コンテンツ幅 (コンテンツ) 境界パディングマージン;

IE 低バージョンボックスモデル: コンテンツ幅 (コンテンツ境界パディング) マージン;

主な違いはボックスモデルの幅です。

box-sizing 属性は、要素のボックスモデルの解析モードを制御するために使用されます。デフォルトは content-box
# です。
##content-box: w3c 標準ボックスモデル、要素の高さ/幅属性の設定は、コンテンツ部分の高さと幅を参照します
border- box: IE 従来のボックスモデル。要素の高さ/幅属性の設定は、ボーダーパディングコンテンツパーツの高さと幅を参照します。

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

2. CSS3 属性を使用して三角形を記述します

<style>
p{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
</style>
</head>
<body>
<!-- 想要改变三角形的方向只需要改变border属性值（即tblr） -->
<p></p>
</body>

3. HTML5 を理解するにはどうすればよいですか?

(1) フロントエンド分野において、H5 は単なる技術点ではなく技術の集合体 (技術スタック) であるため、HTML 仕様として理解することはできません。

(2) では、html、css、js の 3 つの側面から分類できます。

セマンティックタグ、新しいフォームタイプ、新しいフォーム属性

CSS: 新しい選択デバイス、トランジション、変換、アニメーション、メディアクエリ

JS: キャンバス描画、ES6

## (3)、機能理解から H5 開発

モバイル Web 開発

レスポンシブ開発

# シングルページアプリケーション開発

# ハイブリッド APP 開発

# WeChat アプレット

# WeChat パブリックアカウント開発

H5 開発全般Web アプリケーションを開発するために、H5 テクノロジースタック (HTML の改善、CSS の改善、JavaScript の改善) を包括的に使用することを指します

4. CSS3 の新機能は何ですか?

(1)、RGBA と透明度

(2)、background-image、background-origin、background-size、background-repeat (3) , word-wrap (分割できない長い単語を折り返す) word-wrap:break-word;

(4), text-shadow: text-shadow: 5px 5px 5px #ccc; (

水平方向の影、垂直方向影、ぼかし距離、影の色

)

(5)、フォントフェイス: 独自のフォントをカスタマイズします

(6)、角丸 (境界線の半径): border-radius 属性は丸い角を作成するために使用されます

(7)、box-shadow box-shadow: 5px 5px 5px #ccc;

(8),

メディアクエリ: 2 つの CSS を定義します。ブラウザのサイズが変わると、異なる属性が使用されます。

5. モバイルプロジェクトで box-sizing: border-box を使用する必要があるのはなぜですか?

box-sizing: border-box; は幅のオーバーフローを回避できます。その結果、水平スクロールバーが表示されます (モバイル項目はすべて非固定幅です)

6.display:none と Visibility:hidden の違いは何ですか?

display: none は、対応する要素を表示せず、ドキュメントレイアウトにスペースを割り当てません (リフローと再描画)

visibility: hidden 対応する要素を非表示にし、ドキュメントレイアウト内の元のスペースを保持します (再描画)

Redraw: レンダーツリー内の一部の要素が属性を更新する必要がある場合、これらの属性は要素の外観とスタイルにのみ影響し、要素には影響しません。背景色などのレイアウトを変更することを再描画と呼びます。

リフロー: リフローは、ページのレイアウトと幾何学的プロパティが変更される場合に必要です。たとえば、

##f35d6e602fd7d0f0edfa6f7d103c1b57、追加または削除などです。表示可能な DOM 要素

2cc198a1d5eb0d3eb508d858c9f5cbdb、元素位置的改变

5bdf4c78156c7953567bb5a0aef2fc53、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

23889872c2e8594e0f446a471a78ec4c、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）

43ad812d3a971134e40facaca816c822、页面渲染初始化

efbfa0de8737dc86eae413541a49df20、浏览器窗口尺寸的改变-resize事件发生时

回流必将引起重绘，重绘不一定会引起回流

7、对BFC（块级格式化上下文block formatting context）的理解？

简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

f35d6e602fd7d0f0edfa6f7d103c1b57居中p

<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body>

2cc198a1d5eb0d3eb508d858c9f5cbdb居中一个浮动的元素上下左右居中

<style>
p{
width: 200px;
height: 200px;
background-color: pink;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<p></p>
</body>

5bdf4c78156c7953567bb5a0aef2fc53绝对定位水平居中

<style>
p{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
 
}
</style>
</head>
<body>
<p></p>
</body>

9、position的值？

static（默认）：按照正常文档流进行排列
relative（相对定位）不脱离文档流，参考自身的top、right、bottom、left进行定位
absolute（绝对定位）参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位
fixed（固定定位）所固定的参照对象是可视窗口的位置

10、常见的兼容性问题

f35d6e602fd7d0f0edfa6f7d103c1b57不同浏览器标签默认的padding和margin不一样，*{padding:0;margin:0}

2cc198a1d5eb0d3eb508d858c9f5cbdbchorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none;

11、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

f35d6e602fd7d0f0edfa6f7d103c1b57父元素的高度无法被撑开

2cc198a1d5eb0d3eb508d858c9f5cbdb与浮动元素同级的非浮动元素（内联元素）会跟随其后

5bdf4c78156c7953567bb5a0aef2fc53若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

f35d6e602fd7d0f0edfa6f7d103c1b57 父级p定义高度

2cc198a1d5eb0d3eb508d858c9f5cbdb 最后一个浮动元素后加空p标签，并添加样式clear：both

5bdf4c78156c7953567bb5a0aef2fc53 包含浮动元素的父标签添加样式overflow为hidden和auto

23889872c2e8594e0f446a471a78ec4c 父级定义zoom

相关教程推荐：CSS视频教程

以上が古典的な CSS 面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSのdisplay属性の値は何ですか？それぞれの役割は何ですか?次の記事：CSSのdisplay属性の値は何ですか？それぞれの役割は何ですか?

続きを見る