一般情况下是会默认显示块元素的,比如 ul, p标签,他们可以独占一行的原因是因为,一般情况下,系统默认设置了display: block;
块元素
块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域。
默认情况下,块状元素机会独占一行,默认情况下,块状元素会按顺序自上而下排列。
块状元素都可以定义自己的宽度和高度。
块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子。
例如:div p ul li ol li dl dt dd h1-h6等
行内(内联)元素
内联元素的表现形式是始终以行内逐个进行显示,横着排列。
内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含的内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
内联元素也会遵循盒模型基本规则,但是对于margin和padding个别属性值不生效。
行内元素无法实现上下边距,只能实现左右边距。
比如span标签,在span标签的前面有一个div标签,在此标签里面加上外边距的设置,就可以实现和span标签有上下的距离,要是不设置的话,span标签里面的内容就盖住div标签的内容。
行内元素例如:a b em i span strong等
行内块元素
内联块状元素(inline-block)就是同时具备内联元素,块状元素的特点。
例如:img input等
p标签可以放文本,但不能放块级元素。
<b>111111</b>
<em>555555</em>
<span>566884</span>
<strong>998233</strong>
<a href="http://www.baidu.com">5555</a>
行内元素,一般都是挤在同一行里,不会单独开出新行。如图所示