html+css面试题

最新推荐文章于 2024-08-09 20:45:54 发布

fly__girl_

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量953

点赞数

CSS

Q1:CSS属性区分大小写吗？

ul {

MaRGin: 10px;

}

A:NO(不区分)

个人见解

这对于初学者来说，可能会一时拿不定主义，他们区分大小写吗？但话说回来，如果你有使用过DW或者PSD生成的页面，你会发现你的代码中会有很多类似下面这样的代码：

.box {

BORDER:1PX SOLID RED;}

但这个样式完全是有效的。不过有一点需要特别注意，如果你的HTML的结构中定义的是大写类名，而在样式中使用的是小写的，那么他们是有区别的。我们来看一个简单的演示示例：

Q2:你能给内联元素设置margin-top和margin-bottom吗？

A:No(不能设置)

个人见解

在我接触CSS知识的时候，我就知道margin-top和margin-bottom对于一个内联元素是根不起作用的。简单的理解，margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。(有关于更多的margin知识介绍，可以看看瑶姐对margin的系列介绍)。不过在此处，我们只是来演示一个示例。

假例我们有一个这样的DEMO：

HTML

<div>

<span>我是一个行内元素span</span>

<strong>我是一个行内元素strong</strong>

<span>我是一个行内元素span</span>

<strong>我是一个行内元素strong</strong>

<span>我是一个行内元素span</span>

<strong>我是一个行内元素strong</strong>

<span>我是一个行内元素span</span>

<strong>我是一个行内元素strong</strong>

<span>我是一个行内元素span</span>

<strong>我是一个行内元素strong</strong></div>

CSS

div {

width: 300px;

margin: 20px auto;

border: 1px solid green;

padding: 5px;

line-height: 1.4;}span {

border: 1px solid blue;}strong {

border: 1px solid orange;}span,strong {

margin-top: 5px;

margin-bottom: 5px;}

margin-top和margin-bottom应用到内联元素上，这在规范中是允许的，不过由于在向一个行内非替换元素（如img）应用外边距，它对行高没有任何影响。由于外边距实际上是透明的，所以这个声明没有任何视觉效果。其原因就在于行内非替换元素的外边距(margin-top和margin-bottom)不会改变一个元素的行高。

我们来演讲一下，增加margin-top和margin-bottom值，对内联元素span和strong是否有所影响：

效果再次证明，margin-top和margin-bottom对于一个内联元素来说是没有任何影响的。

Q3:内联元素设置padding-top和padding-bottom会添加到元素的尺寸上吗？

A:NO(不会)

个人见解

对于内联元素，margin和padding存在一个重大的区别。为了说明这一点，我们给行内元素设置一个padding-top和padding-bottom的值，另个给其附上一个背景色，行内元素的背景会向上和向下面延伸。

理论上，对于有背景色和行内距的行内非替换元素，背景可以向元素上面和下面延伸：

strong {

border: 1px solid orange;

background: orange;

padding-top:10px;

padding-bottom: 10px;}

当然行高没有改变，不过由于内距确实延伸了背景，所以背景应该可见，是这样吗？不错，背景确实可见，它与前面的行重叠，这正是我们期望的结果。但回到试题上来，padding-top和padding-bottom并没有增加行内元素的尺寸，如背景延伸所示，他们重叠在一起了。

Q4:如果你对<p>元素设置字体大小:10 rem, 当用户调整大小/拖浏览器窗口时文本将相应变化大小么?

A:NO（不能）

个人见解

REM是CSS3中新增的一个单位。在W3C官网上是这样描述rem的——“font size of the root element”。也就是说rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。但他并不能实现，随着浏览器的缩小或放大，而改变元素的字号。他仅能通过修改<html>的字号大小来进行修改。接下来模仿一下这个问题的场景：

html {

font-size: 16px;}p {

font-size: 2rem;}

接下来拖动浏览器大小，看其是否会修改p元素的字号：

Q5:伪类:checked将选择input控件的单选或复选框,但不会选择

A:False(假的)

个人见解

这一题我也做错了，最初认为:checked是只对单选按钮和复选框有效。回想到HTML中定义了checked属性时，除了可以为单选按钮和复选框之外还可以为select的option设置这样的属性值。其作用表示的是选中。但万万没有想到option也可以通过:checked来设置选中的样式。下面的一段代码是来自于Mozilla:

/* any "checkable" element */:checked {

width: 50px;

height: 50px;}

/* only radio elements */

input[type="radio"]:checked {

margin-left: 25px;}

/* only checkbox elements */input[type="checkbox"]:checked {

display: none; }

/* only option elements */option:checked {

color: red;}

Q6:在一个HTML文档中,伪类:root总是指<HTML>元素?

A:True(是的)

个人见解

在绝大多数情况下你可能遇到，:root在Web页上指的就是<html>元素。在HTML文档中<html>元素永远是最高级别的父元素。所以他是:root可想而知的。然而CSS是一种表现层，在其他的文档格式中，如svg和XML，:root可以引用不同的元素。无也许是什么标记语言，:root总是选择文档树中最顶部的元素。

来看一个简单的示例：

:root {

background-color: red;

padding: 2em;

border:5px solid green;}

body {

background-color: white;

padding: 1.5em;}

看个演示图，更形象一些：

扩展阅读

· :root

· :root pseudo-class

Q7:translate()函数可以在z轴移动一个元素的位置吗?

A:False(不能)

个人见解

使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。他是一个2D的transform，但他不能让元素在Z轴上进行移动。不过在3D的transform函数可以让元素在Z轴上进行缩放效果。

扩展阅读

· Transform

Q8:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

ul {

color: red;}li {

color: blue;}

A:Blue(蓝色)

个人见解

这是一个很基础的试题，考的就是选择器的权重问题，上面两个选择器都是标签选择器，按照选择器的权重等级之分，他们都是“０，０，０，１”。但同一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。如果同一个元素具有相同的权重，处在后面的样式就会比前面的声明重。将上面的示例制作一个演示图：

Q9:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

ul li {

color: red;/*0,0,0,2*/}#must-buy {

color: blue;/*0,1,0,0*/}

A:Blue(蓝色)

个人见解

在选择器权重当中，一个ID的权重是“0,1,0,0”，而一个标签元素是0,0,0,1。针对这个示例来说，前一个选择器权重是"0,0,0,2"；后者的权重是“0,1,0,0”。因此，在这里他的颜色是蓝色。

Q10:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

.shopping-list .favorite {

color: red;/*0,0,2,0*/}#must-buy {

color: blue;/*0,1,0,0*/}

A:Blue(蓝色)

Q11:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

ul#awesome {

color: red;/*0,1,0,1*/}ul.shopping-list li.favorite span {

color: blue;/*0,0,2,3*/}

A:Blue(蓝色)

个人见解

这个时候大家可能会感到很奇怪了，为什么这个还是蓝色的，而不是红色的。主要是他们作用的是不在同一个元素之上。

Q12:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

ul#awesome #must-buy {

color: red;/*0,2,0,1*/}.favorite span {

color: blue!important;/*1,0,0,1,1*/}

A:Blue(蓝色)

Q13:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

ul.shopping-list li .highlight {

color: red;/*0,0,2,2*/}ul.shopping-list li .highlight:nth-of-type(odd) {

color: blue;/*0,0,3,2*/}

A:Blue(蓝色)

Q14:“Sausage”文本的颜色是什么？

HTML

<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>

CSS

#awesome .favorite:not(#awesome) .highlight {

color: red;/*0,2,2,0*/}#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {

color: blue;/*0,1,3,0*/}

A:Red(红色)

个人见解

问题8~14都是在考CSS选择器相关方面的知识，而其中最主要的是要理清楚选择器的权重问题。在CSS中，选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如"0,0,0,0"。一个选择器的具体特殊性如下确定：

· 对于选择器中给定的各个ID属性值，加“0,1,0,0”。

· 对于选择器中给定的各个类属性值，属性选择或伪类，加"0,0,1,0"。

· 对于选择器中给定的各个元素为伪元素，加“0,0,0,1”。

· 结合符和通配符“*”以及":not()"没有任何的加分权。

· 对于行内样式，加为“1,0,0,0”

· 对于"!important"加分高于上面的一切，将变成“1,0,0,0,0”

下面有几张图，能让你倍感亲切：

Q15:#example元素位置会发生什么？

HTML

<p id="example">Hello</p>

CSS

#example {

margin-bottom: -5px;}

A:"#example"之后的所有元素会向上移动“5px”。

Q16:#example元素位置会发生什么？

HTML

<p id="example">Hello</p>

CSS

#example {

margin-left: -5px;}

A:"#example"自身向左移动“5px”。

个人见解

试题15和16测试的是margin对盒模型的影响。在CSS中，可以给元素设置负外边距(前面说过，对于内联元素，设置margin-top和margin-bottom是无效的)，这会导致元素超出其父元素，或者与其他元素重叠，但这并不违反盒模型。同样来看一个示例：

通常我们很少使用负的margin，但他能做的其实很多。以下几条是有关于负margin需要注意的地方：

· 负margin是绝对标准的CSS:这不是开玩笑。W3C甚至标注过：对于margin属性来说，负值是被允许的。这是Nuff说的，查看这篇文章会有更多详细内容。

· 负maring不是一种hack方法:千真万确，不能因为缺乏对负marign的理解，或者因为它长得像hack，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。

· 不脱离文档流:不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。

· 完全兼容:所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。

· 浮动会影响负margin的使用:负margin不是你每天都用的CSS属性，应用时应小心谨慎。

· Dreamweaver不解析负margin:DW的设计视图不会解析负margin。但问题是你为什么要在设计视图中检查你的网站呢？

如果使用得当，负margin是非常强大的属性，以下是２种（负margin占主导位置）的场景：

作用于static元素上的负margin属性

当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。例如：

/* 元素向上移10px*/#mydiv1 {margin-top:-10px;}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

* #mydiv1后续元素向上移10px, #mydiv1 本身不移动

*/#mydiv1 {margin-bottom:-10px;}

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

浮动元素上的负margin

如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。

<div id="mydiv1">First</div><div id="mydiv2">Second</div>

/* 应用在与浮动相反方向的负margin */

#mydiv1 {float:left; margin-right:-100px;}

若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

Q17:浏览器会下载没有被应用的样式内引用的资源？

HTML

CSS

#i-am-useless {

A:NO(不会)

个人见解

对于HTML中的img，大家都知道，只要页面加载了，图片就会加载。但在CSS中的背景图片，没有被引用，那么会不会加载呢？有些人会认为会，因为他在样式中调用了，只不过不存在。有些人会认为不会，因为没用到这个资源。那么我们通过下面的图来看看：

测试题中做个修改，把id换成结构中存大的，如"#test1",在看一张图的变化：

不用说什么，两图一对比，胜过千言万语。

Q18:页面加载完毕后，浏览器会下载“mypic.jpg”图片吗？

HTML

CSS

#test2 {

display: none;}

A:Yes(会)

Q19:页面加载完毕后，浏览器会下载“mypic.jpg”图片吗？

HTML

CSS

#test1 {

display: none;}#test2 {

visibility: hidden;}

A:No(不会)

个人见解

第18和19两个测试题，和第17探讨的是同一个问题，只不过多了元素隐藏和显示的参数。如果你拿不定主义，那么写一个测试文件。一测一目了然。如果你想知道为什么，那就需要GG一下了。因为对于他们的原理我也不懂，我就不误人子弟了。

Q20:"only"选择器起什么作用？

@media only screen and (max-width: 1024px) {

margin: 0;

}

A:阻止老版本浏览器解析剩下的选择器

Q21:overflow:hidden会创建一个新的BFC(block formatting context)?

HTML

<div>

<p>I am floated</p>

CSS

div {

overflow: hidden;}p {

float: left;}

A:Yes(会)

个人见解

w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。