hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

CSS中line-height详解(代码实例)【html5教程】

2019-11-26HTML搜搜PHP网51°c
A+ A-
元素的高度是由什么决议关于我们处理页面显现题目和规划页面都有很大的协助。 通例的操纵表现是为一个块级元素设置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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS中line-height详解(代码实例)【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章