CSS中display:Inline-block与float浮动
刚开始学习CSS,今天写了一个这样的代码,结果VSCode出现了这样的:
1.在CSS样式中如果出现了如下代码:
.search {float: left;display: inline-block;
}
则在VSCode中会提示如下信息:inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay)
大概意思就是说他们两个同时出现,如果浮动的值不是none,则inline-block会被忽略,最终这个盒子会是浮动的,显示为block样式。
2.display常见的几个属性
css之display:inline-block布局
(1).display的几个常用的属性值,inline , block, inline-block
inline(行内元素):
使元素变成行内元素,拥有行内元素的特性,即:
a、可以与其他行内元素共享一行,不会独占一行.
b、不能更改元素的height,width的值,大小由内容撑开.
c、可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
block(块级元素):
使元素变成块级元素,
a、独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
b、能够改变元素的height,width的值.
c、可以设置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了。
CSS中display:Inline-block与float浮动相关推荐
- CSS中display:block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- CSS中display:block和display:flax使用记录
CSS中display:block和display:flax使用记录 代码: (css) .navigation ul li a{position:relative;width: 100%;text- ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
- angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...
- html中display属性含义,css中display是什么意思?
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...
- CSS中Display(显示)和Visibility(可见)
CSS中常见的显示属性Display和可见属性Visibility display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
最新文章
- 【FPGA】双端口RAM的设计(同步读写)
- Codeforces Round #401 (Div. 1) C(set+树状数组)
- 全面详细的jQuery常见开发技巧手册
- FP error code老是忘记的看这里:只给出最常用的几个。
- Mac怎么不能拷贝文件到U盘
- mysql 时间类型 datetime,timestamp
- mysql 随机记录 newid()_sql随机查询数据语句(NewID(),Rnd,Rand(),random())
- html怎么用div从左到右,单独使用CSS,你怎么能有一个从右到左的边框底部渐变?...
- 【优化调度】基于matlab粒子群算法求解经济调度优化问题【含Matlab源码 1489期】
- 在线安装Eclipse插件时,出现错误
- HomeBrew加速
- Chrome 中的自动播放策略如何设置自动播放
- 口袋精灵java源码_0428数字口袋精灵app优化
- 【EXLIBRIS】随笔记 009
- c语言:24、大小端序
- 2-软件生命周期模型
- Linux操作系统与Shell编程
- teamlab什么意思_去看炸火的teamLab大型个展前 你应该知道的事
- 容器上搭建Skywalking
- java新手工资一般多少?java程序员的薪资是多少呢?