CSS元素顯示模式

CSS的元素顯示模式

1. 什麼是元素顯示模式
   • 做用：網頁的標籤很是多，在不一樣的地方會用到不一樣類型的標籤，瞭解他們的特色能夠更好的佈局咱們的網頁
   • 元素的顯示模式就是元素（標籤）以什麼樣的方式進行顯示，好比<div> 本身獨佔一行，好比一行能夠放多個<span>
   • HTML元素通常分爲塊元素和行內元素兩種類型
2. 塊元素
   • 常見的塊元素有<h1>~<h6> <p> <div> <ul> <ol> <li> 等，其實<div> 標籤是最經典的快元素
   • 塊元素的特色
     • 獨佔一行
     • 高度、寬度、外邊距以及內邊距均可以控制
     • 寬度默認是容器（父級寬度）的100%
     • 是一個容器及盒子，裏面能夠放行內或者快級元素
   • 【注意】
     • 文字類的元素內不能使用快級元素
     • <p> 標籤主要用於存放文字，所以<p> 裏面不能放快級元素，特別是不能放<div>
     • 同理，<h1> ~<h6> 等都是文字類快級標籤，裏面不能放其餘塊級元素
3. 行內元素
   • 常見的行內元素<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等，其中<span> 標籤 是最典型的行內元素。有的地方也將行內元素稱爲內聯元素。
   • 行內元素特色
     • 相鄰行內元素在一行上，一行能夠顯示多個
     • 高寬直接設置是無效的
     • 默認寬度就是它自己內容的寬度
     • 行內元素只能容納文本或其餘行內元素
   • 【注意】
     • 連接裏面不能在放連接
     • 特殊狀況連接<a> 裏面能夠放塊級元素，可是給<a> 轉換一下快級模式最安全
4. 行內塊元素
   • 在行內元素中有幾個特殊的標籤——<img /> <input /> <td /> ,他們同時具備塊元素和行內元素的特色
   • 行內塊元素的特色
     • 和相鄰行內塊元素在一行上，可是他們之間會有空白縫隙。一行能夠顯示多個
     • 默認寬度就是它自己內容的寬度
     • 高度、寬度、外邊距以及內邊距均可以控制

元素模式	元素排列	設置樣式	默認高度	包含
塊級元素	一行只能放一個塊級元素	能夠設置寬度高度	容器的100%	容器級能夠包含任何標籤
行內元素	一行能夠放多個行內元素	不能夠設置寬度高度	它自己內容的寬度	容納文本或其餘行內元素
行內塊元素	一行放多個行內塊元素	能夠設置寬度和高度	它自己的寬度

1. 元素顯示模式的轉換
   • 特殊狀況下，咱們須要元素模式的轉化，簡單理解：一個模式的元素須要另外一種模式的特性，好比想要增長連接<a> 的觸發範圍
   • 轉化爲塊元素：display：block
   • 轉換爲行內元素：display：inline
   • 轉換爲行內塊元素：display：inline-block