CSS 部分问题
问题：CSS属性是否区分大小写？
ul {
MaRGin: 10px;
}
答案：不区分。HTML和CSS都对大小写不敏感，但为了更好的可读性和团队协作，一般都使用小写。然而，在XHTML中，元素名称和属性必须使用小写。
问题：行内元素（inline）设置margin-top和margin-bottom是否起作用？?答案：不起作用。HTML中的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。替换元素是指用作其他内容占位符的元素，例如img和input等。非替换元素是指内容包含在文档中的元素，例如段落。对于行内元素，虽然规范允许应用外边距，但对行高没有影响，因此对视觉效果没有影响。然而，对于替换元素，设置的外边距会影响行高。示例
问题：对内联元素设置padding-top和padding-bottom是否会增加它的高度？?答案：不会。对于行内元素，设置左右内边距会有影响。而设置上下内边距，虽然可以看到内边距区域有增加，但对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则会撑开父元素。示例
问题：设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？?答案：不会。rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
问题：伪类选择器:checked将作用于input类型为radio或者checkbox，不会作用于option。?答案：不对。伪类选择器:checked可以应用于任何被选中或切换到打开状态的radio、checkbox或option元素。
问题：在HTML文档中，伪类:root总是指向html元素？?答案：不是。:root指向的是创建的根。这个根可能不是html，如果是片段HTML，没有创建根，则为片段的根。示例
问题：translate()方法能否移动一个元素在z轴上的位置？?答案：不能。translate()方法只能改变x轴，y轴上的位移。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul {color:red;}
li {color:blue;}
答案：蓝色。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul {color:red;}
#must-buy {color:blue;}
答案：蓝色。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}
答案：蓝色。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}
答案：蓝色。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}
答案：蓝色。
问题：以下代码中文本“Sausage”的颜色是什么？
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
答案：蓝色。
问题：#example位置如何变化？
<p id="example">Hello</p>
#example {margin-bottom: -5px;}
答案：向上移动5px。
问题：#example位置如何变化？
<p id="example">Hello</p>
#example {margin-left: -5px;}
答案：向左移动5px。
问题：#i-am-useless会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>
#i-am-useless {background-image: url('mypic.jpg');}
答案：不会。
问题：mypic.jpg会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>
#test2 {
background-image: url('mypic.jpg');
display: none;
}
答案：会被下载。
问题：mypic.jpg会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
答案：不会被下载。
问题：only选择器的作用是什么？
@media only screen and (max-width: 1024px) {argin: 0;}
答案：停止旧版本浏览器解析选择器的其余部分。only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
问题：overflow:hidden是否形成新的块级格式化上下文？
<div>
<p>I am floated</p>
<p>So am I</p>
</div>
div {overflow: hidden;}
p {float: left;}
答案：会形成。会触发BFC的条件有：float的值不为none、overflow的值不为visible、display的值为table-cell, table-caption, inline-block中的任何一个、position的值不为relative和static。
问题：screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？
@media only screen and (max-width: 1024px) {margin: 0;}
答案：浏览器视窗。