display属性_CSS之使用display:inline-block来布局
1.解释一下display的几个常用的属性值,inline , block, inline-block
- inline(行内元素):
- 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行.
- 不能更改元素的height,width的值,大小由内容撑开.
- 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
block(块级元素):
- 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
- 能够改变元素的height,width的值.
- 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
inline-block(融合行内于块级):
- 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲,就是不独占一行的块级元素。如图:
图二:
两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。
2.inline-block布局 vs 浮动布局
a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果
b.相同之处:能在某程度上达到一样的效果
我们先来看看这两种布局:
图一:display:inline-block
图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:
>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)
c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
图三:
图四:
>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。
3.inline-block存在的小问题:
a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
b.去除空隙的方法:
1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙
现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的
图一:
c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
在ie6/7下:
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素:需添加{display:inline;zoom:1;}
4.总结:
display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:
a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群
→点这里jq.qq.com
display属性_CSS之使用display:inline-block来布局相关推荐
- html中display属性含义,css中display是什么意思?
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...
- CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
- 关于前端position属性和display属性,这篇文章已足够
在我初学前端的时候,对position和display,尤其是flex特别的混乱,故总结一套,希望能帮助到有需要的同学.这里我想特别告诫一下移动端学习web的同学,例如position:relativ ...
- html5中display属性,display的属性
在一般的css布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.,display这个属性用于定义建立布局时元素生成的显示框类型.对于 html 等文档类型, ...
- Style display 属性
定义和用法 display 属性设置或返回元素的显示类型. HTML 中的元素大多是"内联"或"块"元素:一个内联元素,在其左侧和右侧都是浮动内容.一个块元素填 ...
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- java display属性_显示和隐藏(display属性)none或block
显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...
- java display html_css html布局之display属性_动力节点Java学院整理
1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占有1行: ...
- html display布局,Web布局:display属性
经过CSS盒模型和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念.即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子):都有自己的视觉格式化(不同的盒子).而其中CSS ...
最新文章
- php使用redis的GEO地理信息类型
- mysql中的增删查找和查看2;
- Django-路由控制
- 操作系统之银行家算法—详解流程及案例数据
- python底层源码_Python每天一分钟:解析python底层类的实现原理——竟然是type()
- 《移动应用开发》作业——JavaScript
- boost::functional模块功能性的测试程序
- 错误码如何设计才合理?
- linux simple这个目录哪来的,Arch Linux 碎碎念
- 怀旧服大脚插件未能从服务器,《魔兽世界怀旧服》大脚插件 安装方法使用教程...
- BSTR与CString之前的转换
- linux mysql多实例启动_Mysql实例Linux下启动多个mysql服务器例子
- 在ios中制作3d文字球效果
- P6800 - 刷入CWM
- d3js精通教程_d3js从基础到精通第二部分
- 关机时Ubuntu-Unattended upgrade in progress during shutdown
- Java动态读取map里面的key值
- Java并发编程一线程池简介
- powerdesigner 16.5 破解步骤
- 对比 iOS 14.5 最强更新功能,Android 系统做得怎么样?
热门文章
- Inside Spring - learning notes - Jerry Wang的Spring学习笔记
- 本地安装 SAP WebIDE 的本地存储研究
- S/4HANA服务订单Service Order的批量创建
- SAP 销售云支持的丰富的报表显示类型
- 如何处理SAP CRM错误消息the item category X is not permitted
- 如何处理Docker的错误消息request canceled:Docker代理问题
- 使用JavaScript ES6的新特性计算Fibonacci(非波拉契数列)
- python两个类共用一个变量_python – 如何从一个类到另一个类访问变量?
- eclipse无法创建java虚拟机_2020年哪些IDE是最适合Java开发人员的?
- 抖音gorgon算法04php,抖音xgorgon(0401)获取方法及演示