display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。 display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。 inline-block详解 inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。
一、Display 显示模式转换 display 显示模式, 可以分为 行内显示模式 ; 块内显示模式 ; 行内块显示模式 ; 将 元素 的显示模式修改为 行内块显示模式 的方法 : 使用inline-block 可以改变显示模式 , 将 元素的显示模式 改为 行内块 显示模式 ; 使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示...
inline前后不会有换行,block前后会有换行,inline-block前后不会有换行,但内部会换行且可以设置高宽。,如下图所示:
在CSS中,可以使用display: inline-block属性将元素设置为内联块元素。内联块元素具有内联元素的特性,可以在同一行显示多个元素,同时又可以设置宽度、高度等块级元素的属性。 如果想在内联块元素后强制换行,可以使用display: block属性将元素设置为块级元素。块级元素会独占一行,不与其他元素共享同一行。 以下是一个示例...
图一:display:inline-block 图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下: >>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲) c.浮动布局不太好的地方:参差不齐的现象,我们...
在页面排版中,我们经常会有需要把多块内容放在一行显示。最常用的一种方法就是设置子元素为行内块级元素,display: inline-block;。当然也还有其它方式,如:display: flex; 等,这里就不展开讲了。 设置行内块级元素之后,细心的人就会发现子元素内容之前有个大概5个像素的间隙。
设置父元素的 font-size 为0: 将父元素的 font-size 设置为 0,可以消除由空白字符引起的间隙。然后,在每个 inline-block 子元素中重新设置 font-size。html <style> .container { font-size: 0; } .inline-block-element { display: inline-block; width: 100px; height: 100px; background-color...
inline-block默认的宽度是auto,意思就是宽度随内容增加而增宽,随浏览器宽度而换行。 所以这个例子中right要设置宽度,不设置宽度,会根据内容的情况撑开。内容不够,还能一行,内容足够的情况下,会占据100%的宽度,那时就换行了 *{ margin:0; padding:0; box-sizing:border-box; } .left{ display:inline-block; wi...
word-break:break-all; //设置换行 } 块级元素 css .son{ display:inline-block; vertical-align:middle;//垂直居中 margin:0 auto //水平居中 } flex 居中 .exam-checkbox-label { display: flex; align-items: center; //item 垂直居中 justify-content: center; //水平居中 ...
1)inline元素能设置和不能设置的属性,block都能设置 2)在block元素后强制换行 inline-block元素 1)允许其它元素在其左右 2)可以设置margin-top,padding-top,padding-bottom,margin-bottom 3)可以设置宽高 display:block, display:inline, display:inline-block外观(如下图) ...