一、line-height有什么作用？
根据视频上讲的，line-height：2;的意思
1.它表示这这段文字占用的空间是它本身高度的2倍，也就是这段文字上下都有0.5倍的自身高度；
2.文字间的缝隙等于文字的高度，这个就是行高；
3.行高的作用对于一行文字让它在div里水平垂直居中。
当line-height：1；时，那么这段文字所占用的空间就是它自己的高度，css中的属性中，此情况一定会写成1px；
.test1{
border:1px solid red;
font-size:20px;
line-height:2;
}
.test2{
border:1px solid red;
font-size:20px;
line-height:1;
}
Paste_Image.png
line-height是用于设置行间的距离的属性，也就是行高,而行高就是指文字的大小与行距的和。也可以说行高是指文本行基线间的垂直距离,但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。
①行高指的是文本行的基线间的距离。而基线(Base line)，指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下 端沿，同时还有文字的顶线(Top line)、中线(Middle line)和底线(Bottom line)，用以确定文字行的位置，如图7-17 所示。
Paste_Image.png
②行高与字体尺寸的差称为行距(leading)，如图7-18所示。
Paste_Image.png
内容区域、行内框和行框
①理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的，如图7-19所示。
Paste_Image.png
②行内元素会生成一个行内框(inline box)，行内框只是一个概念，它无法显示出来，但是它又确实存在。
在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度，即：将行距的值(行高-字体尺寸)除以2，分别增加到内容区域的上下两边，如图7-20所示。
Paste_Image.png
③由于行高可以应用在任何元素上，因此同一行内的若干元素可能有不同的行高和行内框高，例如有如下代码，其显示如图7-21所示。
行高50px。
行高30px。
Paste_Image.png
这里又有一个新的概念——行框(line box)。同行内框类似，行框是指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值。因此，当有多行内容时，每行都会有自己的行框，如图7-22所示。
Paste_Image.png
提示：理解行框和行内框的概念对于[垂直对齐：vertical-align属性]一节的内容非常重要。
注意：行框的高度只同本行内元素的行高有关，而和父元素的高度(height)无关。
行高的计算与继承
①以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下:
字高20px，行高2em。
字高30px，行高2em。
2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。
> ②行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如图7-24所示:
p { font-size : 20px; line-height :10px; }
> ③行高是可继承的，但是继承的是计算值，例如有如下代码：
```p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }```
> ```
字高20px。字高30px。
```>
元素的行高2em，字体尺寸为20px，因此计算值为40px，虽然元素本身的字体尺寸为30px，不过其继承的行高仍为40px。但是在不同的浏览器内显示的效果却不尽相同，如图7-25所示。
> ④由于继承的是计算值，因此当元素内的文字字体尺寸不一样的时候，如果设定固定的行高很可能造成字体的重叠，例如有如下代码，其显示如图7-26所示。
>```p { font-size : 20px; line-height : 1em; }
> p span { font-size : 30px; }```
> ```
字高20px，行高1em，当文本为多行时可能会发生文字重叠的现象。字高30px
```
> 为了避免这种情况，可以为每个元素单独定义行高，但是这样很烦琐，因此可以定义一个没有单位的实数值作为缩放因子来统一控制行高，缩放因子是直接继承的，而不是继承计算值。例如修改上例中的行高为：
> ```p { line-height : 1; }```
> ⑤当内容中含有图片的时候，如果图片的高度大于行高，则含有图片行的行框将被撑开到图片的高度，如图7-28所示。
**注意**：图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。
**提示**：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐
## line-height 语法
> - 语法： line-height : normal | | | | inherit
> - 说明： 设置元素中行的高度。
值：
> - normal：默认行高，一般为1到1.2；
> - 实数：实数值，缩放因子；
> - 长度：长度值，可为负数；
> - 百分比：百分比取值基于元素的字体尺寸。
> - 初始值： normal;
> - 继承性： 继承;
> - 适用于： 所有元素
> - 计算值： 长度和百分比值为绝对值；其他同指定值
1.line-height可以被定义为：body{line-height:normal;}
2.line-height可以被定义为：body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为实数值body{line-height:1.2}
## line-height的5种表示方法进行测试：
任务六.div1{
font-size:20px;
line-height:?;
}
.p1{
background-color:red;
font-size:40px;
}
.p2{
background-color:orange;
font-size:20px;
}
测试段落1
测试段落1
测试段落1
测试段落2
测试段落2
测试段落2
> 第一种：设置成normal:
>第二种：设置为固定值20px
>第三种：设置成百分比200%
>第四种：设置数字2
>第五种：设置inherit
## 由此可见
> 1. 设置成normal和inherit，段落的行高是一样的。因为他们是默认行高，一般值为1到1.2，当然这也取决于元素的 font-family。它们算出来的大小就是用font-size的大小(40px/20px)乘以1.2。所有继承下来的元素不会忽略font-size的值，而使用相应font-size的大小来乘以1.2。line-height会随着font-size作相应的缩放。
> 2. 设置成固定值，p1和p2继承了父元素的固定行高，而忽略本身font-size的值，line-height不会随着font-size的值作相应的改变，因为p1的font-size比父元素的行高大，所以出现了重叠。
> 3. 设置成百分比。计算方法就是用font-size的大小(20px)乘以line-height的百分比(200%)。这个计算出来的值会子元素继承，所有继承元素会使用这个计算出来的值，而忽略本身font-size的值，line-height不会随着相应的font-size作相应比例的缩放。
> 4. 设置成数字2，数值会被继承到子元素，然后子元素会按照自己的font-size调整行高，计算式font-size大小(40px/20px)乘以2。所以line-height会随着相应的font-size作相应比例的缩放。
**所以这上面的四种方式使用无单位的数值比较好**
## line-height的一个重要用途-文本居中
> - 单行文本
> ①不设置height,如果不设置height，line-height可以设置为任意数字
> ②设置height,将line-height值与height的高度值设置成一致就能达到效果
> - 多行文本
多行文本垂直居中重点是设置display：table-cell；根据视频上讲的这是借用table的属性，因为vertical-align只有在表格中才起作用。然后在加个文本居中text-align就可以达到效果
## 二 .如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
审查CSS属性的兼容性可以使用 [Can I use](http://caniuse.com/#search=inline-block)进行查询
## 三.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
> - **a标签定义超链接，用于从一张页面到另一张页面。**
- href是a元素最重要的属性，它指示链接的目标,href 属性的值可以是任何有效文档的相对或绝对 URL。如果选择了a标签的内容，浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档。
- title属性作用是鼠标放置到a标签的时候，显示的提示信息。
- target属性是表示浏览器在何处打开一个新的链接，是打开一个新的窗口还是覆盖本页面。
> - **title和alt属性的区别**
- title属性,title是为该属性的元素提供建议性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。
title属性用途之一就是为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的的时候。
还有一个用处就是为图像提供额外的说明信息，比如日期等信息。
> - alt属性，alt属性只能用在img、area和input元素中，它是为了给那些不能看到文档中图像的浏览者提供文字说明信息，在图片的位置显示内容。
>
> - **在新窗口中打开链接**
> - **跳转到锚点**
1.id定位，这样的定位可针对任何标签定位
或
2.使用name定位，name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用
3.使用js定位
> - **跳转到另一个页面的锚点**
1.在test2.html创建锚 锚
2.在test.html设置好链接 连接到另外页面的锚的超链接
## 四.display: none , visibility: hidden, opacity:0有什么作用？有什么区别？
>**他们的作用都是让元素消失，但在渲染效果上有一定的区别。**
> 1. display:none 表示让元素消失，并且脱离文档流，下面的元素将会上移，占据其位置；
> 2. visibility：hidden 隐藏元素,但是并没有脱离文档流，渲染的时候为空白，它所在的位置仍然存在，下面的元素不会上移；
> 3. opacity：0 和visibility的作用相似，表示透明度为0，占据的位置仍然保留。
> 区别：都可以隐藏元素，主要是display:none;让元素脱离了文档流，会影响其后面的元素
[代码](http://js.jirengu.com/niy/2/edit?html,console,output)
## 五.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
> - a链接默认样式：
> - 除去 a 链接的默认样式
> 使用text-decoration：none；
> - 用a链接制作按钮
> - 直接在 a 链接父容器添加颜色，不能继承到当前 a 链接上。除了颜色不继承，其他的都可以继承，比如字体大小。要实现对a链接颜色起作用，必须设置a。
next:[任务7-HTML4](http://www.jianshu.com/p/64bab72ba2e0)
pre:[任务5-HTML2](http://www.jianshu.com/p/9fc02e93b026)
***
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
