                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

title的现height为32我理解了，但原height是否是34？

原问题有更改：

#title li{
display:inline-block;
text-align:center;
width:60px;
line-height:30px;
padding:0;
border:1px solid #999999;
border-bottom:none;
margin-left:5px;
}
#title li.on{
border-top:2px solid #8B4513;
border-bottom:2px solid #FFFFFF;
}
#title{
border-bottom:2px solid #8B4513;
height:32px;
}

为了显示的清楚，原题中的白色被我换成了蓝色。

如图C所示，为了达到题目中蓝色线条部分空白的效果，title的height被设置为32，height=line-height30+border-top2

但如果删除height=32的条件，就会变成如图B所示，但是我不知道如图B所示的height是否是34？

风早君418

2016-06-28

源自：JavaScript进阶篇 10-1

关注问题我要回答

457

操作

收起

1 回答

洛伦丹夏天
2016-06-29

图A并不是36，应该是35。

照你说，如果删除height = 32的条件，那么title的高度就由里面的元素的高度决定，

也就是li的高度+li的边框+加上title的边框。

li的高度为：30；li的边框为：1+1=2；title的边框（border-bottom：2px）：2；

这样加起来是34没错是吧？

但是你有一个li.on的border-top啊，那个可是两像素啊，所以应该是35。

所以在没设置title的高度的前提下，是达不到题目中的效果的。

多去了解下HTML的盒模型box-sizing。

你看，中间那条缝隙，明显没有下面的粗呢。

0 回复有任何疑惑可以回复我~

#1

风早君418 提问者

看完您的答案我想了一下，title的高度应该只包含li高度（30）＋li边框（1+0=1）＋li.on（2+2=4）＝35吧？title的高度应该是不包含title的边框的，title的高度应该只是里面的东西的高度，边框border应该是不算的。

2016-06-29 回复有任何疑惑可以回复我~

#2

风早君418 提问者

可是又不是35，你把height=35以及height=34输入到那里，反而是height=34和不输入任何东西的效果是一样的

2016-06-29 回复有任何疑惑可以回复我~

#3

洛伦丹夏天回复风早君418 提问者

- -！谁说不算的了啊，你又没定义box-sizing：border-box！！！！你自己用chrome看一下就知道是多少了啊！

2016-06-30 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468046 人
解答问题 21891 个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

本课相似问答

1 回答为什么height是0？

1 回答height=50%是啥作用来着？

1 回答height:190px;高度是否不用设置，采用自适应

1 回答line-height指的是什么，含义是什么?

1 回答#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

搜索更多本课相关问答

title的现height为32我理解了，但原height是否是34？

我要回答关注问题

意见反馈帮助中心 APP下载