display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。 display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。 inline-block详解 inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。
1)block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度 2)block可以设置width,height属性,设置之后仍然独占一行 3)block元素可以设置margin和padding属性 display:inline 1) inline元素不会独自占一行,多个相邻元素会排在同一行中,直到一行排不下,才会新换一行,其宽度随元...
inline-block(融合行内于块级): 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点. 用通俗的话讲,就是不独占一行的块级元素。如图: 图二: 两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和...
本文主要针对最常用display属性block, inline和inline-block的控制进行详细解释,以便于大家能有更全面的理解。 同时最容易疏忽的地方为主,进行重点介绍。 重点一:font-size的细节控制 重点二:font-size和line-height的配合使用。 重点三:vertical-align的使用 ...
使用inline-block可以实现在一行内水平排列多个元素,同时保留块级元素的特性。以下是如何使用inline-block的步骤: 在HTML中,选择需要应用inline-block的元素或元素组合。可以使用以下方式选择元素: 使用标签名选择元素,例如: 使用类名选择元素,例如:.my-element 使用ID...
Display：inline-block是内联元素，简单来说就是在同一行显示。内联元素（html规范中的概念）英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display：inline；这个属性能够修复著名的IE双倍浮动边界...
1、文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。 2、水平位置(Horizontal position):很明显你不能通过给父元素设置text-align...
大致意思就是:inline-block 后的元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。 一句话解释:它是一个格式化为行内元素的块容器。 兼具行内元素和块元素的特点。 2、inline-block为什么会有间距?
可以采用display: inline(转换成行内元素)、block(转换成块级元素)、inline-block(转换成行内块元素) 如下图 .cat{background-color: red;display: block;} .dog{background-color: blue;display: block;} .pig{background-color: black;display: inline;} .horse{background...