Webフロントエンド開発——BAT面接問題まとめ及び回答02

テキストリンク:https://blog.csdn.net/weixin_44253336/article/details/100593377
Table of Contents
目次:
二、HTML&CSS編:
21、cssで文字を垂直と水平に重ねることができる2つの属性は何ですか?
22、pxとemの違い.
23、「reset」のCSSファイルを説明し、どのように使用するか.知ってるcssですか?彼らの違いを知っていますか.
24、display:noneとvisibility:hiddenの違いは何ですか.
25、CSSでのlinkと@importの違いは
26、なぜスタイルを初期化するのですか.
27、BFCって何?
28.WEB規格及びW 3 Cに対する理解と認識
29、行内の要素はどれらがありますか?ブロックレベルの要素はどれらがありますか?空の要素はどれらがありますか?CSSのボックスモデル?
30、フロントエンドページはどの3層で構成されていますか.それぞれは何ですか.役割は何ですか.
31、どのようにdivを中心にして、どのように1つのフローティング要素を中心にしますか?
32、displayの値をリストして、彼らの役割を説明します.positionの値、relativeとabsoluteの位置決め原点は?
33、どのcss属性が継承できますか?
34、bラベルとstrongラベル、iラベルとemラベルの違いは?
35、行の要素、ブロックレベルの要素、ボックスモデルはありますか?
36、行内の要素を上の要素から10 px離れて、margin-topとpadding-topを加えてもいいですか.
三、JS基礎編
1、javascriptのtypeofが返すデータ型
2、例えば3種類の強制タイプ変換と2種類の暗黙タイプ変換?
3、split()join()の違い
4、配列方法pop()push()unshift()shift()

二、HTML&CSS編：

21、cssで文字を垂直と水平に重ねることができる2つの属性は何ですか?

垂直方向:line-height水平方向:letter-spacingそれでは問題が来て、letter-spacingの妙用についてどれらがあることを知っていますか?答え:inline-block要素間の改行文字のスペースギャップの問題を解消するために使用できます.

22、pxとemの違い。

pxもemも長さ単位で、違いはpxの値が固定されていることで、指定がいくらなのか、計算が容易です.Emの値は固定されておらず、emは親要素のフォントサイズを継承します.ブラウザのデフォルトフォントの高さは16 pxです.したがって、調整されていないブラウザは、1 em=16 pxと一致します.では、12 px=0.75 em、10 px=0.625 emである.

23、「reset」のCSSファイルを説明し、どのように使用するか。知ってるcssですか?彼らの違いを知っていますか。

リセットスタイルは非常に多く、フロントエンドの開発者はCSSファイルをリセットし、どのように使用するかを知っているに違いありません.彼らは盲目的にやっているのか、それともなぜやっているのか知っているのか.なぜなら、異なるブラウザはいくつかの要素に対して異なるデフォルトスタイルを持っており、処理しないと、異なるブラウザの下で必要なリスクが存在したり、劇的な性が発生したりするからです.リセットスタイルファイルの代わりにNormalizeを使用する可能性があります.すべてのスタイルスタイルをリセットしていませんが、適切なデフォルトのスタイル値は1セットしか提供されていません.多くのブラウザを一貫性と合理性に達させることができますが、他のもの(太字のタイトルなど)を乱すことはありません.この点、各リセットリセットリセットはできません.HTMLのaudio要素が一致していないか、line-heightが一致していないかのような奇妙な癖を処理しています.

24、display:noneとvisibility:hiddenの違いは何ですか。

display:対応する要素を非表示にし、その要素の元の空間を占有しません.Visibility:対応する要素を非表示にし、その要素の元の空間を占有します.すなわち、CSSディスプレイ:none属性を使用すると、HTML要素(オブジェクト)の幅、高さなどの各種属性値が「失われる」.visibility:hiddenプロパティを使用すると、HTML要素(オブジェクト)は視覚的に見えない(完全に透明)だけで、占有する空間位置は依然として存在します.

25、CSSでのlinkと@importの違いは

Linkはhtmlタグに属し、@importはCSSで提供されるページのロード時にlinkが同時にロードされ、@importが参照するCSSはページのロードが完了した後に参照がロードされますCSS@importie 5以上でしか認識できませんが、linkはhtmlラベルであり、ブラウザ互換性の問題はありません.Link導入スタイルの重みが@importより大きい参照(@importは参照スタイルを現在のページにインポートします).

26、なぜスタイルを初期化するのですか。

ブラウザ互換性の問題で、ブラウザによってラベルに対するデフォルトのスタイル値が異なり、初期化しないと異なるブラウザ間の表示差が発生しますが、CSSの初期化は検索エンジンの最適化に小さな影響を与えます.

27、BFCって何?

BFC(ブロックレベルフォーマットコンテキスト)は、新しいBFCを作成したボックスが独立してレイアウトされており、ボックス内の要素のレイアウトはボックスの外の要素に影響しません.同じBFC内の2つの隣接する箱が垂直方向にmarginが重なるという問題が発生する.BFCとは、ブラウザに独立したレンダリング領域が作成されていることを意味します.この領域内のすべての要素のレイアウトは、ブロックレベルの要素にのみ作用する領域外要素のレイアウトには影響しません.

28.WEB規格及びW 3 Cに対する理解と認識

答え:ラベルの閉鎖、ラベルの小文字、むやみにネストしない、検索ロボットの検索確率を高める、外鎖cssとjsスクリプトを使用する、構造行為の表現の分離、ファイルのダウンロードとページの速度が速く、内容はより多くのユーザーにアクセスされ、内容はより広範な設備にアクセスされ、より少ないコードとコンポーネントを使用することができ、メンテナンス、改版が容易で、ページの内容を変更する必要がなく、印刷バージョンを提供し、内容をコピーする必要がなく、Webサイトの使いやすさを向上させる.

29、行内の要素はどれらがありますか?ブロックレベルの要素はどれらがありますか?空の要素はどれらがありますか?CSSのボックスモデル？

(1)CSS仕様では、各要素にはdisplay属性があり、その要素のタイプを決定し、各要素にはdivデフォルトのdisplay属性値が「block」で、「ブロックレベル」要素になるなどのデフォルトのdisplay値がある.spanのデフォルトdisplayプロパティ値は「inline」で、「行内」要素です.ブロックレベル要素:div p h 1 h 2 h 3 h 4 formul(2)行内要素:a b span img input select strong(強調語調)ブロックレベル要素:div ul ol li dl dt dd h 1 h 2 h 3 h 4...p(3)有名な空要素:

---

CSSのボックス型?(1)2種類、IEケースモデル、標準W 3 Cケースモデル;IEのcontent部分にはborderとpadingが含まれている.(2)ボックスモデル:コンテンツ(content)、パディング(padding)、境界(margin)、ボーダー(border).

30、フロントエンドページはどの3層で構成されていますか。それぞれは何ですか。役割は何ですか。

答:構造層Htmlは層CSS挙動層jsを表す.

31、どのようにdivを中心にして、どのように1つのフローティング要素を中心にしますか?

divに幅を設定しmargin:0 autoプロパティを追加

div{
width:200px;
margin:0 auto;
}

中央にあるフローティング要素は、コンテナの幅と幅500、高さ300のレイヤ設定レイヤの外側距離を決定します.

.div {
Width:500px ; height:300px;//      
Margin: -150px 0 0 -250px;
position:relative;    
background-color:pink;//     
left:50%;
top:50%;
}

32、displayの値をリストして、彼らの役割を説明します。positionの値、relativeとabsoluteの位置決め原点は?

ディスプレイの値:

blockはブロックタイプ要素のように表示されます.

noneデフォルト.行内の要素タイプと同じように表示されます.

inline-blockは行内要素のように表示されますが、その内容はブロックタイプ要素のように表示されます.

list-itemはブロックタイプ要素のように表示され、スタイルリストタグが追加されます.

2.positionの値

*absolute:static位置決め以外の最初の親要素に対して位置決めする絶対位置決め要素を生成します.

*fixed(古いIEではサポートされていません):ブラウザウィンドウに対して絶対的な位置決め要素を生成します.

*relative:相対的に位置決めされた要素を生成し、通常の位置に対して位置決めします.

*staticデフォルト.配置されていません.要素は通常のストリームに表示されます.

*(top,bottom,left,right z-index宣言を無視)

33、どのcss属性が継承できますか?

継承可能:font-size font-family color,ul li dl dd dt;継承不可:border padding margin width height;

34、bラベルとstrongラベル、iラベルとemラベルの違いは?

strongとemには意味があり、bラベルとstrongラベルはありません.

35、行の要素、ブロックレベルの要素、ボックスモデルはありますか?

1、インライン要素(inline element)a–アンカーabbr–略称acronym–頭字b–太字(推奨しない)big–大フォントbr–改行em–強調font–フォント設定(推奨しない)i–斜体img–ピクチャinput–入力ボックスlabel–表ラベルs–中線(推奨しない)select–項目選択small–小フォントテキストspan–常用インライン容器テキスト内ブロックstrikeの定義–中スクライブstrong–太字強調sub–下付きsup–上付きtextarea–複数行テキスト入力ボックスtt–電報テキストu–下線var–変数2の定義、ブロックレベル要素address–アドレスblockquote–ブロック参照center–中揃えブロックdir–ディレクトリリストdiv–共通ブロックレベル容易、css layoutの主要ラベルdl–定義リストfieldset–form制御グループform–インタラクティブフォームh 1–大見出しh 2–副見出しh 3–3級見出しh 4–4級見出しh 5–5級見出しh 6–6級見出しhr–水平区切り線isindex–input prompt menu–メニューリストnoframes–framesオプションです.(frameがサポートされていないブラウザに対してこのブロックの内容を表示する)noscript–オプションスクリプトの内容(scriptがサポートされていないブラウザに対してこの内容を表示する)ol–ソートフォームp–段落pre–フォーマットテキストtable–表ul–非ソートリスト3.CSSボックスモデルは、コンテンツ、パディング、ボーダー、外部境界の4つの部分から構成されています.

36、行内の要素を上の要素から10 px離れて、margin-topとpadding-topを加えてもいいですか。

いいえ、margin-top、padding-topは無効です.

三、JS基礎編

1、javascriptのtypeofが返すデータ型

object number function boolean underfind string
typeof null;//object
typeof isNaN;//
typeof isNaN(123)
typeof [];//object
Array.isARRAY(); es5
toString.call([]);//”[object Array]” var arr=[];
arr.constructor;//Array

2、例えば3種類の強制タイプ変換と2種類の暗黙タイプ変換?

強制(parseInt,parseFloat,Number())暗黙(=)1="1"//true null=undefined//true

3、split()join()の違い

前者は配列にカットされた形式で、後者は配列を文字列に変換する

4、配列方法pop()push()unshift()shift()

Push()末尾追加pop()末尾削除Unshift()ヘッダ追加shift()ヘッダ削除