font-famliy竟然对布局有影响？

实锤，对网页布局有影响！代码就不方便放了。

破晓小哥哥 2018-08-14

源自：项目：网页布局案例 2-10 作业题

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2018-08-15 18:28:45

单独使用font会对line-height产生影响 ,因为font本身可以设置line-height , 如果font中不设置line-height ,会影响line-height , 使其不生效 , 如下设置:

如上设置行高为80px , 如果在font中设置 ,可以把line-height放在下面覆盖font中的样式即可 ,如下:

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

收起回答

提问者破晓小哥哥 2018-08-15 18:03:29

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
	  *{
	      padding:0;
	      margin:0;
	      list-style:none;
	  }
	  .header
{
	height:80px;
	background: #07cbc9;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:3;/*确保始终覆盖*/
}
.header .logo
{
	float:left;
}
.header .nav
{
	float:right;
	padding-right:80px;
}
.header .logo img
{
	width:300px; 
	height:64px;
	padding-left: 60px;
	padding-top: 8px;
}
.header .nav ul li
{
	float: left;
	width: 100px;
	line-height: 80px;
	font:18px ;
}
			
	</style>
</head>
<body>
	<div class="header"><!--头部 -->
  <div class="logo">
  <a href="#"><img src="images/logo.png"></a>
  </div>
  <div class="nav">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">GALLERY</a></li>
    <li><a href="#">FACULTY</a></li>
    <li><a href="#">EVENTS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
  </div>
</div>
</body>
</html>

收起回答

好帮手慕夭夭 2018-08-15 09:59:14

不同的字体样式 , 使页面中的字体大小看起来会不一样 , 如宋体在页面中看去了比微软雅黑的字体稍微大一些 . 而布局中图片也是会受到字体的影响 ,因为图片默认与字体的基线对齐 ,如下 :

字体大的话 , 下面的空隙也会随之变大 .这也是为什么图片会有默认间隙的原因 . 所以字体样式会一定程度上影响布局效果 . 希望能解答你的疑惑 ,祝学习愉快 ,望采纳

收起回答

提问者破晓小哥哥 #1

我是加了字体样式，原来居中的竟然不居中了。等会上代码

2018-08-15 11:00:33
好帮手慕夭夭回复提问者破晓小哥哥 #2

好的 ,同学上传代码时不要上传截图哦 ,以便进行测试

2018-08-15 11:20:07
提问者破晓小哥哥回复好帮手慕夭夭 #3

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS布局</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; } .header { height:80px; background: #07cbc9; position:fixed; top:0; left:0; width:100%; z-index:3;/*确保始终覆盖*/ } .header .logo { float:left; } .header .nav { float:right; padding-right:80px; } .header .logo img { width:300px; height:64px; padding-left: 60px; padding-top: 8px; } .header .nav ul li { float: left; width: 100px; line-height: 80px; font:18px "Microsoft YaHei UI"; } </style> </head> <body> <div class="header"> <div class="logo"> <a href="#"><img src="images/logo.png"></a> </div> <div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </body> </html> 原样式不能居中。把.header .nav ul li的字体Microsoft YaHei UI 去掉就能居中

2018-08-15 18:03:02