溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關如何進行中塊級元素和行內元素的特征與轉換，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
塊級元素和行內元素
1.元素的定義
根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認display屬性值為“inline”，稱為“行內”元素。
div這樣的塊級元素，就會自動占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子，塊級元素的特征總結如下：
默認獨占一行
沒有寬度時，默認撐滿一排
支持所有css命令
與之相反，像“span”、“a”這樣的行內元素，則沒有自己的獨立空間，它是依附于其他塊級元素存在的，因此，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的，行內元素的特征總結如下：
同排可以繼續跟同類的標簽
內容撐開寬度
不支持寬高
不支持上下的margin和padding
代碼換行被解析
1.元素的轉換
display:block -----> 顯示為塊:使內聯元素具備塊屬性標簽的特性
display:inline -----> 顯示為內嵌:使行塊屬性標簽具備內聯元素的特性
display:inline-block -----> 顯示為行內塊狀元素
行內塊狀元素的特征：
塊在一行顯示；
行內屬性標簽支持寬高；
沒有寬度的時候內容撐開寬度
問題：
1、代碼換行被解析；
2、ie6 ie7 不支持塊屬性標簽的inline-block;
3.常見的行內元素
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 - 定義變量
4.常見的塊狀元素
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h2 - 大標題
* h3 - 副標題
* h4 - 3級標題
* h5 - 4級標題
* h6 - 5級標題
* h7 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
補充樂園
：
1、vertical-align（垂直對齊）
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.top {vertical-align:text-top}
.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>這是一幅<img class="top" border="0" src="#" />位于段落中的圖像。</p>
<p>這是一幅<img class="bottom" border="0" src="#" />位于段落中的圖像。</p>
</body>
</html>運行結果：
PS：<img>標簽中，屬性src沒有圖片的URL，請自行添加圖片地址測試。
2、css reset（重設）
CSS重設就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導致設計師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來讓所有瀏覽器都按照同樣的規則解釋CSS，這樣就能避免發生這種問題。
例1：
*{padding:0;margin:0;}這是最普遍最簡單的CSS重設，將所有元素的padding核margin值都設為0，可以避免一些瀏覽器在理解這兩個屬性默認值上的“分歧”。
例2：
*{padding:0;margin:0;border:0;} 這是在上一個重設的基礎上添加了對border屬性的重設，初始值為0.
例3：
*{padding:0;margin:0;border:0;outline:0;} 在前兩個的基礎上，添加了outline屬性的重設，防止一些沖突。
例4：
*{ vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}濃縮實用型的css reset重設，該方法出自Perishable Press。
看完上述內容，你們對如何進行中塊級元素和行內元素的特征與轉換有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
