CSS篇之inline-block

ARGUS 发布于2019-08-29 11:22 / 836人阅读

摘要：代码主页原因对于元素，如果里面没有内联元素，或者不是，那么这个元素的基线就是其底边缘，否则，它的就是元素包含的内容中最后一行内联元素的基线。在此例中中没有内联元素，所以就是下边缘，中有内容主页，所以是以内容的主页的下边缘作为自己的。

今天写代码时遇到当设置inline-block的元素有内容时总有部分掉下去的感觉。

代码：

主页

i{display: inline-block;width: 20px;height: 20px;background: url(homepage.svg) no-repeat;}
span{display: inline-block;width:50px;height: 20px;}

like this:

原因：

对于inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，那么这个元素的基线baseline就是其margin底边缘，否则，它的baseline就是元素包含的内容中最后一行内联元素的基线。

在此例中i中没有内联元素，所以baseline就是margin下边缘，span中有内容“主页”，所以是以内容的baseline(“主页”的下边缘)作为自己的baseline。

方法：

1.添加：

i,span{vertical-align:top;}

2.添加:

span{overflow:hidden;}

原因：设置overflow:hidden之所以能解决这个问题，是因为overflow:hidden的设置使其内容产生了BFC，受BFC之间互不影响这一特性，所以不再因为文字而下落。

效果：

拓展：

1.vertical-algin是一个应用于行内元素和表格单元的属性，默认值是baseline。
baseline是要求该元素的基线与其父元素的基线对齐。

2.BFC相关内容链接：BFC

结语：暂时这么多。

云服务器 GPU云服务器 inline-block css引入css css _CSS

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

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

CSS篇之inline-block

摘要：代码主页原因对于元素，如果里面没有内联元素，或者不是，那么这个元素的基线就是其底边缘，否则，它的就是元素包含的内容中最后一行内联元素的基线。在此例中中没有内联元素，所以就是下边缘，中有内容主页，所以是以内容的主页的下边缘作为自己的。今天写代码时遇到当设置inline-block的元素有内容时总有部分掉下去的感觉。代码：主页 i{display: inline-block;wid...

Y3G 2019-08-01 15:45 评论0 收藏0
CSS篇之巧用line-height

摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代码：已中止 .left-tit{ wi...

dendoink 2019-08-30 15:53 评论0 收藏0
CSS篇之巧用line-height

摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代码：已中止 .left-tit{ wi...

hsluoyz 2019-08-01 16:23 评论0 收藏0
CSS篇之水平导航

摘要：关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下，请实现水平导航。缺点，和方法一样，会出现空白间隙，解决方案如上，因为是行内元素，所以不能设置宽高，比较局限。关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题：一个最简单的html结构如下，请实现水平导航。 ...

李义 2019-08-29 11:19 评论0 收藏0
JQuery 干货篇之选择元素

摘要：干货篇之选择元素实验的的代码选择器选择正在处理动画的元素选择第一个元素选择最后一个元素选择第个元素从开始选择序号为偶数的元素选择序号为奇数的元素选择序号大于的元素选择序号小于的元素选择所有的文本输入框 JQuery 干货篇之选择元素实验的HTML+CSS的代码 html Example Jacquis Flower Shop ...

zorpan 2019-08-20 15:56 评论0 收藏0