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

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

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

、元素位置的改变

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

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

、页面渲染初始化

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

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

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

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

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

居中p

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

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

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

绝对定位水平居中

<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、常见的兼容性问题

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

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

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

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

浮动带来的问题：

父元素的高度无法被撑开

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

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

清除浮动的方式：

父级p定义高度

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

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

父级定义zoom

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

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

声明

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

マウスの動きのシミュレーションApr 22, 2025 am 11:45 AM

ライブトークやクラス中にインタラクティブなアニメーションを表示しなければならなかった場合、スライドと対話するのが必ずしも簡単ではないことを知っているかもしれません

Astro ActionsとFuse.jsでのパワー検索Apr 22, 2025 am 11:41 AM

Astroを使用すると、ビルド中にほとんどのサイトを生成できますが、fuse.jsのようなものを使用して検索機能を処理できるサーバー側のコードが少しあります。このデモでは、ヒューズを使用して、個人の「ブックマーク」セットを検索します。

未定義：3番目のブール値Apr 22, 2025 am 11:38 AM

ドキュメントが保存されている間にGoogleドキュメントに表示されるものと同様に、プロジェクトの1つに通知メッセージを実装したかったのです。言い換えれば、a

三元声明の防衛Apr 22, 2025 am 11:25 AM

数ヶ月前、私はハッカーのニュースに出演していました（1つのように）。あなたがこのアイデアに慣れていない場合（私のように

多言語翻訳にWeb Speech APIを使用しますApr 22, 2025 am 11:23 AM

サイエンスフィクションの初期の頃から、私たちは私たちに話しかける機械について空想してきました。今日は当たり前です。それでも、作成のための技術

Jetpack GutenbergブロックApr 22, 2025 am 11:20 AM

私はその日私たちにワードキャンプにいたので、グーテンバーグがコアにリリースされたときのことを覚えています。数ヶ月が今から経過しているので、ますます私たちのことを想像してください

VUEで再利用可能なページネーションコンポーネントを作成しますApr 22, 2025 am 11:17 AM

ほとんどのWebアプリケーションの背後にあるアイデアは、データベースからデータを取得し、可能な限り最良の方法でユーザーに提示することです。そこでデータを扱うとき

「ボックスシャドウ」とクリップパスを一緒に使用しますApr 22, 2025 am 11:13 AM

＆＃039;は、理にかなっていると思われることを非常に実行できる状況を少し段階的に実行しますが、CSSのトリックでそれを成し遂げることができます。これで

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。