line-height问题
相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
<title>响应式布局自己敲打的代码</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-3">
<a href="./test.html" class="header-logo">
<img src="img/logo.svg" alt="logo">
</a>
</div>
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-md-9 d-none d-md-block">
<ul class="header-nav">
<li class=header-nav-item>
<a href="javascript:;" class="header-nav-link">手机&平板</a>
</li>
<li class=header-nav-item>
<a href="javascript:;" class="header-nav-link">电视&影音</a>
</li>
<li class=header-nav-item>
<a href="javascript:;" class="header-nav-link">生活家电</a>
</li>
<li class=header-nav-item>
<a href="javascript:;" class="header-nav-link">电视/办公/存储</a>
</li>
<li class=header-nav-item>
<a href="javascript:;" class="header-nav-link">网上商城</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">电视&影音</a></li>
<li><a href="###" class="nav-link">生活家电</a></li>
<li><a href="###" class="nav-link">电脑/办公/存储</a></li>
<li><a href="###" class="nav-link">网上商城</a></li>
</ul>
</nav>
<div class="slider-container">
<div class="container">
<div class="row">
<div class="slider-text-container col-12 col-md-5 col-md-push-7">
<h3 class="slider-title">Galaxy S9｜S9+</h3>
<h4 class="slider-subtitle">冰蓝 焕新上市</h4>
<div class="slider-btns">
<a href="###" class="btn-rounded">了解更多</a>
<a href="###" class="btn-rounded">立即购买</a>
</div>
</div>
<div class="col-12 col-md-7 col-md-pull-5">
<img src="img/1.png" alt="cellphone">
</div>
</div>
</div>
</div>
<div class="product-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="###" class="product-item">
<img src="img/2-1.jpg" alt="cellphone" class="product-img">
</a>
</div>
<div class="col-md-4">
<a href="###" class="product-item">
<img src="img/2-2.jpg" alt="cellphone" class="product-img">
</a>
</div>
<div class="col-md-4">
<a href="###" class="product-item">
<img src="img/2-3.jpg" alt="cellphone" class="product-img">
</a>
</div>
</div>
</div>
</div>
<div class="backtop-container d-md-none">
<a href="test.html" class="btn-backtop">回到顶部
</a>
</div>
<div class="helper-container">
<div class="container">
<div class="helper-info-container">
<p>* Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄产品。</p>
<p>* Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。</p>
<p>* 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星有可能对上述内容进行改进，具体信息请参照产品实物、产品说明书。</p>
<p>* 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。</p>
</div>
<div class="row">
<div class="helper-backtop-container col-md-3 col-md-offset-9 d-none d-md-block">
<a href="test.html" class="btn-backtop">回到顶部 </a>
</div>
</div>
<div class="row">
<div class="col-6 col-md-3">
<h3 class="helper-list-title">网站地图</h3>
<ul class="helper-list">
<li><a href="###">关于三星</a></li>
<li><a href="###">投资者关系</a></li>
<li><a href="###">新闻中心</a></li>
<li><a href="###">人才招聘</a></li>
<li><a href="###">三星开发者网站</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3 class="helper-list-title">三星商店</h3>
<ul class="helper-list">
<li><a href="###">网上商城</a></li>
<li><a href="###">最新活动</a></li>
<li><a href="###">授权体验店</a></li>
<li><a href="###">全产品专卖店</a></li>
<li><a href="###">三星视频空间</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3 class="helper-list-title">服务支持</h3>
<ul class="helper-list">
<li><a href="###">在线服务</a></li>
<li><a href="###">邮件咨询</a></li>
<li><a href="###">联系我们</a></li>
<li><a href="###">服务中心查询</a></li>
<li><a href="###">三星专卖店招募</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3 class="helper-list-title">官方分享</h3>
<ul class="helper-list">
<li>
<a href="###" class="btn-share btn-share-weixin"></a>
<a href="###" class="btn-share btn-share-weibo"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="container">
<div class="row">
<div class="col-md-10">
<ul >
<li class="footer-item">
<a href="###" class="footer-link">服务条款</a>
</li>
<li class="footer-item">
<a href="###" class="footer-link">重要声明</a>
</li>
<li class="footer-item">
<a href="###" class="footer-link">隐私政策</a>
</li>
</ul>
</div>
<div class="col-md-2">
<a href="###" class="footer-link">中国/中文 ></a></div>
</div>
<p>此网页最好使用IE10浏览器、Chrome浏览器、Safari浏览器或其他新式浏览器进行浏览</p>
<p>京ICP备05068163号 京公网安备110105011756号</p>
</div>
</div>
<script type="text/javascript">
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-container-extended';
document.getElementById('btn-toggle').onclick = function(){
//获取nav的类名列表，调用方法 contains 判断是否包含这个类名'nav-container-extended'
if(nav.classList.contains(navExtendedClassName)){
//收起
nav.classList.remove(navExtendedClassName);
}else{
//展开
nav.classList.add(navExtendedClassName);
}
}
</script>
</body>
</html>
index.css文件
/*--layout 布局start--*/
/*header*/
.header-container{
background-color:#fff;
border-bottom:1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container{
height:64px;
}
.header-btn-container{
display:flex;
align-items:center;
justify-content:flex-end;
}
/*nav*/
.nav-container{
overflow:hidden;
height:0;
border-bottom:1px solid #dadada;
transition:height 0.5s;
position:relative;
top:-1px;
}
.nav-container-extended{
height:201px;
top:0;
}
/*slider*/
.slider-container{
margin-top:20px;
margin-bottom:20px;
}
.slider-container .row{
background-color:#f5f5f5;
/*因为grid.css上添加了左右边距-15px，使得背景色超出了。
为了避免超出，左右边距设为0*/
margin-left:0;
margin-right:0;
}
.slider-text-container{
padding:20px 0;
}
@media (min-width:768px){
.slider-container .row{
display: flex;
align-items:center;
}
}
/*product-container*/
.product-container{
margin-bottom:20px;
}
/*backtop-container*/
.backtop-container{
background-color: #fff;
border-top:1px solid #dadada ;
border-bottom:1px solid #dadada ;
}
/*helper-container*/
.helper-container{
padding-top:20px;
padding-bottom:10px;
background-color:#f7f7f7;
font-size: 12px;
line-height:2;
}
.helper-info-container{
line-height:1.6;
margin-bottom:20px;
}
.helper-backtop-container{
margin-bottom:10px;
}
/*footer-container*/
.footer-container {
padding: 15px 0;
background-color: #363636;
color: #a6a6a6;
font-size: 12px;
line-height: 2;
}
/*--layout 布局end--*/
/*--组件start--*/
/*btn-toggle*/
.btn-toggle{
padding:10px;
background-color:transparent;
border:none;
border-radius:4px;
cursor:pointer;
}
.btn-toggle:focus{
outline:none;
}
.btn-toggle:hover{
background-color:#f9f9f9;
}
.btn-toggle-bar{
display:block;
width:24px;
height:4px;
background-color:#363636;
border-radius:2px;
}
.btn-toggle-bar + .btn-toggle-bar{
margin-top:4px;
}
.btn-toggle:hover .btn-toggle-bar{
background-color:#1428a0;
}
/*btn-rounded*/
.btn-rounded{
display:inline-block;
padding:10px 30px;
background-color:transparent;
border-radius:30px;
border:1px solid #000;
color:#000;
font-size:16px;
font-weight:bold;
transition:all 0.5s;
}
.btn-rounded:hover{
background-color:#000;
color:#fff;
}
.btn-backtop:after{
display:inline-block;
content:" ";
width:10px;
height:6px;
background-image:url(../img/up.svg);
position:relative;
top:-2px;
left:5px;
}
.btn-backtop:hover:after{
background-image: url(../img/up-hover.svg);
}
/*btn-share*/
.btn-share{
display:inline-block;
width:30px;
height:30px;
background-size:100% 100%;
}
.btn-share-weixin{
background-image:url(../img/weixin.svg);
}
.btn-share-weixin:hover{
background-image:url(../img/weixin-hover.svg);
}
.btn-share-weibo {
background-image: url(../img/weibo.svg);
}
.btn-share-weibo:hover {
background-image: url(../img/weibo-hover.svg);
}
/*--组件end--*/
/*--内容start--*/
/*header*/
.header-logo{
width:136px;
height:100%;
display:flex;
align-items:center;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height:100%;
}
.header-nav{
display:flex;
justify-content:flex-end;
font-size:14px;
}
.header-nav-item{
margin-left:24px;
}
.header-nav-item:first-child{
margin-left:0;
}
.header-nav-link{
display:flex;
align-items:center;
font-weight:bold;
}
/*nav*/
.nav-link{
display: block;
height:40px;
line-height:40px;
font-weight:bold;
}
/*slider*/
.slider-title,
.slider-subtitle,
.slider-btns{
margin-bottom:20px;
text-align:center;
}
.slider-title,{
font-size:30px;
}
.slider-subtitle{
font-size:20px;
font-weight:normal;
}
.slider-btns .btn-rounded{
margin-right:10px;
margin-bottom:10px;
}
.slider-btns .btn-rounded:last-child{
margin-right:0;
}
/*product-container*/
.product-item{
display:block;
overflow:hidden;
}
.product-img{
transition:transform 1s;
}
.product-img:hover {
transform:scale(1.5);
}
/*backtop-container*/
.btn-backtop{
display:block;
padding:20px 0;
text-align:center;
}
/*helper-container*/
.helper-list-title{
font-size: 16px;
}
.helper-list{
margin-bottom:10px;
}
.helper-list .btn-share {
margin-top: 10px;
margin-right: 12px;
}
.helper-list .btn-share:last-child {
margin-right: 0;
}
/*footer*/
.footer-item{
display: inline-block;
margin-right: 20px;
}
.footer-item:last-child {
margin-right: 0;
}
.footer-link {
color: #fff;
font-size: 14px;
font-weight: bold;
}
.footer-link:hover {
color: #fff;
text-decoration: underline;
}
/*--内容end--*/
问题描述：
/*helper-container*/
.helper-container{
padding-top:20px;
padding-bottom:10px;
background-color:#f7f7f7;
font-size: 12px;
line-height:2;
}
.helper-info-container{
line-height:1.6;
margin-bottom:20px;
}
这里的line-height:2; line-height:1.6;与line-height:2em; line-height:1.6em;
为什么会对相应ul/li标签的宽度产生影响呢？不是一样的含义吗？
5
收起
正在回答
1回答
同学你好，是想问为什么对helper-list下的li标签的行高产生影响吧？如果是这样的话，那么可以参考如下解析：
1、当父元素的行高为 line-height:2em 时，会根据父元素的字体大小先计算出行高值然后再让后代元素继承。
所以当父元素helper-container设置line-height:2em时，后代元素的行高是 2 * 12px = 24px，示例：
2、当父元素的行高为line-height:2 时，会根据后代元素的字体大小动态计算出行高值让子元素继承。
所以当父元素 line-height:2 时，后代元素行高等于 2 * 14px = 28px。示例：
所以给helper-container设置line-height:2还是line-height:2em会影响后代元素li标签高度。
如果不是指这里的话，可以图文结合详细下具体指的是哪里，便于帮助同学准确的定位与解决问题。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星