CSS筆記-2:元素的顯示模式
元素的顯示模式即為一個標籤以什麼方式進行顯示,一般分為塊元素和行內元素
塊元素
常見的塊元素包括
<h> <p> <div> <ul> <ol> <li>等
塊元素的特點:
1.塊元素中的內容獨佔一行
2.塊元素中的高度、寬度以及頁邊距都可以設定
3.塊元素的預設寬度是上一級元素的100%
4.塊元素內部還可以放其他的塊元素或行內元素
5.文字類元素內部不能放塊元素,如p標籤和h標籤
行內元素
常見的行內元素包括
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
行內元素的特點:
1.相鄰行內元素的內容都會顯示在一行上
2.直接設定高、寬是無效的
3.預設寬度就是內容本身的寬度
4.行內元素只能容納文字或其它行內元素,不能新增塊元素
5.a標籤內部可以放塊元素,但是a裡面不能再巢狀a標籤,且a如果要放置塊元素需要提前轉化
行內塊元素
行內塊元素同時具有行內元素和塊元素的特點,一般常見的包括
<img> <input> <td>
其特點是:
行內元素型:
1.和相鄰行內塊元素在同一行上
2.預設寬度是其本身內容的寬度
塊元素特點:
高度、行高、外邊距、內邊距都可以被控制
元素顯示模式的轉化
將一類元素的顯示模式轉化為另一類
/*將行內元素轉化為塊級元素(以<a>標籤為例)*/
<style>
a{
width:50px;
height:50px;
background-color:red;
display:block;
</style>
其中的display:block可以將行內元素轉化為塊元素,使得連結可以在這個邊長為50px的紅色正方形內均生效。
/*將塊元素轉化為行內元素(以<div>為例)*/
<style>
div{
display:inline;
}
</style>
同理,轉化為行內塊元素的程式碼為display:inline-block
相關文章
- css 元素顯示模式CSS模式
- CSS 小結筆記之元素的隱藏與顯示CSS筆記
- 【CSS複合選擇器、元素顯示模式、背景】前端小抄(3) - Pink老師自學筆記CSS模式前端筆記
- 【CSS】CSS 世界 — 元素的顯示與隱藏學習總結CSS
- CSS3第二天(元素顯示模式、圖片背景設定)CSSS3模式
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- CSS display顯示分別為block、 inline、 inline-block的三種元素CSSBloCinline
- 設計模式筆記(2)設計模式筆記
- 2018年7月最新筆記本顯示卡效能排行 筆記本顯示卡天梯圖筆記
- 筆記本顯示卡排行天梯圖最新 2021年筆記本顯示卡效能天梯圖筆記
- 標籤的顯示模式模式
- CSS #定位 #顯示方式CSS
- 筆記本顯示卡天梯圖2022年4月最新 筆記本顯示卡效能排行說明筆記
- 筆記本顯示卡天梯圖2021最新版 筆記本遊戲顯示卡排行榜筆記遊戲
- CSS 小結筆記之圖示字型(IconFont)CSS筆記
- 根據子元素數量顯示不同樣式-純css解決方案CSS
- Cozmo人工智慧機器人SDK使用筆記(2)-顯示部分face人工智慧機器人筆記
- 筆記本顯示卡天梯圖2022年3月 筆記本顯示卡天梯圖2022最新版筆記
- 筆記本顯示卡可以挖礦嗎 筆記本挖礦顯示卡壽命一般多久筆記
- Css字型圖示偽元素方式引入CSS
- CSS圖片的灰色顯示效果CSS
- 顯示卡效能天梯圖2022最新 桌面顯示卡筆記本顯示卡效能天梯圖最新筆記
- 好程式設計師分享CSS標籤的分類、及顯示模式程式設計師CSS模式
- 1650顯示卡怎麼樣 筆記本1650顯示卡很垃圾嗎筆記
- 元素的隱藏和顯示(display ,visibility ,overflow)
- css超出顯示省略號CSS
- css使文字顯示兩行後顯示省略號CSS
- 筆記本3060相當於臺式什麼顯示卡 筆記本3060是高階顯示卡嗎筆記
- 印象筆記的markdown中程式插入 人性化顯示筆記
- 如何使用css顯示a連結的url?CSS
- CSS筆記CSS筆記
- CSS揭祕筆記(2):背景與邊框CSS筆記
- css一行顯示文字CSS
- css文字超出2行就隱藏並且顯示省略號CSS
- CSS 第2個li元素樣式CSS
- 筆記本外接顯示器會影響效能嗎 筆記本外接顯示器對電腦有負擔傷害嗎筆記
- 筆記本顯示卡天梯圖2022年5月最新版 筆記本移動端顯示卡排行天梯圖2022筆記
- esp32筆記[17]-顯示網路延遲筆記