css-內聯（行內）元素、塊元素、margin、padding

時間 2019-11-13

標籤 css 內聯元素 margin padding 欄目 CSS 简体版

原文原文鏈接

css-內聯（行內）元素、塊元素、margin、padding

block元素的特色：
php

老是在新行上開始；
高度，行高以及頂和底邊距均可控制；
寬度缺省是它的容器的100%，除非設定一個寬度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。css

inline元素的特色：
和其餘元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子html

咱們來詳細瞭解它們的狀況。
塊元素(block element)通常是其餘元素的容器元素，塊元素通常都重新行開始，它能夠容納內聯元素和其餘塊元素,常見塊元素是段落標籤'P"。「form"這個塊元素比較特殊，它只能用來容納其餘塊元素。
若是沒有css的做用，塊元素會順序以每次另起一行的方式一直往下排。而有了css之後，咱們能夠改變這種html的默認佈局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。須要指出的是，table標籤也是塊元素的一種，table based layout和css based layout從通常使用者（不包括視力障礙者、盲人等）的角度來看這兩種佈局，除了頁面載入速度的差異外，沒有其餘的差異。可是若是普通使用者不經意點了查看頁面源代碼按鈕後，二者所表現出來的差別就很是大了。基於良好重構理念設計的css佈局頁面源碼，至少也能讓沒有web開發經驗的普通使用者把內容快速的讀懂。從這個角度來講，css layout code應該有更好的美學體驗。
你可以把塊容器元素div想象成一個個box，或者若是你玩過剪貼文載的話，那就更加容易理解了。咱們先把須要的文章從各類報紙、雜誌總剪下來。每塊剪下來的內容就是一個block。而後咱們把這些紙塊按照本身的排版意圖，用膠水從新貼到一張空白的新紙上。這樣就造成了你本身獨特的文摘快報了。做爲一種技術的延伸，網頁佈局設計也遵循了一樣的模式。
內聯元素(inline element)通常都是基於語義級(semantic)的基本元素。內聯元素只能容納文本或者其餘內聯元素，常見內聯元素「a」。
須要說明的是：inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到內聯元素，咱們會想到有個display的屬性是display:inline;這個屬性可以修復著名的IE雙倍浮動邊界問題。
塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差別是塊元素通常都重新行開始。而當加入了css控制之後，塊元素和內聯元素的這種屬性差別就不成爲差別了。好比，咱們徹底能夠把內聯元素cite加上display:block這樣的屬性，讓他也有每次都重新行開始的屬性。web

A：行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，能夠放在頁面上任何地方。

B：說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，若是不另加定義的話，它將獨立一行出現。瀏覽器

C：通常的塊級元素諸如段落<p>、標題<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級連接<a>、圖像<img>、<span> ……..sass

D：塊級無素的顯著特色是：每一個塊級元素都是從一個新行開始顯示，並且其後的無素也需另起一行進行顯示。ide

E：<span>在CSS定義中屬於一個行內元素，而<div>是塊級元素。
用容器這一詞會更容易形象理解它們的存在與用途，行內元素至關一個小容器，而<div>至關於一個大容器，大容器固然能夠放一個小容器了。<span>就是小容器。
塊元素(block element)通常是其餘元素的容器元素，塊元素通常都重新行開始，它能夠容納內聯元素和其餘塊元素,常見塊元素是段落標籤’P」。「form」這個塊元素比較特殊，它只能用來容納其餘塊元素。佈局

display:inline
它可讓行內顯示爲塊的元素，變爲行內顯示，例如
DIV1
DIV2
這裏DIV1和DIV2分別佔一行，可是你給他們加上屬性後變了
DIV1 DIV2
DIV1和DIV2這時候顯示在同一行了
和 display:inline 對應的是 display:block，block 會讓應用了該 CSS 屬性的 HTML 標記變成塊級別元素，例如 SPAN 是行內顯示的，可是你加了 display:block 屬性就不同了
[font style= "display:block "] SPAN1 [/font]

block通常一個塊佔一行，除非float性能

inline是自動排爲一行，就象段內的文字同樣，可成爲多行。字體

display:inline比較經典的用法是用在 <ul> 下的 <li> 中

display:inline 對應不顯示爲 display:none

display:block 對應不顯示爲 hidden

說通俗點 樣式爲none的元素不佔位置,而樣式爲hidden的元素雖然不顯示但仍是佔地方

inline-block的元素特色：

display:inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。
將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。(準確地說，應用此特性的元素呈現爲內聯對象，周圍元素保持在同一行，但能夠設置寬度和高度地塊元素的屬性)
並非全部瀏覽器都支持此屬性，目前支持的瀏覽器有：Opera、Safari在IE中對內聯元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表症。從上面的這個分析，也不難理解爲何IE下，對塊元素設置display:inline-block屬性沒法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout，而它本就是行佈局，因此觸發後，塊元素依然仍是行佈局，而不會如Opera中塊元素呈遞爲內聯對象。
IE下塊元素如何實現display:inline-block的效果？
有兩種方法：
一、先使用display:inline-block屬性觸發塊元素，而後再定義display:inline，讓塊元素呈遞爲內聯對象（兩個display要前後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，若是先定義了display:inline-block，而後再將display設回inline或block，layout不會消失）。代碼以下（...爲省略的其餘屬性內容）：
div {display:inline-block;...}
div {display:inline;}
二、直接讓塊元素設置爲內聯對象呈遞（設置屬性display:inline），而後觸發塊元素的layout（如：zoom:1等）。代碼以下：
div {display:inline; zoom:1;...}

塊元素(block element)
◎ address - 地址
◎ blockquote - 塊引用
◎ center - 舉中對齊塊
◎ dir - 目錄列表
◎ div - 經常使用塊級容易，也是css layout的主要標籤
◎ dl - 定義列表
◎ fieldset - form控制組
◎ form - 交互表單
◎ h1 - 大標題
◎ h2 - 副標題
◎ h3 - 3級標題
◎ h4 - 4級標題
◎ h5 - 5級標題
◎ h6 - 6級標題
◎ hr - 水平分隔線
◎ isindex - input prompt
◎ menu - 菜單列表
◎ noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
◎ noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
◎ ol - 排序表單
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表 內聯元素(inline element)
◎ a - 錨點◎ abbr - 縮寫
◎ acronym - 首字
◎ b - 粗體(不推薦)
◎ bdo - bidi override
◎ big - 大字體
◎ br - 換行
◎ cite - 引用
◎ code - 計算機代碼(在引用源碼的時候須要)
◎ dfn - 定義字段
◎ em - 強調
◎ font - 字體設定(不推薦)
◎ i - 斜體
◎ img - 圖片
◎ input - 輸入框
◎ kbd - 定義鍵盤文本
◎ label - 表格標籤
◎ q - 短引用
◎ s - 中劃線(不推薦)
◎ samp - 定義範例計算機代碼
◎ select - 項目選擇
◎ small - 小字體文本
◎ span - 經常使用內聯容器，定義文本內區塊
◎ strike - 中劃線
◎ strong - 粗體強調
◎ sub - 下標
◎ sup - 上標
◎ textarea - 多行文本輸入框
◎ tt - 電傳文本
◎ u - 下劃線
◎ var - 定義變量

按ie的說法，margin，padding，border這些是layout屬性。彷佛不應用在inline元素上。
但css2.1規範裏有說明：
margin適用於
all elements except elements with table display types other than table-caption, table and inline-table
padding適用於
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
不過，
margin-top/bottom對non-replaced inline元素無效（have no effect on non-replaced inline elements）。
margin-left/right對non-replaced inline元素會起做用，但當non-replaced inline是a元素時，ie下使用margin-left/right會有一個a:active虛框錯位的小問題。
http://bbs.blueidea.com/thread-2927667-1-1.html
因此我以爲對non-replaced inline元素使用margin不大好。
對replaced inline元素（img,textarea,button這些）的使用margin同block上效果也不大相同。
http://www.cssass.com/blog/index.php/2009/121.html
padding也差很少。
padding-top/bottom用在non-replaced inline元素上，咱們也看不出效果。

最後，感謝藍色代碼經典論壇，感謝百度百科，感謝意祥的未眠花與蝴蝶，感謝

lzy19881227，感謝angelox……

相關標籤/搜索

每日一句

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