首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅析inline-block--使用inline-block创建布局

浅析inline-block--使用inline-block创建布局

作者头像
Sb_Coco
发布2018-05-28 10:58:47
1.1K0
发布2018-05-28 10:58:47
举报
文章被收录于专栏:Coco的专栏Coco的专栏

  inline-block前端程序猿们肯定不陌生,它是display属性的一个取值。

  之所以称之为inline-block。是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征。

  1. 块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
  2. 行内元素(inline elements)排列方式是水平排列。
  3. 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,即可以设定自己的高宽值,亦可以设定自己的padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列。

  Replaced element 置换元素

  说到这,有必要提的就是置换元素。何为置换元素,在html中,有类特殊的元素如:

  <img>|<input>|<button>|<select>|<textarea>|<label>

  他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。上述六个标签在现代浏览器中即为天生的inline-block元素。

  包裹性

  包裹性的另一种说法就是让元素inline-block化。意思是默认情况下一个div的宽度是以100%显示的,而一旦给这个div添加了postion:absolute属性,则100%的默认宽度会变成自适应的内部元素宽度。而诸如:

  overflow | position:absolute | float:left/right 等都可以让元素inline-block化产生包裹性。

  而包裹性的作用很多,其中一个是可以使用其来清除元素的浮动。

  inline-block的作用

css布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子。只是浮动经常会产生一些问题,那么问题来了?浮动是唯一的解决方案吗?

  浮动通常表现正常,但有时候搞起来会很纠结。特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题。So,inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征,而不需要处理一些浮动带来的问题。

  这里极力推荐一篇张鑫旭的文章:拜拜了浮动布局-基于display:inline-block的列表布局。文章讲解的非常透彻,也将使用inline-block需要解决的兼容问题给出了十分详尽可靠的解决方案。

  inline-block和float的区别

  虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:

  1. 文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
  2. 水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
  3. 垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
  4. 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
  5. IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。可参照去除inline-block元素间间距的N种方法
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-10-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档