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

時間 2019-12-09

標籤 css 元素欄目 CSS 简体版

原文原文鏈接

塊級元素

特色：1.每一個塊級元素都是獨自佔一行，其後的元素也只能另起一行，並不能兩個元素共用一行。
　　　2.元素的高度、寬度、行高和頂底邊距都是能夠設置的。　　
　　　3.元素的寬度若是不設置的話，默認爲父元素的寬度。css

常見的塊級元素：
div、p、h1-h六、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等等，還有一些沒有列舉的是在平常代碼中不是很是經常使用html

行級元素

特色：1.能夠和其餘元素處於一行，不用必須另起一行。
　　　2.元素的高度、寬度及頂部和底部邊距不可設置。
　　　3.元素的寬度就是它包含的文字、圖片的寬度，不可改變。spa

常見的行級元素：
span、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下劃線）、button（默認display：inline-block））3d

例子：code

<html>
<head>
    <title>區別</title>
    <style type="text/css">
        .div1{background-color: red;}
        .span1{background-color: yellow;}
    </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>

顯示結果：orm

將行內元素分行顯示或將塊級元素同行顯示

display:block -- 顯示爲塊級元素（塊級元素默認樣式） htm

display:inline -- 顯示爲行內元素（行內元素默認樣式）blog

display:inline-block -- 顯示爲行內塊元素，表現爲同行顯示並可修改寬高內外邊距等屬性（行內塊元素默認屬性）圖片

咱們常將<ul>元素加上display:inline-block樣式，本來垂直的列表就能夠水平顯示了。ci

例子：

<html>
<head>
    <title></title>
    <style type="text/css">
        .div1{background-color: red;display: inline;}
        .span1{background-color: yellow;display: block;}
    </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>

結果：

其餘小知識點

（1）關於行內元素和塊級元素的嵌套問題
通常狀況下塊級元素能夠包含行內元素行內塊元素塊級元素，行內元素不能包含塊級元素，只能包含行內元素及行內塊元素。
如：

<div>
    <span>
        <p></p>
    </span>
<p></p>
<input type="text">
</div>

有些特殊的塊級元素不能包含塊級元素,只能包含行內元素：h1~h六、p、dt
當運行下圖代碼，審查元素時會發現div自動跑出p的內容：

<p style="background-color:bisque;">
    <div style="background-color: blue;height:20px;"></div>
</p>

運行查看網頁源代碼如圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。