CSS基础(part5)--display
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part5)--display
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
文章目錄
- CSS
- 標簽的類型(顯示模式)
- 塊元素
- 行元素
- 行內塊元素
- 三種模式的區別和聯系
- display改變標簽顯示模式
CSS
標簽的類型(顯示模式)
HTML標記一般分為塊標記和行內標記2種類型，它們也稱塊元素和行內元素。
塊元素
- 每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。
- 塊級元素容器可以容納多個嵌套的塊級標簽或行內標簽。
- 常見的塊元素有 <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>等，其中 <div>標記是最典型的塊元素。
- 塊元素的寬度默認是容器（父級寬度）的100%
- p標簽內不能放div標簽，段落里面不能放塊級元素，同理，文字類塊級標簽(h1,h2,h3,h4,h5,h6,dt)內，不能放其他塊級元素。
行元素
- 行內元素不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，默認寬度就是它本身內容的寬度，常用于控制頁面中文本的樣式。
- 行內元素不能嵌套塊級標簽，只能嵌套其他的行內標簽。
- 常見的行內標簽有 <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <span>等，其中 <span>標記是最典型的行內元素。
- 舉個例子
頁面：
行內塊元素
- 行內塊元素和相鄰行內元素（行內塊）在一行上，但是之間會有空白縫隙，一行可以顯示多個。
- 其默認寬度就是它本身內容的寬度。
- 行內塊高度，行高、外邊距以及內邊距都可以控制。
- 常見的行內塊標簽有<img />, <input />, <td>
三種模式的區別和聯系
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
display改變標簽顯示模式
- display為inline或block
display可以控制標簽的顯示模式，比如，將塊級元素(例如<div>)按照行級標簽的形式顯示，再比如，將行級標簽(例如<strong>)按照塊級標簽的形式顯示，例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; /* 可以讓塊元素變成行內顯示模式*/}strong {display: block; /* 可以讓行內元素變成塊顯示模式*/background-color: yellow;}</style></head> <body><!-- 行內元素 --><span>我是span</span><strong>我是strong標簽</strong><s>我是一個s標簽</s><!-- 塊級標簽 --><div>我是一個div</div></body> </html>頁面：
- display為none
若我們把display設置為none，那么這個標簽就會被從頁面中移除，不進行顯示，也不影響頁面布局：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; /* 可以讓元素編成行內模式的標簽*/}strong {/* display: block; */display: none;background-color: yellow;}</style></head> <body><!-- 行內元素 --><span>我是span</span><strong>我是strong標簽</strong><s>我是一個s標簽</s><!-- 塊級標簽 --><div>我是一個div</div></body> </html>頁面：
- visibility為hidden
我們也可以設置visibility為hidden，將標簽隱藏起來，但是它和display: none有點不同，它僅僅是不顯示標簽，但是依然占用我們的頁面空間：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; }strong {visibility: hidden;background-color: yellow;}</style></head> <body><!-- 行內元素 --><span>我是span</span><strong>我是strong標簽</strong><s>我是一個s標簽</s><!-- 塊級標簽 --><div>我是一個div</div></body> </html>頁面：
- display為inline-block
我們先來看下面一段代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline-block;height: 100px;}span {background-color: blue;height: 200px;}</style></head> <body><!-- 行內元素 --><span>我是span</span><strong>我是strong標簽</strong><s>我是一個s標簽</s><!-- 塊級標簽 --><div>我是一個行內塊div</div></body> </html>頁面：
可以看到，行內塊元素可以設置寬高，但是行內元素卻不能。
- 行內元素,塊級元素,行內塊元素之間的對比
| 行內元素 | × | 左右 | × |
| 塊級元素 | √ | 上下左右 | √ |
| 行內塊元素 | √ | 左右 | × |
總結
以上是生活随笔為你收集整理的CSS基础(part5)--display的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 土耳其电动汽车产业取得历史性突破，首款车
- 下一篇： DRX战队成员2021 S11阵容