行內元素和塊級元素的學習

時間  2019-11-18
標籤 元素 學習 简体版
原文   原文鏈接

行內元素和塊級元素的學習

@(css)[妙瞳]
css標準文檔流：css

簡稱"標準流"，指的是在不使用其它的與排列和定位相關的特殊CSS規則時，各類元素的排列規則。HTML文檔中元素能夠分爲塊級元素和行內元素。html

  • 塊級元素：老是以一個塊的形式表現出來，而且跟同級的兄弟一次豎直排列，左右撐滿。瀏覽器

  • 行內元素：行內元素不佔據單獨的空間，依附於塊級元素，行內元素沒有本身的區域。它一樣是DOM樹的一個節點，在這點上，行內元素和塊級元素是沒有區別的。行內元素不能夠設置寬與高，但能夠與其餘行內元素位於同一行，行內元素內通常不能夠包含塊級元素。行內元素的高度通常由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有a,em,strong等。app

盒子在標準流中的定位原則（見我上篇文章：聊聊盒子模型）
（1）行內元素之間的水平margin
當兩個行內元素緊鄰時，它們之間的距離爲第1個元素的margin-right加上第2個元素的margin-left。
（2）塊級元素之間的豎直margin
當兩個塊級元素緊鄰時，它們的距離不是margin-bottom與margin-top的總和，而是二者中的較大者。
（3）嵌套盒子之間的margin
當一個div塊包含在另外一個div塊中時，便造成了典型的父子關係。其中子塊的margin將以父塊的 content爲參考。
（4）將margin設置爲負值
當margin設置爲負值時，會使被設爲負數的塊向相反的方向移動，甚至覆蓋在另外的塊上。框架

代碼演示以下：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        ul{
            border:1px solid red;
        }
        li{
            border:1px solid green;
        }
        strong{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1個列表的第1個項目內容</li>     
        <li>第1個列表的第2個<strong>項目內容</strong>,內容更長一些，
        目的是演示自動折行的效果。</li>
    </ul>
    <ul>
        <li>第2個列表的第1個項目內容</li>
        <li>第2個列表的第2個項目內容，內容更長一些，目的是演示自動折行
        的效果。</li>
    </ul>  
</body>
</html>

頁面效果：學習

如上代碼所示，其內容是body中有兩個列表（ul），ul列表中又各有兩個列表項目（li）。一共有四層，頂層爲body，第二層爲ul，第三層爲li，第四層爲文本。ul和li都爲塊級元素，而strong則爲行內元素，從 DOM 的角度來看，塊級元素和行內元素是沒有區別的，都是樹上的一個節點，而從 CSS 的角度來看，兩者就有不少的區別，塊級元素有屬於本身的區域，而行內元素沒有！就如頁面效果圖所示。標準流就是 CSS 規定的默認的塊級無素和行內元素的排列方式。
從body標記開始，依次把其中的子元素放到適當的位置。若是一個html更爲複雜，層次更多，那麼也和這個同樣，直至全部的元素被檢查一遍，分配到相應的區域。在這個過程，一個一個的盒子天然地造成一個序列，同級別的盒子依次排列在父級盒子中，就像一條河流有幹流和支流同樣，這就是被稱爲「流」的緣由。

行內元素的特色：字體

  • 和其餘行內元素都在一行上；
  • 設置寬度width無效，寬度是根據它的內容而定。
  • 設置高度height無效，能夠經過line-height來設置。高度隨字體大小而變。
  • 設置margin只有左右margin有效，上下無效。
  • 設置padding只有左右padding有效，上下無效。
  • 行內元素只能容納文本或者其餘的行內元素。

塊級元素的特色：spa

  • 老是在新行上開始；
  • 高度、行高以及外邊距和內邊距均可控制；
  • 寬度缺省是它容器的100%，除非設定一個寬度；
  • 它能夠容納行內元素和其餘塊級元素；

假如我對strong的line-height進行設置，效果以下：3d

strong{
        border:1px solid #000;
        line-height:50px;
    }

頁面效果：


由上所示，line-height的設置，行內元素strong的高度改變。

假如咱們對strong的height進行設置，效果以下：

strong{
        border:1px solid #000;
        height:50px;
    }

頁面效果：


由上所示，height的設置，行內元素strong的高度並未改變。

代碼：

li{
        border:1px solid green;
        margin-left:20px;
        margin-right:20px;
        margin-top:20px;
        margin-bottom:20px;
    }
    strong{
        border:1px solid #000;
        margin-left:20px;
        margin-right:20px;
        margin-top:20px;
        margin-bottom:20px;
    }

頁面效果圖：

由上可示，對於行內元素strong而言，margin-left和margin-right有效，可是margin-top和margin-bottom失效。對於塊級元素li而言，上下左右的margin都有效。

代碼：

li{
        border:1px solid green;
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        padding-bottom:20px;
    }
    strong{
        border:1px solid #000;
        padding-left:20px;
        padding-right:20px;
        padding-top:30px;
        padding-bottom:20px;
    }

頁面圖：


由上所示，對於行內元素strong而言，padding-left和padding-right有效，可是padding-top和padding-bottom失效,只是上下的範圍擴大，但是對其餘元素內容並無改變。對於塊級元素li而言，上下左右的padding都有效。

行內元素和塊級元素的區別：

  • 行內元素會在一條直線上排列，都是同一行的，水平方向排列，
    塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。

  • 塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。

  • 行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上

  • 行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效，而塊級元素都有效。

  • text-align屬性是二者表現的又以不一樣之處

在W3C CSS2.1規範第16.2節 對text-align 有詳細地描述：

值： left | right | center | justify | inherit

初始值：匿名值，由'direction'的值而定，若是'direction'爲'ltr'則爲'left'，若是'direction'爲'rtl'則爲'right'。
應用於: 塊級元素，表格單元格，行內塊元素
繼承性: 是

計算後的值：初始值或指定值

這個特性描述瞭如何使一個塊元素的行內內容對齊。

注意一點，標準裏說這個屬性是用來對齊行內內容的，因此，不該該對塊級內容起做用。

解釋一下，行內內容是說由行內元素組成的內容，好比 SPAN 元素，IFRAME元素和元素樣式的　‘display : inline’ 的都是行內元素；塊級內容跟則是由塊級元素構成，DIV 是最經常使用的塊級元素。塊級元素和行內元素的區別是，塊級元素會佔一行顯示，而行內元素能夠在一行並排顯示。

這樣，咱們對這個特性的認識應該就清楚了。可是，雖然標準裏這麼規定，那麼是否是全部瀏覽器都遵照呢？答案是否認的。

IE6/7及IE8混雜模式中，text- align:center可使塊級元素也居中對齊。其餘瀏覽器中，text-align:center僅做用於行內內容上。

解決上面的問題比較好的方式，就是爲全部須要相對父容器居中對齊的塊級元素設置「margin-left:auto; margin-right:auto」。但這個方式 IE6/IE7/IE8的混雜模式中不支持，因此還要設置父容器的 "text-align:center;"。若居中對齊的子元素內的行內內容不須要居中對齊，則還須要爲其設置「text-align:left」。

代碼：

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>CSS</title>
            <style>
                body{
                    width:800px;
                    border:1px solid #000;
                }
                div.wrapper{
                    /*margin:0 auto;*/
                    width:500px;
                    border:1px solid red;
                    text-align: center;
                }
                div.box1{
                    border:1px solid red;
                
                }
                div strong{
                    border:1px solid green;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <div class="box1">
                    <strong>我是行內元素</strong>
                </div>
                <p>我是塊級元素</p>
            </div>
        </body>
        </html>

頁面：
IE8/Firefox/Chrome/Safari/Opera:

IE6/IE7:

代碼：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style>
            body{
                width:800px;
                border:1px solid #000;
            }
            div.wrapper{
                margin:0 auto;
                width:500px;
                border:1px solid red;
            }
            div.box1{
                border:1px solid red;
                text-align:center;
            
            }
            div strong{
                border:1px solid green;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box1">
                <strong>我是行內元素</strong>
            </div>
            <p>我是塊級元素</p>
        </div>
    </body>
    </html>

IE8/Firefox/Chrome/Safari/Opera:

IE6/IE7：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        body{
            width:800px;
            border:1px solid #000;
        }
        div.wrapper{
            margin:0 auto;
            width:500px;
            border:1px solid red;
            text-align:center;
        }
        div.box1{
            border:1px solid red;
        }
        div strong{
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
            <strong>我是行內元素</strong>
        </div>
        <p>我是塊級元素</p>
    </div>
</body>
</html>

IE6/IE7/IE8/Firefox/Chrome/Safari/Opera:

塊級元素、行內元素分別彙總以下：

Examples of block level elements

block level elements|Element    Description
<address>           information on author
<blockquote>                long quotation
<button>            push button
<caption>           table caption
<dd>                definition description
<del>               deleted text
<div>               generic language/style container
<dl>                definition list
<dt>                definition term
<fieldset>          form control group
<form>              interactive form
<h1>                heading
<h2>                heading
<h3>                heading
<h4>                heading
<h5>                heading
<h6>                heading
<hr>                horizontal rule
<iframe>            inline subwindow
<ins>               inserted text
<legend>            fieldset legend
<li>                list item
<map>               client-side image map
<noframes>          alternate content container for non frame-based rendering
<noscript>          alternate content container for non script-based rendering
<object>            generic embedded object
<ol>                ordered list
<p>             paragraph
<pre>               preformatted text
<table>             table
<tbody>             table body
<td>                table data cell
<tfoot>             table footer
<th>                table header cell
<thead>             table header
<tr>                table row
<ul>                unordered list

Examples of inline elements

inline elements  |  Element Description
<a>                 anchor
<abbr>                  abbreviated form
<acronym>               acronym
<b>                 bold text style
<bdo>                   I18N BiDi over-ride
<big>                   large text style
<br>                    forced line break
<button>                push button
<cite>                  citation
<code>                  computer code fragment
<del>                   deleted text
<dfn>                   instance definition
<em>                    emphasis
<i>                 italic text style
<iframe>                inline subwindow
<img>                   Embedded image
<input>                 form control
<ins>                   inserted text
<kbd>                   text to be entered by the user
<label>                 form field label text
<map>                   client-side image map
<object>                generic embedded object
<q>                 short inline quotation
<samp>                  sample program output, scripts, etc.
<select>                option selector
<small>                 small text style
<span>                  generic language/style container
<strong>                strong emphasis
<sub>                   subscript
<sup>                   superscript
<textarea>              multi-line text field
<tt>                    teletype or monospaced text style
<var>                   instance of a variable or program argument

塊級元素列表

<address>   定義地址
<caption>   定義表格標題
<dd>            定義列表中定義條目
<div>           定義文檔中的分區或節
<dl>            定義列表
<dt>            定義列表中的項目
<fieldset>  定義一個框架集
<form>          建立 HTML 表單
<h1>            定義最大的標題
<h2>            定義副標題
<h3>            定義標題
<h4>            定義標題
<h5>            定義標題
<h6>            定義最小的標題
<hr>            建立一條水平線
<legend>    元素爲 fieldset 元素定義標題
<li>            標籤訂義列表項目
<noframes>  爲那些不支持框架的瀏覽器顯示文本，於 frameset 元素內部
<noscript>  定義在腳本未被執行時的替代內容
<ol>            定義有序列表
<ul>            定義無序列表
<p>         標籤訂義段落
<pre>           定義預格式化的文本
<table>         標籤訂義 HTML 表格
<tbody>         標籤表格主體（正文）
<td>            表格中的標準單元格
<tfoot>         定義表格的頁腳（腳註或表注）
<th>            定義表頭單元格
<thead>         標籤訂義表格的表頭
<tr>            定義表格中的行

行內元素列表

<a> 標籤可定義錨
<abbr>  表示一個縮寫形式
<acronym>定義只取首字母縮寫
<b> 字體加粗
<bdo>   可覆蓋默認的文本方向
<big>   大號字體加粗
<br>    換行
<cite>  引用進行定義
<code>  定義計算機代碼文本
<dfn>   定義一個定義項目
<em>    定義爲強調的內容
<i> 斜體文本效果
<img>   向網頁中嵌入一幅圖像
<input> 輸入框
<kbd>   定義鍵盤文本
<label> 標籤爲 input 元素定義標註（標記）
<q> 定義短的引用
<samp>  定義樣本文本
<select>建立單選或多選菜單
<small> 呈現小號字體效果
<span>  組合文檔中的行內元素
<strong>語氣更強的強調的內容
<sub>   定義下標文本
<sup>   定義上標文本
<textarea>多行的文本輸入控件
<tt>    打字機或者等寬的文本效果
<var>   定義變量

可變元素素列表--可變元素爲根據上下文語境決定該元素爲塊級元素或者內聯元素

<button>    按鈕
<del>           定義文檔中已被刪除的文本
<iframe>    建立包含另一個文檔的內聯框架（即行內框架）
<ins>           標籤訂義已經被插入文檔中的文本
<map>           客戶端圖像映射（即熱區）
<object>    object對象
<script>    客戶端腳本

行內元素轉換爲塊級元素

display:block; (字面意思表現形式設爲塊級)
 display:inline;
 display:inline-block;

能夠經過修改樣式display屬性改變元素是以塊級仍是行內元素呈現，當display的值設爲block時，元素將以塊級方式呈現；當display值設爲inline時，元素將以行內形式呈現。

若是想讓一個元素能夠設置寬度高度，又讓它以行內形式顯示，咱們能夠設置display的值爲inline-block。

經過css設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性爲「block」或「list-item」的元素都是塊級元素。
可是浮動元素比較特殊，因爲浮動，其旁邊可能會有其餘元素的存在。而「list-item」（列表項

  • ），會在其前面生成圓點符號，或者數字序號。

    假若有不足或者錯誤的地方，歡迎指正喲。-------妙瞳

    • 相關文章