2017先端試験問題のCss編(1)

1 . CSS ？
答え:区別しない.HTML、CSSは大文字と小文字に敏感ではありませんが、より読みやチームワークのためには小文字が一般的ですが、XHTMLでは要素名や属性は小文字でなければなりません.
2 . (inline) margin-top margin-bottom ？padding-top padding-bottom ？
答え:行内の要素は、置換要素(replaced element)と非置換要素(non-replaced element)に分けられます.

置換要素:他のコンテンツプレースホルダとして使用される要素を指す.例えば、img、inputなどが作用する.

非置換要素:コンテンツがドキュメントに含まれる要素、例えばspanなどが機能しないことを指す.

3 . p font-size:10rem， ， ？
答:remはhtmlルート要素のfont-sizeのサイズを基準とした相対的なメトリック単位であり、テキストのサイズはウィンドウのサイズによって変化しません.
4 . translate() z ？
できません.translate()法はx軸,y軸上の変位のみを変えることができる.
5 . only ？ @media only screen and (max-width: 1024px) {margin: 0;}
答え:古いバージョンのブラウザ解析セレクタの残りの部分を停止します.onlyは、メディアクエリーをサポートしていないブラウザを排除するために使用される特定のメディアタイプを決定します.実はonlyはMedia QueryをサポートしていないがMedia Typeをサポートしているデバイスに対してスタイルシートを隠すために使われることが多い.主にメディア特性(Media Queries)をサポートするデバイスで、通常スタイルを呼び出し、onlyが存在しない場合.メディアプロパティ(Media Queries)をサポートしないがメディアタイプ(Media Type)をサポートするデバイスでは、screenではなくonlyを先に読むため、スタイルを読まない.またMedia Qqueriesをサポートしていないブラウザではonlyをサポートしているかどうかにかかわらずスタイルは採用されません.
6 . CSS
答:ブラウザCSSマッチングは左から右ではなく、右から左へ検索します.例えば#divBox p span.red{color:red;},ブラウザの検索順序は、html内のすべてのclass='red'のspan要素を検索し、見つけた後、その親要素にp要素があるかどうかを検索し、pの親要素にidがdivBoxのdiv要素があるかどうかを判断し、すべて存在する場合に一致します.ブラウザが右から左に検索するメリットは、関係のないスタイルルールや要素をできるだけ早くフィルタリングすることです.
7 . display:none visibilty:hidden ：
答え:display:noneとvisibility:hiddenはいずれもページ上の要素を隠す機能ですが、両者には違いがあります.visibility:hidden属性はオブジェクトを非表示にしますが、そのオブジェクトがページに占める空間は変わりません(見えませんが触ることができます)、空白の領域を残したことに等しく、display:none`属性はこのオブジェクトを完全に消すことができます(見えなくても触ることができません)
8 . BFC(Block Formatting Context) 。：
答え:フローティング要素と絶対位置決め要素、非ブロックボックスのブロックレベルコンテナ(inline-blocks、table-cells、table-captionsなど)、overflow値が「visiable」でないブロックレベルボックスは、コンテンツに新しいBFC(ブロックレベルフォーマットコンテキスト)を作成します.
BFCがトリガーされる条件は次のとおりです.

floatの値はnoneではありません.

overflowの値はvisibleではありません.

displayの値はtable-cell,table-caption,inline-blockのいずれかです.

positionの値はrelativeおよびstaticではありません.

折りたたみの結果:

の2つの隣接する外側距離が正数である場合、折り畳み結果は両者の間の大きな値である.

の2つの隣接する外距離が負の場合、折りたたみ結果は両者の絶対値の大きな値である.

の2つの外側が正と負の間にある場合、折り畳み結果は両者の加算和である.

9 .
優先度が段階的に増加

0.要素(タイプ)セレクタ(h 1)および擬似要素セレクタ(:before)

1.クラスセレクタ(.demo)プロパティセレクタ([type="radio"))

2.IDセレクタ(#demo)

インラインスタイル

スタイル宣言で使用する場合!importantルールの場合、スタイル宣言はCSSの他の宣言を上書きします.いくつかの経験則:

Neverはいつまでも全局範囲のcssで使用しないでください!important

Onlyは、全局または外部css(例えば、参照されているExtJsまたはYUI)を上書きする必要がある特定のページでのみ使用されます.important

Neverはあなたのプラグインで使用しないでください!important

Alwaysスタイルルールを使用する優先度を最適化して問題を解決します.important

10 . FOUC ？ FOUC
答え:Flash of Unstyled Content(FOUC)ドキュメントスタイルが一時的に無効になるドキュメントのhead要素にlink要素を追加するかscript要素を追加するだけでFOUCの発生を防ぐことができる.
link要素ソリューション

script要素ソリューション