国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

詳解css中的display屬性（行內元素和塊級元素）

figofuture / 3380人閱讀

摘要：在中，和就是典型的行內元素元素。內聯元素不多帶帶占一行，給他設置寬高是沒有用的。在中和就是塊級元素。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級表格來顯示類似，表格前后帶有換行符。

display屬性

首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline

我們常用的display屬性值有：

inline

block

inline-block

none

把 display 設置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden 還會保留。

那么，display:inline、display:block和display:inline-block有什么區別呢？




inline
inline

block
 block

inline-block
inline-block

點擊result查看demo:


http://jsfiddle.net/qjgcjLm8/

inline特性

我們發現內聯對象inline給它設置屬性height和width是沒有用的，致使它變寬變大的
原因是

內部元素的寬高`+padding`。觀察inline對象的前后元素我們會發現`inline`不多帶帶占一行，
其它元素會緊跟其后。
block特性 
而塊對象`block`是可以設置寬高的，但是它的實際寬高是本身寬高`+padding`。
觀察`block`的前后元素我們會發現`block`要多帶帶占一行。

然而，當我們即需要div有寬高，又不希望它獨占一行怎么辦？

inline-block特性

這個時候我們就需要使用inline-block了，再觀察一下上面的demo，我們會發現：

inline-block既具有block的寬高特性又具有inline的同行元素特性。

也就是說，當我們想要讓一個元素既不獨占一行，又可以設置其寬高屬性的時候，我們就可以選擇inline-block了。

然而，在IE6/7下padding對inline的寬高是對其沒影響的。

由此，我們可以聯想到行內元素和塊級元素

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

2、元素的高度、寬度、行高及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
塊級元素特點 
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

在html中，、、就是典型的行內元素（inline）元素。

塊級元素是可以設置寬高的，但是它的實際寬高是本身寬高+padding。block元素要多帶帶占一行。內聯元素不多帶帶占一行，給他設置寬高是沒有用的。

在html中

、

、

、
、
    和
  • 就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將行內元素a轉換為塊狀元素，從頁使用a元素具有塊狀元素特點。

    a{display:block;}

    那么，display的其他屬性值呢？

    list-item 此元素會作為列表顯示。

    run-in此元素會根據上下文作為塊級元素或內聯元素顯示。

    compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

    marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

    table 此元素會作為塊級表格來顯示（類似table），表格前后帶有換行符。
    inline-table 此元素會作為內聯表格來顯示（類似table），表格前后沒有換行符。
    table-row-group 此元素會作為一個或多個行的分組來顯示（類似tbody）
    table-header-group 此元素會作為一個或多個行的分組來顯示（類似thead）
    table-footer-group： 此元素會作為一個或多個行的分組來顯示（類似tfoot）
    table-row 此元素會作為一個表格行顯示（類似 tr ）。
    table-column-group 此元素會作為一個或多個列的分組來顯示（類似 colgroup ）。
    table-column 此元素會作為一個單元格列顯示（類似 col ）
    table-cell 此元素會作為一個表格單元格顯示（類似 td 和 th）
    table-caption 此元素會作為一個表格標題顯示（類似 caption）

    行內和塊級元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110924.html

相關文章

  • css中的display屬性(行內元素和塊級元素)

    摘要：元素分類關于這點我還有些問題，暫且放上來，慢慢修改，非常歡迎糾正中的標簽元素大體被分為三種不同類型塊狀元素，內聯元素和內聯塊狀元素常見的塊狀元素有常見的內聯元素有有類特殊的元素如等，他們被稱為可置換元素。 我們常用的display屬性值有： inline block inline-block none 把 display 設置成 none 不會保留元素本該顯示的空間，但是 vis...

    Magicer 評論0 收藏0

  • 前端面試題-行內元素和塊級元素

    摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。 一、行內元素 一個行內元素只占據它對應標簽的邊框所包含的空間。 二、塊級元素 塊級元素占據其父元素（容器）的整個空間，因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。 三、行內元素示例 HTML showIm...

    int64 評論0 收藏0

  • 前端面試題-行內元素和塊級元素

    摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。 一、行內元素 一個行內元素只占據它對應標簽的邊框所包含的空間。 二、塊級元素 塊級元素占據其父元素（容器）的整個空間，因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。 三、行內元素示例 HTML showIm...

    cucumber 評論0 收藏0

  • 塊級元素和行內元素

    摘要：例效果注為塊級元素行內元素，與塊級元素相對，它不會占一行，兩個甚至多個行內元素一般情況下在同一行。塊級元素各占據一行默認寬度為父元素的，垂直方向排列。塊級元素可以包含行內元素和塊級元素。一直對塊級元素和行內元素的區別和特性有點模糊，于是各方參考總結一下，方便自己梳理知識： 首先說一下什么是塊級元素和行內元素塊級元素，指自動占一行的元素，下一個元素（標簽）會在新行開始，這行就是這個塊級元素的地...

    yhaolpz 評論0 收藏0

  • 行內元素和塊元素以及行內塊元素的特點

    摘要：標簽一般分為塊標簽和行內標簽兩種類型，也可以稱為塊元素和行內元素。塊元素和行內元素的具體特點如下三塊級元素塊元素會獨自占據一整行，或者多行，可以任意設置其大小尺寸，是用于搭建網頁布局的必須部分，使網頁結構更加緊湊合理。一、背景 初學html，接觸很多標簽、、、、等，當寫出簡單的小頁面的時候，例如僅僅是一篇帶有標題的文章，標題標簽單獨一行，不管后面有多大的空間；標簽中使用多個給某些詞做強調，但...

    OldPanda 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<