Html CSS學習（三）Html文檔流

時間 2019-11-11

標籤 html css 學習文檔欄目 HTML 简体版

原文原文鏈接

Html文檔流

剛開始學習Html時，並無太多的關注於行內元素、塊級元素、文檔的渲染過程等內容，直到後面學習Div+CSS佈局時，在通過了各類的浮動、設置內外邊距、邊框等時，以爲佈局好難的，本來，好好的佈局，因爲內容的改動或者內外邊距的調整，從而致使了佈局的變更，此時，才逐漸明白了文檔流以及行內元素、塊級元素的概念，今天再從新對這部份內容進行梳理，以更好的掌握。css

1、什麼是文檔流

首先來看一個最簡單的html文檔，其代碼內容以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Java程序設計</li>
        <li>ASP.NET程序設計</li>
        <li>Html與CSS網頁設計</li>
    </ul>
    <span>Hello</span>
    <span>文檔流</span>
    <p>
        這是一段文本字
    </p>
</body>
</html>

其頁面結果以下：canvas

學習Html時，都知道，頁面中的內容是body標籤內部的內容。從這個例子中，能夠知道，Html頁面在呈現時，是從上向下依次進行呈現的，也就是說，哪一個元素在前面，就先呈現它。在body中，首先是ul標籤，這是一個列表，其中li是列表項，從結果來看，每一個li單獨佔一行，而緊隨其後的兩個span元素呢，並非獨佔一行，而是兩個span元素共同佔一行。再後面的p標籤，也是獨佔一行。這就是文檔流。框架

Html文檔流就是在呈現網頁的內容時，從元素組織的順序，即在Html文件中的順序，按照從上向下，依次在屏幕上進行呈現。有些獨佔一行，有些共同佔用一行。下面咱們爲這些元素添加邊框來看一下，ide

2、行內元素（內聯元素）與塊級元素

從上面的圖中，能夠看出不一樣的標籤，其呈現的結果是不一樣的，主要分爲兩種：一是獨佔一行，一是多個元素共同佔一行。佈局

塊級元素：在頁面中獨佔一行。不管其後是否還有空間，都不容許再放置其它內容。塊級元素能夠設置其寬度（默認爲100%）、高度、內外邊距等。而且能夠容納其它的塊級元素和行內元素。學習

行內元素：多個行內元素共同佔一行。並且多個行內元素之間並非緊密相鄰，而是有一個空格的距離。行內元素不能設置高度和寬度，對於內外邊距只能設置左右，不能設置上下的。行內元素能夠容納文本和其它行內元素。spa

塊級元素：插件

標籤	描述
<address>	定義地址。
<article>	定義文章。
<aside>	定義頁面內容以外的內容。
<audio>	定義聲音內容。
<blockquote>	定義長的引用。
<canvas>	定義圖形。
<caption>	定義表格標題。
<dd>	定義定義列表中項目的描述。
<div>	定義文檔中的節。
<dl>	定義定義列表。
<dt>	定義定義列表中的項目。
<details>	定義元素的細節。
<fieldset>	定義圍繞表單中元素的邊框。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。
<footer>	定義 section 或 page 的頁腳。
<form>	定義供用戶輸入的 HTML 表單。
<h1> to <h6>	定義 HTML 標題。
<header>	定義 section 或 page 的頁眉。
<hr>	定義水平線。
<legend>	定義 fieldset 元素的標題。
<li>	定義列表的項目。
<menu>	定義命令的列表或菜單。
<meter>	定義預約義範圍內的度量。
<nav>	定義導航連接。
<noframes>	定義針對不支持框架的用戶的替代內容。
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<ol>	定義有序列表。
<output>	定義輸出的一些類型。
<p>	定義段落。
<pre>	定義預格式文本。
<section>	定義 section。
<table>	定義表格。
<tbody>	定義表格中的主體內容。
<td>	定義表格中的單元。
<tfoot>	定義表格中的表注內容（腳註）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內容。
<time>	定義日期/時間。
<tr>	定義表格中的行。
<ul>	定義無序列表。設計

行內元素：

標籤	描述
<a>	定義錨。
<abbr>	定義縮寫。
<acronym>	定義只取首字母的縮寫。
<b>	定義粗體字
<bdo>	定義文字方向。
<big>	定義大號文本。
<br>	定義簡單的折行。
<button>	定義按鈕 (push button)。
<cite>	定義引用(citation)。
<code>	定義計算機代碼文本。
<command>	定義命令按鈕。
<dfn>	定義定義項目。
<del>	定義被刪除文本。
<em>	定義強調文本。
<embed>	定義外部交互內容或插件。
<i>	定義斜體字。
<img>	定義圖像。
<input>	定義輸入控件。
<kbd>	定義鍵盤文本。
<label>	定義 input 元素的標註。
<map>	定義圖像映射。
<mark>	定義有記號的文本。
<objec>	定義內嵌對象。
<progress>	定義任何類型的任務的進度。
<q>	定義短的引用。
<samp>	定義計算機代碼樣本。
<select>	定義選擇列表（下拉列表）。
<small>	定義小號文本。
<span>	定義文檔中的節。
<strong>	定義強調文本。
<sub>	定義下標文本。
<sup>	定義上標文本。
<textarea>	定義多行的文本輸入控件。
<time>	定義日期/時間。
<tt>	定義打字機文本。
<var>	定義文本的變量部分。
<video>	定義視頻。
<wbr>	定義可能的換行符。

3、行內元素（內聯元素）與塊級元素的相關設置

行內元素與塊級元素能夠經過其display屬性進行設置

display:block;設置行內元素爲塊級元素

display:inline;設置塊級元素爲行內元素

將上例中的樣式修改成如下內容：

li{
   display: inline;
   border: 1px solid green;
}
span{
   display: block;
   border: 1px solid blue;
}
p{
   border: 1px solid red;
}

頁面結果以下：

經過結果，發現原來li是塊級元素，如今變成了行內元素，而span原來是行內元素，如今變成了塊級元素。

總結：

塊級元素老是獨佔一行，而且能夠設置其寬度和高度，所以，主要用來呈現大塊的內容，並容納其它的塊級元素和行內元素。

行內元素老是多個元素呈如今一行內，所以，行內元素主要用來呈現某一塊內的細節部分。

相關標籤/搜索

html+css+javascript+html

每日一句

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