一.line-height有什么作用?
line-height是用于设置行间的距离的属性，也就是行高，而行高就是指文字的大小与行距的和。当需要设置垂直居中的时候，经常使line-height的值等于height的值。那么line-height行高是怎么产生了高度呢？在inline box模型中，有个line boxes，它的工作就是包裹每行文字。一个文字一个line boxes。line-height的特性都是line boxes表现出来的。下面具体看一下line-height的属性。
- 用绝对长度px表示
body{
font-size: 15px;
line-height: 20px;
}
这个line-height的长度值20px会被后代元素继承下来，而忽略本身font-size的值，line-height不会随着font-size的值作相应的改变。
- 用百分比表示
body{
font-size: 15px;
line-height: 40%;
}
其中，计算方法就是用font-size的大小（15px）乘以line-height的百分比（40%）。这个计算出来的值会被层叠下去的元素继承，所有继承元素会使用这个计算出来的值，而忽略本身font-size的值，line-height不会随着相应的font-size作相应比例的缩放。
- 用normal表示
body{
font-size: 15px;
line-height: normal;
}
桌面浏览器normal的值约为1.2，当然这也取决于元素的 font-family。所以算出来的大小就是用font-size的大小（15px）乘以1.2。所有继承下来的元素不会忽略font-size的值，而使用相应font-size的大小来乘以1.2。line-height会随着font-size作相应的缩放。
- 用纯数字表示
body{
font-size: 15px;
line-height: 1.2;
}
所有继承下来的元素不会忽略font-size的值，line-height将使用相应font-size的大小来乘以1.2。line-height会随着相应的font-size作相应比例的缩放。
一般来说推荐使用无单位数值给line-height赋值。
效果对比
下面讲一下line-height的一个重要用途-文本居中。
- 单行文本
-
不设置height
如果不设置height，line-height可以设置为任意数字。
单行文本垂直居中
-
设置height
将line-height值与height的高度值设置成一致就能达到效果（这里一般是在同块元素里面使用）。
单行文本垂直居中
-
多行文字
因为今天学习了如何让图片垂直居中，然后我想如果要让文字达到一样的效果，方法应该是一样的，也就是把文字来当作图片来处理。尝试了一下，真的达到了预期的效果。这里面最重要的步骤就是把这些文字赋予表格元素，应用表格的特性，然后再用vertical-align: middle，达到垂直居中的效果。
多行文字垂直居中
二 .如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
要审查CSS的属性可以使用Can I use进行查询。
Can I use
三.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
- a标签的属性值
- href属性
它指示的是链接的目标，href 属性的值可以是任何有效文档的相对或绝对 URL。如果选择了a标签的内容，浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档。一般来说a标签一定要有href属性，这样鼠标点击的时候才会有一个手的形状表示是一个链接。 - title属性
title属性作用是鼠标放置到a标签的时候，显示的提示信息。 - target属性
target属性是表示浏览器在何处打开一个新的链接，是打开一个新的窗口还是覆盖本页面。
- title和alt属性的区别
- title属性
title是为该属性的元素提供建议性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。title属性用途之一就是为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的的时候。还有一个用处就是为图像提供额外的说明信息，比如日期等信息。 - alt属性
alt属性只能用在img、area和input元素中，它是为了给那些不能看到文档中图像的浏览者提供文字说明信息，在图片的位置显示内容。
所以说如果要使用额外或者非本质的说明信息就要使用title属性。
- 在新窗口中打开链接
要想在新窗口中打开链接，让target赋值为_blank就行。
<a href="#" target="_blank">我是链接</a>
- 跳转到锚点
在id上面加一个名字就能跳转到锚点。
<div class="div2"></div>
<p id="here">点击直接跳转到这里</p>
四.display: none , visibility: hidden, opacity:0有什么作用？有什么区别？
他们的作用都是让元素消失，但在渲染效果上有一定的区别。
- display:none 表示让元素消失，并且脱离文档流，下面的元素将会上移，占据其位置；
- visibility：hidden 也是让元素消失，但是并没有脱离文档流，渲染的时候为空白，它所在的位置仍然存在，下面的元素不会上移；
opacity：0 和visibility的作用相似，表示透明度为0，占据的位置仍然保留。
具体的对比效果，可以参考代码
五.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
-
去除a链接的默认样式
a链接默认样式下面会有一条下划线，如图：
a链接默认样式
要去除它的默认样式，则使用：
a{
text-decoration: none;
}
去除默认样式之后
去除默认样式之后我们可以用它用来制作一个按钮：
按钮
-
直接在 a 链接父容器添加颜色，不能继承到当前 a 链接上。除了颜色不继承，其他的都可以继承，比如字体大小。要实现对a链接颜色起作用，必须选中a。
实现对a链接添加颜色
代码题
1.写个div，边框为1px, #ccc, 宽度为200px, 高度为80px, 内有一行文字这里是饥人谷，文字字体大小14px, 颜色#f0f, 文字在div里垂直水平居中。
代码1
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哪居中显示;
<div class="dialog">
<div class="header">
<h3>我是标题</h3>
<a class="close" title="关闭" href="#">X</a>
</div>
<div class="content">
<h3>欢迎来到 <a href="http://jirengu.com">饥人谷</a></h3>
<p> 在这个大家庭你能快乐的学到更多前端技能</p>
</div>
<div class="footer">
<a class="btn btn-cancel" href="#">取消</a>
<a class="btn btn-confirm" href="#">确认</a>
</div>
</div>
代码2
3.写一个如下表格
表格
记住描述整个表格的属性标记放在<table>里，描述单元格的属性标记放在<tr><td>里面。哎，写代码的时候我老是会搞不清在哪里描述。还需要注意的问题就是细心啊，一开始的时候表格老是结果不对，原来是tr没有把td和th包裹。下次一定要仔细。
代码3
4.下面代码有什么作用？手抄一遍如下代码，改变浏览器宽度看看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{ width: 900px; margin: 0 auto; }
</style>
</head>
<body>
<div id="header">
<div class="wrap">这里是标题</div>
</div>
<div id="content">
<div class="wrap">这里是内容</div>
</div>
<div id="footer">
<div class="wrap">这里是 footer</div>
</div>
</body>
</html>
将段落设置成外边距上下为0，左右自动调整。将wrap类的宽度固定，无论浏览器宽度多大都能居中显示。
代码的github链接L6
网友评论