css之display
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了。
作者:Ry-yuan
如需转载请标明出处,本文地址:CSS之使用display:inline-block来布局 - 渊源远愿 - 博客园
欢迎访问我的博客:http://ry-yuan.me
css之display相关推荐
- CSS属性display:inline-block使用揭秘
本文向大家描述一下CSS属性display:inline-block的用法,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格.但对于这个属性不是所有 ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- jquery 控制CSS属性display 实现元素的显示、隐藏
前言 略. 隐藏元素 $("#id").hide() 等效的写法: $("#id").css('display','none'); 等效的CSS: displa ...
- [css] 请问display:inline-block在什么时候会显示间隙?
[css] 请问display:inline-block在什么时候会显示间隙? 解决方法 1.全局font-size设置成0 2. 取消两个div之间的空格 个人简介 我是歌谣,欢迎和大家一起交流前后 ...
- [css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
- angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...
- 在css样式中隐藏元素,用JS改变的元素CSS样式,css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
- CSS 布局 - display 属性
CSS 布局 - display 属性
- CSS中display:block和display:flax使用记录
CSS中display:block和display:flax使用记录 代码: (css) .navigation ul li a{position:relative;width: 100%;text- ...
- CSS中display:Inline-block与float浮动
刚开始学习CSS,今天写了一个这样的代码,结果VSCode出现了这样的: 1.在CSS样式中如果出现了如下代码: .search {float: left;display: inline-block; ...
最新文章
- 计算机应用能力考试xp,全国专业技术人员计算机应用能力考试XP
- 卷积神经网络新手指南之二
- 理解Docker(5):Docker 网络
- 【呆子化雨】浅谈Discuz插件开发-邮件验证提醒插件
- 优化ASP.NET应用性能之ViewState篇
- 推荐系统CTR预估学习路线:深度模型
- 1470: 区间求最值(RMQ问题,ST算法模板)
- 【gRPC】ProtoBuf 语言快速学习指南
- 计算机绘图中特征建模的概念,2016年电大 -机械cadcam计算机辅助设计制造习题集.doc...
- [导入]DataHelper
- mysql 使用中_phpmyadmin显示MySQL数据表“使用中” 修复后依然无效的解决方法
- 红外遥控Arduino智能小车
- java毕业设计旅游官网mybatis+源码+调试部署+系统+数据库+lw
- 服务器ie浏览器访问不了网站,IE浏览器打不开网站网页怎么办 IE无法加载网页解决方法。...
- 安卓6.0获取相机权限
- 第二次作业(时事点评)
- win10向右键新建中添加可创建的文件类型
- STL源码剖析(四):容器(6)Rb_tree
- 理财入门之萌萌赚钱观
- 微信根据Media_id下载录音报错readfile(): Peer certificate CN=`mp.weixin.qq.com‘ did not match expected CN=`file
热门文章
- Eclipse常用插件在线安装和离线安装方式
- 基于labview的姿态测量系统上位机界面编写
- python编程培训要多少钱
- 工作手机监控管理系统才是企业的明智选择!
- 更改计算机bios密码怎么办,简单五步设置BIOS密码使电脑更安全
- SCO UNIX快速入门
- I.MX6ULL裸机驱动开发四种方式总结
- 放弃支持旧机型,Win11需英特尔8代CPU起步
- Python数据可视化 Pyecharts 制作 Boxplot 箱线图
- app\build\intermediates\res\merged\debug\values-v23\values-v23.xml 编译出错的问题