CSS深入浅出（2）-高度、缝隙and导航
2019-03-14 本文已影响33人
如梦初醒Tel
高度是谁决定的？
div{
border:1px solid red;
font-size:20px;
font-family:kai;
}
image.png
在这里面设置了字体大小是20 ，为什么上面的高度是26，它应该是20才对。
原理解释：
基线对齐，建议行高，四线谱，字体设计
image.png
设计师认为，默认字体在26/20=1.3倍行高的时候，他认为这样很好看 这里面的26是由设计师自己建议的
比如说 line-height:20;
image.png
后面将字体变大100px，看一下效果。
image.png
可以这么解释，当没有line-height的时候，高度就是这个字体的大小和设计师建议的行高倍数决定的，比如上面字体大小20px*1.3倍建议行高=最终高度26px
当line-height确定的时候，高度就是line-height
缝隙问题
image.png
image.png
通过上面两个对比，发现换行之后会出现一个缝隙。其中根本原因在于
浏览器会把连续的多个空格或换行渲染成一个空格。
如果要写两个以上的空格就用 来表示
比如以下：
image.png
缺点是：空格太多，自适应不行。有可能在这个浏览器你可以，但是换了其他的浏览器你就会发现不合适。或者换一个字体之后，也会出现毛病，因为有的字体设计师用2.2来表示一个空格，有的是2.4，这不一样。
老外不用对齐，因为老外的英文不用分割。
解决方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
div{
border:1px solid red;
font-size:20px;
}
span{
border:1px solid green;
display: inline-block;
width:5em;
text-align:justify;
line-height:20px;
height:20px;
overflow:hidden;
}
span::after{
content:"";
display:inline-block;
border:blue 1px solid;
width:100%;
}
</style>
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
</body>
</html>
image.png
回到我们刚刚上面说的，有了空隙怎么消除呢？
可以消除掉，需要使用float:left
添加float之前
添加float之后
这里面的空格没有了，但是还是有问题，给ul添加border看看，发现这个边框没有把li包裹起来。
添加border
)
如何修改呢，在父级中添加
clear:both;清除浮动。
清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
ul{
border:1px solid green;
list-style:none;
margin:0;
padding:0;
}
ul > li{
border:1px solid red;
display: inline-block;
float:left;
}
.clearfix::after{
content:'';
display: block;
clear:both;
}
</style>
<body>
<div>
<ul class="clearfix">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
<li>选项7</li>
<li>选项8</li>
<li>选项9</li>
<li>选项10</li>
</ul>
</div>
</body>
</html>
将上述两个配合起来做一个简单的demo：
image.png
用ul+li来做一个导航
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
ul{
border:1px solid red;
list-style:none;
margin:0;
padding:0;
}
ul >li {
border:1px solid green;
display: inline-block;
width:4em;
text-align:justify;
height:20px;
overflow:hidden;
float:left;
}
ul>li::after{
border:1px solid blue;
content:'';
display: inline-block;
width:100%
}
.clearfix::after{
content:'';
display: block;
clear:both;
}
</style>
<div>
<ul class="clearfix">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ul>
</div>
</body>
</html>
