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种：
- 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
- 相对 URL - 指向站点内的某个文件（href=“index.htm”）
- 锚 URL - 指向页面中的锚（href="#top"）
- title规定关于元素的额外信息，当鼠标移动到元素上时会显示title内容；
- target规定在何处打开a标签的链接。
- target常见值：
- _blank：在新窗口中打开链接；
- _self ：默认。在相同的框架中打开链接；
- _parent：在父窗口框架集中打开链接；
- _top：在整个窗口中打开链接；
- _framname：在指定的框架中打开链接；
- title和alt的区别
alt是图像的替代文本，当图像无法显示时，比如网速慢或者本来链接就有问题。显示显示alt的value作为描述性文字。
title是当我们把鼠标放到图片上面时，就可以看到title的内容。演示
<a href="#" target="-blank">链接一</a>
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里垂直水平居中
2. 对于如下html代码
- 给.dialog加个边框 1px, #ccc
- 给header设置高度40px, 左对齐，左内边距10px, 文字16px, 颜色#f00,下边框#ccc 1px。
- 给content 设置高度100px,内部 a链接去掉下划线，颜色 blue, 鼠标放置上去后颜色变为 red
- 给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。
网友评论