css中行高与字号

144 阅读1分钟
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin:0;padding:0
        }
        p
        {
        	width: 310px;
        	height: 110px;
        	line-height: 110px;
        	background-color: yellow;
        	border: 1px solid red;
        }
        div
        {
        	box-sizing: border-box;
        	width: 100px;
        	height: 80px;
        	border: 1px solid yellow;
        	/*line-height: 80px;*/
        	line-height: 20px;
        	padding-top: 20px;
        	padding-bottom: 20px;
        	/*行高:80px-(padding-top+padding-bottom)等于40px,再除以2,为什么因为有两行等于垂直居中的行高*/
        
        }
	</style>
</head>
<body>
<p>66666666666666666666666666</p>
<div>我是文字我是文字我是文字</div>
<!--如果盒子有两行的把。/2就能得到垂直居中的行高了。细品·把。-->
</body>
</html>