前端试题本（HTML+CSS篇）

CS1. 下面关于IE、FF下面CSS的解释区别描述正确的有？(不定项)
CS2请选出结构正确的选项
CS3.下面哪些是HTML5 新增的表单元素？
CS4在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？
CS5请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
CS6.如下代码，在空白处填写代码，是其点击时，前景色为白色，背景色为黑色。
CS7浏览器会加载样式为“display:none”的图片？
CS8.浮动的元素相对于容器的哪里？浮动后的dispaly属性是什么？绝对定位呢？
CS9.怎么让Chrome支持小于12px 的文字?
CS10.什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
CS11.把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
CS12.简述一下src与href的区别。
CS13.你如何理解HTML结构的语义化？
CS14..超链接访问过后hover样式就不出现的问题是什么？如何解决？
CS15.什么是Css Hack？常用的CSS Hack？
CS16.rgba()和opacity的透明效果有什么不同？
CS17.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
CS18.如何垂直居中一个浮动元素？(不完整)
CS19解释下 CSS sprites，以及你要如何在页面或网站中实现它。
CS20.你知道多少种Doctype文档类型

CS1. 下面关于IE、FF下面CSS的解释区别描述正确的有？(不定项)

A.FireFox的div的内嵌div可以把父级的高度撑大，而IE6.0不可以，要自己设置高度。
B.当设置为三列布局时，FireFox0的float宽度不能达到100％，而IE6.可以。当设置为两列布局时，两种浏览器都可以。
C.火狐浏览器中，非float的div前面有同一父级的float的div，此div若有背景图，要使用clear：both，才能显示背景图，而IE6.0中不用使用clear：both
D.在[text-decoration:underline]的属性下，IE6.0显示的下划线会比FireFox低一点。在FireFox中，部分笔画会在下划线的下面1个象素左右。

解析：答案是CD.
A:IE6.0的div的内嵌div可以把父级的高度撑大，而FireFox不可以，要自己设置高度。
B: 当设置为三列布局时，IE6.0的float宽度不能达到100％，而FireFox可以。当设置为两列布局时，两种浏览器都可以。

CS2请选出结构正确的选项

A.<a href=www.nowcoder.com>牛客网</a>
B.<a href="www.nowcoder.com">牛客网</a>
C.<a href="http://www.nowcoder.com/">牛客网</a>
D.<a href="http://www.nowcoder.com/">牛客网

解析：正确答案: C 你的答案: B (错误)(之前还没发现，原来一定要带上协议头)

CS3.下面哪些是HTML5 新增的表单元素？

A. datalist
B. optgroup
C. output
D. legend
正确答案: A C 你的答案: A B C D (错误)

解析：新的表单元素：datalist、keygen、output

  • datalist指定一个预先定义的输入控件选项列表
  1. <input list="browsers">
  2. <datalist id="browsers">
  3.      <option value="Internet Explorer">
  4.      <option value="Firefox">
  5.      <option value="Chrome">
  6.      <option value="Opera">
  7.      <option value="Safari">
  8. </datalist>
  • keygen定义了表单的密钥对生成器字段 
  1. <form action="demo_keygen.asp" method="get">
  2.      Username: <input type="text" name="usr_name">
  3.      Encryption: <keygen name="security">
  4.      <input type="submit">
  5. </form>
  • output 元素用于不同类型的输出，比如计算或脚本输出：
  1. <form onsubmit="return false">
  2.      <input id="num_a" /> +
  3.      <input id="num_b" /> =
  4.      <output id="result" onforminput="resCalc()"></output>
  5. </form>

CS4在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？

A. cellpadding=”0″
B. padding:0
C. margin:0
D. cellspacing=”0″
正确答案: A D 你的答案: B C D (错误)

解析：cellpadding 属性规定单元边沿与其内容之间的空白。
注释：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

  1. <table border="8" cellpadding="10">
  2.   <tr>
  3.     <th>Month</th>
  4.     <th>Savings</th>
  5.   </tr>
  6.   <tr>
  7.     <td>January</td>
  8.     <td>$100</td>
  9.   </tr>
  10. </table>

CS5请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：

<div id=”demo”></div>

解题思路：我们知道使用after或者before伪类加上绝对定位很容易在目标位置上添加一个方块，然后设置宽高为零设置部分边框为transparent就能创建三角形，但是创建的三角形是实心的，这是我们再创建一个比较小的的白色实心三角形覆盖上去就能模拟出一个带边框的空心三角形
方法一：

  1.         #demo {
  2.             width: 100px;
  3.             height: 100px;
  4.             background-color: #fff;
  5.             position: relative;
  6.             border: 2px solid #000;
  7.         }
  8.         #demo:after, #demo:before {
  9.             border: solid transparent;
  10.             content: ' ';
  11.             height: 0;
  12.             left: 100%;
  13.             position: absolute;
  14.             width: 0;
  15.         }
  16.         #demo:before {
  17.             border-width: 12px;
  18.             border-left-color: #000;
  19.             top: 18px;
  20.         }
  21.         #demo:after {
  22.             border-width: 10px;
  23.             border-left-color: #fff;
  24.             top: 20px;
  25.         }

网友还给出了一个非常巧妙的方法：

  • 将三角形用一个正方形来实现
  • 设置其上border,右border的宽度
  • 设置其背景颜色为白色以覆盖掉父元素的border
  • 使用transform: rotate 来让该正方形旋转
  • 使用top,left来对其定位
  1. #demo {
  2.     width: 100px;
  3.     height: 100px;
  4.     border: 2px solid #000;
  5.     position: relative;
  6. }
  7. #demo:after {
  8.     content: '';
  9.     display: block;
  10.     width: 14.1421px;
  11.     height: 14.1421px;
  12.     border-top: 2px solid #000;
  13.     border-right: 2px solid #000;
  14.     position: absolute;
  15.     right: -10px;
  16.     top: 20px;
  17.     transform: rotate(45deg);
  18.     background-color: #fff;
  19. }

CS6.如下代码，在空白处填写代码，是其点击时，前景色为白色，背景色为黑色。

<div onclick="_________________">沐浴星光</div>

解析
<div onclick="this.style.color=&quot;white&quot;;this.style.background='black';">沐浴星光</div>
主要考察两点：这个动态函数中的this是元素本身，另外代码中不能包含非转义字符，可以使用单引号或者使用&quot;转义.

CS7浏览器会加载样式为“display:none”的图片？

加载，只是不显示。你可以通过F12审查元素看到

CS8.浮动的元素相对于容器的哪里？浮动后的dispaly属性是什么？绝对定位呢？

浮动的元素碰到容器的内边距的内边就会停止，
设置float前的display属性——》设置浮动后的display属性计算值

  • inline——》block
  • inline-block——》block
  • inline-table——》table
  • table-row——》block
  • table-row-group——》block
  • table-column——》block
  • table-column-group——》block
  • table-caption——》block
  • table-header-group——》block
  • table-footer-group——》blcok
  • flex——》flex
  • inline-flex——》inline-flex【inline-flex在chrome下测试，float后display:flex】
  • other——》unchanged
    浮动元素的前一个元素不会受到任何影响。浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
    1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。
    2）元素同时应用了position: absolute及float属性，则float失效。
    3）同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。
    绝对对位的是相对于符合条件的容器的边框的内部定位的，也就是说没考虑到内边距，绝对定位后块级元素的display属性一般未改变，而absolute是会改变行内元素的呈现模式成display为block,只是呈现模型改变了，通过js是读取不到的，如fixed定位也是如此，relative定位不会改变元素的display属性。

    本题未严格论证

CS9.怎么让Chrome支持小于12px 的文字?

  • 在Chrome27以前可以使用-webkit-text-size-adjust属性，不过最新的浏览器已经不支持这个属性了
  1.   -webkit-text-size-adjust:none;
  • 使用CSS3新的属性transform
  1. .webkit {
  2.     font-size: 9px;
  3.     -webkit-transform: scale(0.75);
  4. }

具体参考：解决Chrome谷歌浏览器不支持CSS设置小于12px的文字

CS10.什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

CS11.把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

按照HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。

CS12.简述一下src与href的区别。

  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
    src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
    　 <script src ="js.js"></script>　
    当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
    　　<link href="common.css" rel="stylesheet"/>
    那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

CS13.你如何理解HTML结构的语义化？

根据下面几点拓展：

  • 页面结构清晰，即使不添加样式
  • 搜索引擎支持友好
  • 便于页面重构，方便维护

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

CS14..超链接访问过后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

CS15.什么是Css Hack？常用的CSS Hack？

CSS hack由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
常用CSS Hack方式

  • 条件注释
    只在IE下生效，如
  1. <!--[if le IE 8]>
  2. 只在小于IE8时生效
  3. <![endif]-->
  • 属性前缀后缀法
    1.“_″下划线是IE6专有的hack，IE7不能识别
    2."*"能被IE6和IE7识别
    3. “\9″ 对于IE8及其以下版本的浏览器都生效
    4.“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

书写循序：一般把高版本浏览器（更现代的浏览器）支持的写好写在前面

  1. .ie6_7_8{
  2.     color:blue; /*所有浏览器*/
  3.     color:red\9; /*IE8以及以下版本浏览器*/
  4.     *color:green; /*IE7及其以下版本浏览器*/
  5.     _color:purple; /*IE6浏览器*/
  6. }
  • 选择器区别法-
    低版本的浏览器不支持比较“先进”的CSS选择器，如早期浏览器不支持属性选择器``[id*=val]、亲后代选择器div>p、同胞选择器div+p`、伪类选择器等

CS16.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

CS17.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

  • 垂直方向：line-height
  • 水平方向：letter-spacing
    那么问题来了，关于letter-spacing的妙用知道有哪些么？
    　答案:可以用于消除inline-block元素间的空格间隙问题。不懂得参考下面的文章
    去除inline-block元素间间距的N种方法

CS18.如何垂直居中一个浮动元素？(不完整)

  1. // 方法一：已知元素的高宽
  3. #div1{
  4.     background-color:#6699FF;
  5.     width:200px;
  6.     height:200px;
  8.     position: absolute;        //父元素需要相对定位
  9.     top: 50%;
  10.     left: 50%;
  11.     margin-top:-100px ;   //二分之一的height，width
  12.     margin-left: -100px;
  13.     }
  15. //方法二:
  17.   #div1{
  18.     width: 200px;
  19.     height: 200px;
  20.     background-color: #6699FF;
  22.     margin:auto;
  23.     position: absolute;        //父元素需要相对定位
  24.     left: 0;
  25.     top: 0;
  26.     right: 0;
  27.     bottom: 0;
  28.     }

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

  1. #container     //<img>的容器设置如下
  2. {
  3.     display:table-cell;
  4.     text-align:center;
  5.     vertical-align:middle;
  6. }

CS19解释下 CSS sprites，以及你要如何在页面或网站中实现它。

CSS sprites其实就通过将多个图片融合到一副图里面，然后通过CSS的技术布局到页面上。这样做的好处是，减少图片数量，将会减少http的请求，提升网站性能。
1）在photoshop新建背景透明的画板，将小图片依次摆放在画板中，调整小图片为适当大小。
2）通过标尺记录图片的横坐标纵坐标。
3）编写css代码background:url(....) no-repeat x-offset y-offset;同时设定元素固定高度和宽度，overflow:hidden

CS20.你知道多少种Doctype文档类型

XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
HTML4.01中也有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
HTML 5声明很简单,现在主流浏览器都用这个声明了，因为 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如等。严格的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3．框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

  1. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"




posted @ 2016-10-18 15:33  FeMiner  阅读(1094)  评论(0)  编辑  收藏  举报