CSS的元素顯示模式
- 什么是元素顯示模式
- 作用：網頁的標簽非常多，在不同的地方會用到不同型別的標簽，了解他們的特點可以更好的布局我們的網頁
- 元素的顯示模式就是元素（標簽）以什么樣的方式進行顯示，比如<div> 自己獨占一行，比如一行可以放多個<span>
- HTML元素一般分為塊元素和行內元素兩種型別
- 塊元素
- 常見的塊元素有<h1>~<h6> <p> <div> <ul> <ol> <li> 等，其實<div> 標簽是最經典的快元素
- 塊元素的特點
- 獨占一行
- 高度、寬度、外邊距以及內邊距都可以控制
- 寬度默認是容器（父級寬度）的100%
- 是一個容器及盒子，里面可以放行內或者快級元素
- 【注意】
- 文字類的元素內不能使用快級元素
- <p> 標簽主要用于存放文字，因此<p> 里面不能放快級元素，特別是不能放<div>
- 同理，<h1> ~<h6> 等都是文字類快級標簽，里面不能放其他塊級元素
- 行內元素
- 常見的行內元素<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等，其中<span> 標簽 是最典型的行內元素，有的地方也將行內元素稱為行內元素，
- 行內元素特點
- 相鄰行內元素在一行上，一行可以顯示多個
- 高寬直接設定是無效的
- 默認寬度就是它本身內容的寬度
- 行內元素只能容納文本或其他行內元素
- 【注意】
- 鏈接里面不能在放鏈接
- 特殊情況鏈接<a> 里面可以放塊級元素，但是給<a> 轉換一下快級模式最安全
- 行內塊元素
- 在行內元素中有幾個特殊的標簽——<img /> <input /> <td /> ,他們同時具有塊元素和行內元素的特點
- 行內塊元素的特點
- 和相鄰行內塊元素在一行上，但是他們之間會有空白縫隙，一行可以顯示多個
- 默認寬度就是它本身內容的寬度
- 高度、寬度、外邊距以及內邊距都可以控制
| 元素模式 | 元素排列 | 設定樣式 | 默認高度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設定寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以設定寬度高度 | 它本身內容的寬度 | 容納文本或其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設定寬度和高度 | 它本身的寬度 |
- 元素顯示模式的轉換
- 特殊情況下，我們需要元素模式的轉化，簡單理解：一個模式的元素需要另一種模式的特性，比如想要增加鏈接<a> 的觸發范圍
- 轉化為塊元素：display：block
- 轉換為行內元素：display：inline
- 轉換為行內塊元素：display：inline-block
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/111849.html
標籤：Html/Css