フロントエンド面接問題まとめ--css編

サマリ

インターンシップ秋招の面接を経て、いくつかの先端の試験問題を総括して、ここはcssの章で、答えは簡単な答えで、詳しくは自分で検索することができます

1.ボックスモデル

margin,border,padding,contentは標準ボックスモデルの中で、widthはcontentの幅をIE怪異ボックスモデルの中で設定して、widthはcontent+paddingの幅を設定します

標準box-sizing:content-box

ie怪異box-sizing:border-box

2.位置決め

absolute:絶対位置は、ドキュメントフローから離れています.火の親要素がrelativeまたはabsoluteのように、親要素に対して相対的になります.そうでない場合は、ルート要素をずっと上に探します.
relative:ドキュメントストリーム内の本来の位置に対して相対的に位置決めされます.オフセット後も元の位置が占有されます.
fixed:スクロール時にスクロールバーに従ってスクロールしないで、可視ウィンドウに対してbodyまたは親要素ではありません

3.垂直水平中央

用flexレイアウト

.parent {
display:flex;
justify-content:center;
align-items: center;
}

この方法は、自分の縦横が分からない場合の親の設定に適用されます.justify-contentは主軸上の位置合わせを設定します.align-itemsは、交差軸の位置合わせを設定します.

負マージン法

.box-container{
	    position: relative;
        width: 300px;
	    height: 300px;
}
.box-container .box {
	    width: 200px; 
	    height: 100px;
	    position: absolute; 
	    left: 50%; 
	    top: 50%;
	    margin-top: -50px;    /*       */
	    margin-left: -100px;    /*       */
}

この方法は自分の長さと幅を知らなければならない.

css 3のtransform

.box {
        position: relative; 
        left: 50%; 
        top: 50%;
        transform: translate(-50%, -50%);    
}

この方法は自分の長さと幅を知らなくてもいい.

4.フローティングのクリア

フローティングをクリアするのは、主に、子要素のフローティングによる親要素の内部高さが0の問題を解決するためです.簡単に言えば、サブエレメントが浮動していると親エレメントの高さが支えられず、下のものが上に上がります.

最後のフローティングラベルの後、clear:bothを設定するラベルを追加します.無意味なラベル、意味化の差

を追加

親要素overflow:hiddenを追加し、BFCをトリガすることでフローティング

のクリアを実現する.

after擬似要素を用いてフローティング

をクリアする.

    .clearfix:after{/*                    */
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

5.スタイルの階層関係、セレクタの優先度、スタイルの競合

優先度:インライン>内部スタイルシート>外部スタイルシート

セレクタ優先度:要素d c b aは右側からサイズ比、完全に同じであれば後書き優先

である.

競合:上記のアルゴリズムにより優先度を上げればよいし、important

も使用できる

セレクタはどれらがあります:id、クラス、ラベル、サブセレクタ、含む、隣接する、グループ

6.pxとemとremの違い

remは相対寸法も表し、参照オブジェクトがルート要素htmlのfont-size emは相対長さ単位である.現在のオブジェクト内のテキストに対するフォントサイズ

7.css三列レイアウト

聖杯レイアウト(両側定幅、中間適応)はcontainerである.containerにpaddingをleftとrightの予約位置に設定します.センター、left、rightはfloatに設定されています.センターを100%に設定し、他の2つの固定幅を設定します.センターが自分で1行を占め、もう2つは次の行を占めているのが見えます.だから、leftとrightを前に予約した席に置きたい.負の余白を使用してleftを-100%に設定すると、

になります.