关于lne-height和text-align的疑问

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/js.js"></script>
</head>
<body>
<div class="main">
<!-- 导航 -->
<div class="nav">
<div class="nav-item actived">
<a href="javascript:void(0)">
<span>首页</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>点击看看</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>会自动的</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>我的网站</span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="slide-pics">
<div class="slide-pic0">
<a href=""></a>
</div>
<div class="slide-pic1">
<a href=""></a>
</div>
<div class="slide-pic2">
<a href=""></a>
</div>
<div class="slide-pic3">
<a href=""></a>
</div>
</div>
</div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

*{
    padding: 0;
    margin: 0;
    font-family: "Microsoft YaHei";
}
.main{
    margin: 0 auto;
    height: 520px;
    width: 1200px;
}
a{
    text-decoration: none;
}
 
/*导航*/
.nav{
    height: 60px;
    width: 1200px;
    font-size: 22px;
}
.nav>.nav-item{
    float: left;
    width: 25%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.nav-item>a{
    display: inline-block;
    width: 100%;
    /*height: 100%;*/
    color: #666;
}
.nav>.actived{
    background: #FFCC00;
    border-radius: 5px;
}
 
 
/*轮播图*/
.slide-pics{
    height: 460px;
    width: 1200px;
}
.slide-pics>.slide-pic0{
    height: 460px;
    width: 1200px;
    background: url(../img/1.jpg) no-repeat;
}
.slide-pics>.slide-pic1{
 
}
.slide-pics>.slide-pic2{
 
}
.slide-pics>.slide-pic3{
 
}

这个作业还没写完，但完成过程中关于line-height和text-align有点疑问。

类为nav-item的div元素添加了样式line-height，其值等于其height。这样其内部的a元素的高度为什么就自动变为作为a元素的父元素的div的高度？而且文字垂直居中了？

类为nav-item的div元素同样添加了样式text-align，其值为center。这样为什么它的内部元素，文字都水平居中了？

慕容124385 2018-09-20

源自：项目：JS实现轮播特效 6-2 作业题

0

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-09-20 10:35:18

因为a标签的高度是它里面的内容撑起了的 , 而line-height设置的就是行间的距离 , 里面的内容因为继承了行高的影响 ,所以把a标签的高度撑起来了 .
使用行高设置文字垂直居中方法 , 就是把行高设置的值与高度一样 . 代码因为高度与行高都为60px ,所以文字会垂直居中.
text-align也是因为继承哦 , 里面的span标签会继承text-align属性 ,为文字设置了居中

希望解答了你的疑惑 , 祝学习愉快 ,望采纳

慕容124385 提问者 #1

line-height会继承的吗？

2018-09-20 16:32:54
好帮手慕夭夭回复提问者慕容124385 #2

是的 , 如上截图中line-height和text-align被继承了哦

2018-09-20 16:37:18

提问者慕容124385 2018-09-20 16:40:39

老师，1.划了横线的是被其他样式覆盖了吗？2.浅色的是什么意思？

好帮手慕夭夭 #1

没错哦 ,一般在css中被注释掉的或者覆盖的样式就被划了横线 . 浅色的是没有被继承的样式.

2018-09-20 16:58:47

相似问题

老师问个问题关于text-align;

关于align-self的问题

居中关于text-align 和align 的问题

positon，text-align,margin的定位问题？小弟不太理解

3-10vertical-align 01：09

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号