古典的な CSS 面接の質問-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

古典的な CSS 面接の質問

coldplay.xixi

Aug 03, 2020 pm 03:18 PM

CSSの面接の質問

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

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

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

<2>、元素位置的改变

<3>、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

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

<5>、页面渲染初始化

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

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

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

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

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

<1>居中p

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

ログイン後にコピー

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

<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>

ログイン後にコピー

<3>绝对定位水平居中

<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的值？