關於CSS中的塊級元素以及行級元素

塊級元素

特點：1.每個塊級元素都是獨自佔一行，其後的元素也只能另起一行，並不能兩個元素共用一行。

2.元素的高度、寬度、行高和頂底邊距都是可以設定的。　　

3.元素的寬度如果不設定的話，預設為父元素的寬度。

常見的塊級元素：、、...、、、、、、、

行級元素

特點：1.可以和其他元素處於一行，不用必須另起一行。

2.元素的高度、寬度及頂部和底部邊距不可設定。

3.元素的寬度就是它包含的文字、的寬度，不可改變。

說了半天的概念舉個例子說明一下：

<

html
>
<
head
>
<
title
>區別
title
>
<
style 
type
="text/css"
>
.div1
.span1
style
>
head
>
<
body
>
<
div 
class
="div1"
>我是塊級元素1
div>

我是塊級元素2

<

span 
class
="span1"
>我是行級元素1
span
>

我是行級元素2

body

>
html
>

如果可以很清晰的看出塊級元素直接佔了一行並且寬度和父元素的寬度一樣，而行級元素可以兩個一起佔一行，並且行級元素的寬度與其內的文字等寬。

行級元素與塊級元素的轉換

如果想將塊級元素與行級元素相互轉換，該怎麼辦呢？

可以在css樣式中用display:inline將塊級元素設為行級元素

同樣，也可以用display:block將行級元素設為塊級元素

**示例如下：

<

html
>
<
head
>
<
title
>
title
>
<
style 
type
="text/css"
>
.div1
.span1
style
>
head
>
<
body
>
<
div 
class
="div1"
>我是塊級元素1
div>
<
div 
class
="div1"
>我是塊級元素2
div>
<
span 
class
="span1"
>我是行級元素1
span
>
<
span 
class
="span1"
>我是行級元素2
span
>
body
>
html
>

可見，原來的塊級元素展示為了行級元素，原來的行級元素展示為了塊級元素。

行級-塊級元素

如果又想設定高度、寬度、行高以及頂和底邊距，又想元素處於一行，該怎麼辦呢？

此時就可以用display:inline-block將元素設定為行級-塊級元素。

CSS中的塊級元素與行級元素

最近初學css時對塊級元素與行級元素有時會產生混淆，寫篇部落格記錄一下自己對其的理解。先從概念上來看 塊級元素 特點 1.每個塊級元素都是獨自佔一行，其後的元素也只能另起一行，並不能兩個元素共用一行。2.元素的高度 寬度 行高和頂底邊距都是可以設定的。3.元素的寬度如果不設定的話，預設為父元素的寬度...

HTML的塊級元素以及內聯元素

html的塊級元素以及內聯元素 塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元...

塊級元素以及行內元素居中顯示

title type text css container center style head id container id center div div body html 以上方法是我認為最好用的，不過缺點是需要知道元素的寬度和高度。通過設定需要定位的div元素為position absolu...