提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS中line-height详解(代码实例)【html5教程】,css,line-height,代码

元素的高度是由什么决议关于我们处理页面显现题目和规划页面都有很大的协助。 通例的操纵表现是为一个块级元素设置height属性,则其具有了高度:

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>

然则依据熟知,当我们不为元素设置height,而元素中有内容时,该元素依旧猎取到了高度:

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

为何div猎取到了高度,并非由于笔墨撑起了高度,而是line-height撑起了div,比较一下两头代码

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

效果以下:

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>

不言而喻的效果就是由于有了height所以有高度,没有height则由于有了line-height而有了高度 更多细致的细节实在是由于 每一行笔墨 都有一个line boxes, 这些一个个盒子天然撑起了父元素的高度。

同时,视察上面的例子就可以发明笔墨的中线和line-height的中线是在雷同位置的,所以才有了经常使用的那套居中方法:

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>

设置line-height和height雷同数值则可以使得个中笔墨垂直居中

从效果来看确切云云,然则这句话不对,这句话过剩了几个字,完整不需要设置height,只需要line-height就可以够做到笔墨垂直居中了。

以上就是CSS中line-height详解(代码实例)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS中line-height详解(代码实例)【html5教程】,css,line-height,代码"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线