css 小知识点：inline/inline-block/line-height

icattlecoder 发布于2019-04-23 13:27 / 2570人阅读

摘要：此元素会被显示为内联元素，元素前后没有换行符。因此无法设置宽度和高度行内块元素。元素前后没有换行符新增的值用通俗的话讲，就是不独占一行的块级元素。只是现在兼容性不太好，无奈脸。。。

inline:

此元素会被显示为内联元素，元素前后没有换行符。因此：无法设置宽度和高度～

inline-block:

行内块元素。元素前后没有换行符（CSS2.1 新增的值）

用通俗的话讲，就是不独占一行的块级元素。然后拥有块级元素的属性，可以设置宽度和高度。

line-height:

对于块级元素，line-height指定了元素内部line-boxes的最小高度
对于非替代行内元素，line-height用于计算line-box的高度
对于替代行内元素，例如input、button，line-height没有影响

这个属性可以实现多行文本垂直居中：


    基于行高实现的...


CSS：
.box {
    width: 280px;
    line-height: 120px;
    background-color: #f0f3f9; // 为了看到外面盒子
    margin: auto;
}
.content {
    display: inline-block; // 设置为内联元素，并且可以有块级属性
    line-height: 20px;
    margin: 0 20px;
    text-align: left;
    vertical-align: middle;
}

效果：

单行文本，垂直居中：


     单行文本垂直居中


css:
div{
      background-color: #abcdef; // 为了看
      line-height: 400px; // 只需要设置line-height
}

效果图：

最后结语：实现垂直居中的方法，我还是最喜欢flex，简单易懂，没那么多妖娥子。只是现在兼容性不太好，无奈脸。。。

GPU云服务器云服务器小知识 javaweb小知识关于网络安全的小知识知识点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1893.html

前端一些小知识点

摘要：两个只会一个有效。值大的那个有效幼圆无效有效幼圆解決只设置一个六，不加载情况下网站能运作的一个小例子图片作为超链接时，网速不佳不能加载，依然可以继续操作。然后高度为零此时图片就显示不出来。一，主流浏览器及内核 Chrome Webkit/blink IE Trident Firfox Gecko Safari ...

yzzz 2019-04-23 11:48 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
关于网页的一些小知识点

摘要：元数据是关于数据的信息。标签提供关于文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，元素被用于规定页面的描述关键词文档的作者最后修改时间以及其他元数据。 Web前端的基础知识什么是web？WEB标准是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1....

CarterLi 2019-08-30 15:52 评论0 收藏0
关于网页的一些小知识点

摘要：元数据是关于数据的信息。标签提供关于文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，元素被用于规定页面的描述关键词文档的作者最后修改时间以及其他元数据。 Web前端的基础知识什么是web？WEB标准是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1....

galois 2019-08-01 16:17 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0