任务6——HTML标签使用
2016-07-10 本文已影响80人
进击的阿群
1.line-height有什么作用？
line-height属性值是指文本行基线之间的距离，即行高。行高减去字体大小就等于行间距，行间距上下等分，即行内框。
line-height有5种表示方法：
| 表示方法 | 作用 |
|---|---|
| normal | 按合适大小调整行间距 |
| 百分比% | 根据当前字体大小比例调整行间距 |
| 固定值length(px) | 设置固定的行间距 |
| 数值 | 与当前字体乘积来定行间距 |
| inherit | 继承父元素line-height的属性值 |
eg：如下代码对div元素设置不同值比较效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="任务6">
<title>任务6</title>
</head>
<style type="text/css">
div {
font-size: 20px;
line-height: ?;
}
.p1{
border: 2px solid #eee;
background-color: rgba(255, 180, 0, 0.5);
font-size: 50px;
}
.p2{
border: 2px solid #eee;
background-color: rgba(255, 180, 0, 0.5);
font-size: 10px;
}
</style>
<body>
<h1>测试</h1>
<div class="div1">
<p class="p1">
这是测试段落一
</p>
<p class="p2">
这是测试段落二
</p>
</div>
</body>
</html>
第一种：设置成normal:
normal.png
第二种：设置成固定值20px：
20px.png
第三种：设置百分比200%：
200%.png
第四种：设置数值2：
2.png
第五种：设置inherit:
inherit.png
由此可见：
- normal和inherit是按照合适大小设置行高，书本上写的相当于1.2，但是每个浏览器设置不同，在我电脑上google差不多是1.15，而在Opera里是1.2
- 百分比%是让根据当前元素字体大小调整行高，然后再继承到子元素，所以p1和p2行高相同。
- 数值是继承到子元素然后再根据子元素的大小调节行高，和%的区别就在于一个顺序。
- 固定值20px太过死板，直接继承。
总结：
我认为最好的方式就是数值法，因为根据子元素本身字体大小调节，这样避免文字重叠。
PS补充：
line-height另一个常见用法是可以设置文字垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="任务6">
<title>任务6</title>
</head>
<style type="text/css">
div {
font-size: 20px;
}
.p1{
border: 2px solid #eee;
background-color: rgba(255, 180, 0, 0.5);
font-size: 10px;
height: 50px;
}
.p2{
border: 2px solid #eee;
background-color: rgba(255, 180, 0, 0.5);
font-size: 10px;
}
</style>
<body>
<h1>测试</h1>
<div class="div1">
<p class="p1">
这是测试段落一
</p>
<p class="p2">
这是测试段落二
</p>
</div>
</body>
</html>
未设置line-height.png
这是未设置
line-height的效果，p1文字并不垂直居中，可以在p1样式里添加如下代码：
添加line-height.png
固定值50px和元素高度相同，即可得到如下效果：
添加line-height效果.png
2.如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
用[can i use]网站检查CSS属性兼容性，例如：
inline-block属性兼容性.png
主流浏览器均支持
inline-block，IE从IE8版本后支持。
3.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
<a>标签是超链接标签，href,title,target是其一些常用属性。
| 属性 | 值 | 描述 |
|---|---|---|
| href | url | 链接到指定页面的url |
| title | some_text | 鼠标悬停在链接时显示额外信息 |
| target | _blank _parent _self _top framename |
指定位置打开链接文档 |
- title用法：
<p class="p2">
这是测试段落二
<a href="#" title="本页">链接</a>
</p>
Paste_Image.png
-
target用法：
用于在何处打开网页，比如在代码中加入：
<a href="#" title="本页" target="_blank">链接</a>
则当我点击链接时，会在新窗口打开页面：
新窗口打开页面
- title和alt的区别：
| 属性 | 描述 |
|---|---|
| title | 是一种提示功能的属性，用途广泛，不仅仅在<a>标签中使用，可以为链接添加描述性信息，也可以为图片提供说明文字，文件信息等 |
| alt | 是一种补救功能的属性，当浏览器无法正常显示图像时，会显示相应的alt文字说明 |
| 区别 | title和alt可以在图像里同时存在，只是功能意义上的差别 |
title提示信息：
<a href="http://i1.piimg.com/567571/bb72ef0e8aa104d7.jpg" title="提示文字"></a>
title提示信息
alt属性：
<a href="www.baidu.com" title="提示文字">[站外图片上传中……(2)]</a>
alt效果图
4.display: none, visibility: hidden, opacity:0有什么作用？有什么区别？
| 属性 | 作用 |
|---|---|
| display: none | 将元素脱离文档流 |
| visibility: hidden | 隐藏元素 |
| opacity: 0 | 设置透明度为0 |
|区别 | 都可以隐藏元素，display: none直接脱离文档流，后果严重，后面元素布局都会改变；visibility: hidden和opacity差不多，都是隐藏元素，元素节点还在，不影响布局 |
5.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
a链接默认样式：
a标签默认样式
用text-decoration: none去除a链接的默认样式：
a {
text-decoration: none;
}
text-decoration: none效果图
直接在a链接父容器添加颜色，不能继承到当前a链接。
div {
font-size: 20px;
color: yellow;
} /* 这是a标签的父元素div */
a标签不能继承父元素颜色
本教程版权归饥人谷_阿群和饥人谷所有，转载须说明来源
