css学习笔记之 inline-block

原创 2015年07月11日 00:39:42


inline-block 行内块元素,行内块元素作为一个行内框与其他元素的内容相关。只是这个行内框的高度可以像块一样操作,但是其内部无行分割标准,换句话说就是把该行内框中所有的内容高度当作一行内容的高度。

如下图:

有方框的是inline-block的元素,hhh...是匿名文本,右上图可知,判断inline-block可以先把各个元素当成行内框,行内框中的内容是默认基于基线对齐的,然后再在文本周围加上边框,就是该边框位置,可以选择让vertical-align=top,这样边框的顶端就会对齐了,因为行内元素的顶端会与行框顶端对齐,文本对齐了,边框自然也就对齐了。

 


css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...
  • noob_pudding
  • noob_pudding
  • 2014年08月22日 11:25
  • 788

CSS中display属性:block、inline和inline-block的区别

设置span的高度和宽度无效,span的margin和padding无效
  • aitangyong
  • aitangyong
  • 2015年02月28日 20:51
  • 3332

display:inline-block的icon不垂直居中问题

需要了解知识点: 1、基线:基线并不是汉字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基线间的距离; 图片来源链接地址! 进入正题: 父元素设置line...
  • u012076852
  • u012076852
  • 2016年09月07日 11:50
  • 3755

inline-block和block元素水平居中显示

http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html 一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,...
  • tel15277169530
  • tel15277169530
  • 2016年11月03日 19:57
  • 2712

css如何去掉inline-block之间的空隙

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inlin...
  • qq_27101127
  • qq_27101127
  • 2017年01月06日 21:26
  • 179

告诉你CSS中 display:inline-block到底是个什么鬼

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了in...
  • Vera0707
  • Vera0707
  • 2015年11月15日 22:13
  • 469

display:inline-block和元素水平居中的关系

一般情况下, 如果我们要使一个div在父元素中水平居中显示, 我们会给它设置一个宽度, 然后设置margin: 0 auto; 但这个属性只有在div的display为block或者默认情况下才会有效...
  • u012863664
  • u012863664
  • 2017年01月30日 10:49
  • 2868

HTML5 CSS block / inline / inline-block

这一章节讲到了block,inline还有inline-block的知识 block:块元素 inline:内联元素 具体的转载了一片文章过来,可以看下面的 转载地址:http://www.c...
  • bestallen
  • bestallen
  • 2016年07月29日 12:57
  • 384

inline-block兼容性问题及解决

IE6、IE7不识别inline-block,但可以触发块元素。 其它主流浏览器均支持inline-block。 ji...
  • dl429
  • dl429
  • 2014年11月13日 13:37
  • 749

css-display:inline-block引起的上边距差1px

整个div设置height 每个li里设置line-height ,height比line-height高1px 左右白边距  : 整个div里设置font-size:0;字标签里再设置字...
  • sevenbblythelulu
  • sevenbblythelulu
  • 2015年07月07日 14:03
  • 1532
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css学习笔记之 inline-block
举报原因:
原因补充:

(最多只允许输入30个字)