`

CSS:display:inline;的认识

CSS 
阅读更多

display:inline;就是将本来是块级的元素显示为内嵌的元素,比如div是一个块级元素,设置了display:inline之后,就会跟其他元素在同级显示了
例:
text1
<div>text2</div>
这里的text1跟text2是分开在两行显示的

text
<div style="display:inline;">text2</div>
这里的text1和text2则是在同一行显示的

inline元素的特点是:
和其他元素都在一行上;

高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。

inlineblock可以控制一个元素的行宽高等特性,需要切换的情况如下:

让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

注释:

display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用

分享到:
评论

相关推荐

    详解CSS中的display:flex||inline-flex属性

    主要给大家介绍了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。

    CSS属性display:inline-block用法深入理解

    在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...

    CSS display:inline和float:left两者区别探讨

    本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...

    深入解析CSS的display:inline-block属性的使用

    display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与...

    关于css display: inline block inline-block的区别分析

    display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...

    css之display属性之inline-block布局实现详解

    CSS display 属性 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、...

    CSS: list-style 和 inline使用方法详解

    复制代码代码如下: display:inline; list-style:none outside none; white-space:nowrap 首先看下 list-style 的用法: 我以前只用到 list-style:none; 这种方式,原以为也只这种方式呢,这个方式只

    display:inline的用法

    &lt;div&gt; DIV1 &lt;/div&gt; &lt;div&gt; DIV2 ...和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了 &lt;span

    css解决display:inline-block;产生的缝隙(间隙)的方法

    本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。

    display:inline-block的原理分析

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 复制代码代码如下: display:inline-block 将对象...

    CSS中使用inline-block来进行居中的示例

    基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。  内容区声明的宽度不能大于容器的100% 减去0.25em...

    逆战班:盒模型中display4种常用属性值.html

    针对盒模型中display属性进行说明,对在盒模型中常用的display:none;display:block;display:inline;以及display:inline-block;的使用进行说明,欢迎大家交流。

    css(display,float,position)深入理解

    inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否浮动显示 float : none | left | right none:设置对象不浮动 left:设置对象浮在...

    CSS样式文件格式化工具

    很多工具生成的Css 都是多行的,很占用空间,于是写了这个格式化工具,将一个样式格式化为一行。 如有不足之处 敬请斧正! 例如: .UserLogin_7{ width:213px; height:45px; clear:both; margin-left:0px; ...

Global site tag (gtag.js) - Google Analytics