块级元素与行内元素

<div>是块级元素

浏览器会在其前后显示折行

<span>是行内元素

在默认情况下，由于span是行标签，设置width是无效的.只有改变display的属性，才可以实现设置宽度。

 

块级元素 block：

1. 自动换行。
2. 元素宽度在不设置的情况下，是它本身父容器的100%。

例子：<h1>, <p>, <ul>, <table>,<div>

 

行内元素 inline：

１．元素的高度、宽度及顶部和底部边距不可设置；

２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间

３．不能自动换行

1. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

例子：<b>, <td>, <a>, <img>，<span>

 

行内块级元素 inline-block:

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。