好程序员web前端开发测验之css部分-创新互联
好程序员
web前端开发测验之css部分
Front End Web Development Quiz CSS 部分问题与解答
Q: CSS 属性是否区分大小写?
1.
ul {
2.
MaRGin: 10px;
3.
}
A: 不区分。
HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。
Q: 行内(inline)元素 设置margin-top和margin-bottom 是否起作用?
A: 不起作用。(答案是起作用，个人觉得不对。)
html 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
替换元素是指用作为其他内容占位符的一个元素。最典型的就是
img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。
讨论
margin-top和margin-bottom对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。
首先我们应该明确外边距可以应用到行内元素，规范中是允许的，不过由于在向一个行内非替换元素应用外边距，对行高
(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-top和margin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样，是有影响的。
而为替换元素设置的外边距会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看
demo:
Q: 对内联元素设置padding-top和padding-bottom是否会增加它的高度?(原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?)
A: 答案是不会。同上题比较纠结，不太明白这里的 dimensions指的是到底是什么意思?放置一边，咱们来分析下。对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后可以看见内边距区域有增加，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则撑开了父元素。看下demo，更好的理解下：
Q: 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化?
A: 不会。
rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
Q: 伪类选择器:checked将作用与input类型为radio或者checkbox,不会作用于option。
A: 不对。
伪类选择器
checked的定义很明显:
The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (
分享题目：好程序员web前端开发测验之css部分-创新互联
本文来源：http://shouzuofang.com/article/cdecjj.html