Front End Web Development Quiz CSS部分の問題と解答 Q:CSS属性は大文字と小文字を区別しますか?ul {
MaRGin: 10px;
}
Q:行内(inline)要素設定margin-topとmargin-bottomは機能しますか?A:役に立たない.△答えは役に立つので、個人的には間違っていると思います.htmlの要素は置換要素(replaced element)と非置換要素(non-replaced element)に分けられます. 置換要素は、他のコンテンツプレースホルダとして使用される要素を指す.最も典型的なのはimgで、画像ファイルを指しているだけです.およびほとんどのフォーム要素も、inputなどに置き換えられます. 非置換要素とは、コンテンツがドキュメントに含まれる要素を指す.たとえば、1つの段落のテキストの内容が要素自体に含まれている場合、この段落は非置換要素です. margin-topおよび
margin-bottomが行内要素に対して機能するかどうかを議論するには、行内置換要素および行内非置換要素についてそれぞれ議論する.まず、外距離は行内要素に適用できることを明確にしなければならない.仕様では許容されるが、1つの行内非置換要素に外距離を適用するため、行高(line-height)には何の影響もない.外の距離は実際には透明なので.したがって、宣言
margin-topおよび
margin-bottomには視覚的な効果はありません.その理由は、行内の非置換要素の外側距離が1つの要素の行の高さを変更しないからです.行内の非置換要素の左右の余白には影響しません.一方、置換要素に設定された外側の距離は行の高さに影響し、上下の外側の距離の値に応じて行の高さが増加または減少する可能性があります.行内置換要素の左右の余白は、非置換要素の左右の余白と同じです.見てみましょうhttp://codepen.io/paddingme/pen/JwCDF
Q:インライン要素にpadding-topとpadding-bottomを設定すると、その高さが増加しますか?(原題はDoes setting padding-top and padding-bottom on an inline element add to its dimensions?)A:答えはできません.上の問題と比較して、ここのdimensionsがいったいどういう意味なのかよく分かりません.片側に置いて、分析しましょう.行内要素の場合は、左右の内側の余白を設定し、左右の内側の余白が表示されます.一方、上下の内側の余白を設定すると、背景色を設定すると内側の余白領域が増加していることがわかります.行内の非置換要素では、行の高さには影響しません.親要素はサポートされません.置換要素の場合は、親要素が拡張されます.demoを見て、もっとよく理解してください.http://codepen.io/paddingme/pen/CnFpa Q:pのfont-size:10remを設定し、ユーザーがブラウザウィンドウをリセットまたはドラッグすると、テキストサイズも変化しますか?A:いいえ.remは、html要素のfont-sizeのサイズを基準とした相対的なメトリック単位であり、テキストのサイズはウィンドウのサイズに応じて変化しません. Q:疑似選択器:checkedは、inputタイプのradioまたはcheckboxに作用し、optionには作用しない.A:いいえ.擬似クラスセレクタcheckedの定義は明らかである.) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.
Q: HTML ， :root html ？ A: （ ==||）。 :root html CSS3 ？ ：
。 html ， html， ， 。 URL data URL （Firefox, Chrome, Safari, Opera）， ：
data:application/xhtml+xml,:root { background: green; } html { background: red !important; }
Q:translate() z ？ A: 。translate() x ，y 。
Q: “Sausage” ?
Milk
Sausage
ul {color:red;}
li {color:blue;}
A: blue。
Q: “Sausage” ?
Milk
Sausage
ul {color:red;}
#must-buy {color:blue;}
A: blue。
Q: “Sausage” ?
Milk
Sausage
.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}
A: blue。
Q: “Sausage” ?
Milk
Sausage
ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}
A: blue。
Q: “Sausage” ?
Milk
Sausage
ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}
A: blue。
Q: “Sausage” ?
Milk
Sausage
ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}
A: blue。
Q: “Sausage” ?
Milk
Sausage
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
A: blue。
Q:#example ： Hello
#example {margin-bottom: -5px;}
A: 5px。
Q: #example ： Hello
#example {margin-left: -5px;}
A: 5px。
#i-am-useless ？
#i-am-useless {background-image: url('mypic.jpg');}
A:
mypic.jpg ？
#test2 {
background-image: url('mypic.jpg');
display: none;
}
A: 。
mypic.jpg ？
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
A: 。
Q: only ？ @media only screen and (max-width: 1024px) {argin: 0;}
A： 。 only ， 。 only Media Query Media Type 。 ： （Media Queries） ， ， only ； (Media Queries) (Media Type) ， ， only screen； Media Qqueries ， only， 。
Q:overfloa:hidden ？
I am floated
So am I
div {overflow: hidden;}
p {float: left;}
A： 。 BFC ：
float none。
overflow visible。
display table-cell, table-caption, inline-block 。
position relative static。
Q: screen ？ @media only screen and (max-width: 1024px) {margin: 0;}
A:
：
tips: ， ， 。
CSS ：
CSS
CSS
CSS
CSS
CSS 、
31 CSS
：
？ ， ：1, 1, 1, 1 0, 2, 0, 1 * (a) 0， style ； * (b) id ； * (c) 。 class (.example) ( li[id=red])； * (d) ( table、p、div ) ( :first-line )； * (*) 0 ； * ， 。
CSS ： CSS ， 。 #divBox p span.red{color:red;}， ： html class='red' span ， ， p ， p id divBox div ， 。 。
display:none visibilty:hidden ： ：
What is the difference between visibility:hidden and display:none?
display:none visibility:hidden ！
display:none visibility:hidden ， ， ， `` visibility:hidden ， （ ）， ， display:none` （ ）
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. so for example:
test | Appropriate style in this tag | test
display:none would be:
test | | test
visibility:hidden would be:
test | | test
In visibility:hidden the tag is rendered, it just isn't seen on the page.
， ：
： : 、
HTML Gzip
FE url
BFC( block formatting contexts )
BFC Margin Collapse
CSS BFC
BFC(Block Formatting Context)
margin，padding 《CSS 》