HTML(6)

Task6

Version two

一、问答题

1. line-height有什么作用?

• 单行文字垂直居中。
• 外框高度固定，文字大小个数不固定的多行文字的垂直居中。
• 大小不固定图片的垂直居中。
• 使用.article_box{line-height:1.5;} 代替.article_box *{line-height:150%;}提升css渲染效率
• 使用行高代替高度避免haslayout

---

2. 如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？

0_1478325234492_1.png

---

3. a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?

• href（hypertext reference即超文本引用）
  取值有以下3种：

1. 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
2. 相对 URL - 指向站点内的某个文件（href=“index.htm”）
3. 锚 URL - 指向页面中的锚（href="#top"）

• title规定关于元素的额外信息，当鼠标移动到元素上时会显示title内容；
• target规定在何处打开a标签的链接。
• target常见值：

1. _blank：在新窗口中打开链接；
2. _self ：默认。在相同的框架中打开链接；
3. _parent：在父窗口框架集中打开链接；
4. _top：在整个窗口中打开链接；
5. _framname：在指定的框架中打开链接；

• title和alt的区别
  alt是图像的替代文本，当图像无法显示时，比如网速慢或者本来链接就有问题。显示显示alt的value作为描述性文字。
  title是当我们把鼠标放到图片上面时，就可以看到title的内容。演示
  链接一

---

4. display: none , visibility: hidden, opacity:0 有什么作用？有什么区别？

• display：none 会使该元素在网页消失，脱离文档流。dom树中去除，不会占用文档对象模型中的空间。
• visibility:hidden 元素依然存在，只是我们看不见，但是该位置依然存在，相当于变透明了。 没有从dom树中去除。渲染之后，在文档流里隐藏了。但是我们还是可以用js去选择该元素。

• opacity:0 透明度，可以从0~~1调 0的时候就透明，1的时候就完全显示。

  
  
  

  0_1478325247448_2.png
  
  
  

  0_1478325264763_3.png
  
  
  

  0_1478325272642_4.png

5. 如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？

• text-decoration:none;去除a链接的默认样式。
• color: red;
• cursor:none;这样设置会造成鼠标移上去就没了。没了。。。
• 自己的实验
• 不能。上面的父容器的颜色会被下面的元素继承，但是只有这个a链接不会（但是a链接会继承字体大小），颜色需要自己设置。注意不要写成a{}。这样的话所有a链接全部都会变颜色。

二、代码题

1. 写个div，边框为1px, #ccc, 宽度为200px, 高度为80px, 内有一行文字这里是饥人谷，文字字体大小14px, 颜色#f0f, 文字在div里垂直水平居中

JS Bin

2. 对于如下html代码

1. 给.dialog加个边框 1px, #ccc
2. 给header设置高度40px, 左对齐，左内边距10px, 文字16px, 颜色#f00,下边框#ccc 1px。
3. 给content 设置高度100px,内部 a链接去掉下划线，颜色 blue, 鼠标放置上去后颜色变为 red
4. 给footer设置高度50px，内部 btn设置 边框1px #ccc, 圆角3px, 上下内边距4px,左右内边距3px，显示为inline-block, footer内居中显示。
   JS Bin

3. 写一个如下表格

表头是蓝色，表行是白色。 当鼠标放置到表行时背景色变为淡灰色
JS Bin

4. 下面代码有什么作用？手抄一遍如下代码，改变浏览器宽度看看效果

• 为了效果明显，建议给div加上边框border:1px solid #ccc。
• 当浏览器可视窗口>900+8px【body默认margin:8px，chrome、firefox浏览器下】时候，带有class="wrap"的元素会再浏览器水平居中，
• 当浏览器可视窗口<900+8px时候，会出现滚动条而且宽度保持900px不变。
• 当设置为max-width:900px;时，就可以实现改变浏览器窗口大小时，三个div一直居中了。
• 但是，如果要使文本居中，得加上text-align:center。