【温故知新】CSS学习笔记（显示模式简介）
生活随笔
收集整理的這篇文章主要介紹了
【温故知新】CSS学习笔记（显示模式简介）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
顯示模式Display
?
我們的網頁標簽有很多，在不同的地方會用到不同類型的標簽，以便于更好的展示我們的網頁。標簽的類型即顯示模式，一般可以分為塊標簽和行內標簽兩種類型，也可以稱之為塊元素和行內元素。
一、塊級元素（Block-Level）
每個塊元素通常會獨自占據一整行或者多個整行，可以對其設置其寬度、高度、對其等屬性，常用于網頁布局和網頁結構的搭建，用一個詞形容它，就是“霸道”。
常見的塊元素有<h1>~<h6>、<div>、<P>、<ul>、<ol>、<li>等，其中<div>標簽是最最典型的塊元素。因為Div天生麗質，特別適合布局，所以我們常稱之為“CSS+DIV”布局。
?
總結一下塊級元素的特點：
- 總是從新的一行開始；
- 高度、行高、外邊距以及內邊距都可以控制；
- 寬度默認是容器的100%（和屏幕一樣寬）；
- 可以容納內聯元素和其他塊元素；
?
二、行內元素（Inline-Level）
行內元素（內聯元素）不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
常見的行內元素有<a>、<strong>、<br>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽是最最典型的應用。
?
總結一下行內元素的特點：
- 和相鄰行業元素可以在一行上面；
- 高度和寬度無效，但水平方向的padding和margin可以設置，垂直方向的無效；
- 默認寬度就是它本身內容的寬度；
- 行內元素只能容納文本或者其他行內元素（其中<a>比較特殊）；
?
【注意點】
- 只有文字才能組成段落，因此P標簽里面不能放塊級元素，同理的還有這些標簽H1~H6和DT等，它們都是文字類型的塊級元素，里面不能容納其他塊級元素；
- 鏈接里面不能再放鏈接；
?
三、行內塊元素（Inline-Block）
在行內元素中有幾個特殊的標簽（<img />、<input />、<td>），可以對他們設置寬高和對齊屬性，我們就可以稱之為行內塊元素。
?
行內塊元素有如下特點：
- 和相鄰行內元素（行內塊元素）在一行上，但是之間會有一點空白的縫隙；
- 默認寬度就是它本身的內容寬度；
- 高度、行高、外邊距以及內邊距都可以控制；
【綜合樣例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>顯示模式</title><style>div{width: 100px;height: 100px;background-color: yellow;}span{width: 100px;height: 100px;background-color: pink;}input{width: 200px;height: 50px; }</style> </head> <body><div>Div</div><div>DivDiv</div><div>DivDivDiv</div><span>Span</span><span>SpanSpan</span><span>SpanSpanSpan</span> <input type="text"><input type="text"><input type="text"> </body> </html>【顯示效果】
?
四、標簽顯示模式的相互轉換
【綜合樣例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模式轉換</title><style>div{width: 100px;height: 100px;background-color: yellow;display: inline; /*塊級元素轉行內元素*/}span{width: 100px;height: 100px;background-color: pink;display: block; /*行內元素轉塊級元素*/}a{width: 100px;height: 100px;background-color: skyblue;display: inline-block; /*塊級、行內元素轉行內塊元素*/}</style> </head> <body><div>Div</div><div>DivDiv</div><div>DivDivDiv</div><span>Span</span><span>SpanSpan</span><span>SpanSpanSpan</span> <a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a> </body> </html>【顯示效果】
?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（显示模式简介）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（链接伪类选择
- 下一篇： 【温故知新】CSS学习笔记（行高简介）