块级元素 : 会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 div 就是块级元素
行级元素: 与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。
span就是行级元素。
display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。
display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。
display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
<div id="div1"> <div style="background-color: red; width: 300px; height: 100px; display: inline-block"></div> <div style="background-color: green; width: 200px; height: 100px; display: inline-block"></div> </div>
这样红色块 和 绿色块 就在一行了。
我们发现两个色块之间有空隙,是因为有换行符导致的。
<div id="div1" style="font-size: 0px"> <div style="background-color: red; width: 300px; height: 100px; display: inline-block"></div> <div style="background-color: green; width: 200px; height: 100px; display: inline-block"></div> </div>
这样设置两个色块之间就没有空隙了。