display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。 display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。 inline-block详解 inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。
display:inline; width:值; height:值; } 那么width和height属性就会失效; 2.display:block转换成块元素,换行; 将元素转化为块级元素,有宽和高的属性,元素前后都有一个换行符 3.display:inline-block内联块元素,既不换行又可以使用块元素所拥有的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。
1.display:inline 转化成内联元素,但是不换行; 内联元素的前面和后面都不会有换行符,不可以给内联元素定宽和高,也就是说你如果同时给一个元素写display:inline;width:值;height:值;那么width和height属性就会失效。 2.display:block转换成块元素,换行; 将元素转化为块级元素,有宽和高的属性,元素前后都有一个换...
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容): div {display:inline-b...
给一下完整代码
(1)block:会独占一行,多个元素会另起一行,可以设置 width、height、margin 和 padding 属性; (2)inline:元素不会独占一行,设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性,不能设置垂直方向的 padding 和 margin; (3)inline-block:将对象设置为 inline 对象,但对象的内容作为 block ...
>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲) c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:图三: 图四: >>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inl...
inline-block，两个input中间的换行符会占据一个空格。float脱离文档流了所以没有这个空格。可以 或者...
同级div设置display:inline-block,父级div强制不换行 测试测试测试测试测试测试测试测试测试测试#container{width:400px;height:200px;background-color:red;overflow:auto;white-space:nowrap;}.lable{width:100px;background-color:blue;display:inline-block;} 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12...