前端面试题

前端面试题

这是个人面试的面试题总结，很多都存在于网上，但个人整理出来的，如有错误，请指正。

1.css属性是否区分大小写

如 ul{

MaRGIN:10px;

}

答：不区分。（HTML, CSS都不区分，但为了更好的可读性和团队协作，一般都小写，而在XHTML 中元素名称和属性是必须小写的。）第一题答案摘自学网资讯

2.问：对内联元素设置padding-top和padding-bottom是否会增加它的高度

答：不会。答案来源同上题，要注意行内元素的替换元素，img设置padding-top/bottom是会起作用的。(此题答案同上)


图里面有清楚的显示，它自身的高度依然是默认的15px，但是因为设置了padding-top:100px，他背景的高度增加了.

3.问：如果设置

<p>

的font-size: 10rem;那么当用户重置或拖拽浏览器窗口时，它的文本会不会受到影响？

答：不会。

rem是css3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。(答案来源同上)

这里有一个问题，rem是相对于html的font-size的大小，如果html{font-size:}是vw的单位，那么当拖拽或重置的时候会导致vw改变，而使rem改变，如果是以px为html的字体大小单位，那么如何拖拽或重置是不会改变的。

4.问: 伪类选择器:checked将作用与input类型为radio或者checkbox, 不会作用于option？

答：不对。

可以作用于option，试了下感觉并没有什么用，虽然能选中，但是这个不能改变其中的属性。

<div>
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
<br>
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</div>

<style>
option:checked {
color: red;
}
input:checked {
background: red;
}
</style>

结果如下







这里可以看出option和input的color属性都是写上了的，至于input的background-color属性为什么没有被渲染出来，这是另外一个问题，知道的同学可以解答下，以后我知道了也会补充出来。

可是在不同浏览器和不同版本浏览器上的测试结果又各不相同，甚是头疼。