CSS學習筆記(一)-6.元素顯示模式
阿新 • • 發佈：2021-07-12
元素顯示模式有3種，塊元素，行內元素，行內塊元素，他們分別有自己的特點。
一、塊元素
常見塊級元素：h1-h6,p,div,ul,ol,li.典型的是div
特點：
1.獨佔一行。
2.高度，寬度，內外邊距,自己設定。
3.預設寬度是父級容器寬度的100%
4.塊級元素為文字標籤時(p,h1)，內部放置塊元素無效。
5.塊級元素為文字標籤時(p,h1)，內部放置行內元素有效
以上特點代入如下：
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-10 21:34:15View Code5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 16:45:55 7 * @Description: 8 * @FilePath: \css\塊級元素.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge">16 <meta name="viewport" content="width='device-width', initial-scale=1.0"> 17 <title>塊級元素</title> 18 <style> 19 .block1 { 20 height: 300px; 21 background-color: pink; 22 } 23 24 .block2 { 25 height:200px; 26 background-color: green; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div>case1</div> 33 <div class='block1'>我是塊元素。1.獨佔一行2.設定寬度高度3.預設寬度是其容器(父級元素)的100%(我的父級元素是Body)</div>瑟瑟發抖 34 <div class='block2'>4.當塊元素是容器及盒子時，內部可以放置行內元素或則塊元素 35 <ul> 36 <li>li1</li> 37 <li>li2</li> 38 </ul> 39 <span>span1</span> 40 <span>span2</span> 41 </div> 42 <p class='block2'> 43 <div>5.當我不是容器及盒子而是文字標籤時，我內部放置塊元素無效</div> 44 </p> 45 <p class='block1'> 46 <span>6.當我不是容器及盒子而是文字標籤時，我內部放置行內元素有效</span> 47 </p> 48 </body> 49 50 </html>
頁面如下；
二、行內元素
常見行內元素:<a>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>,典型的是<span>
特點：
1.一行上可以有多個行內元素，元素之間有空隙。
2.高，寬設定是沒有效果的。
3.預設寬度就是它本身內容的寬度。
4.行內元素內部職能放置文字或則其他行內元素
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 16:52:30 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 16:58:22 7 * @Description: 8 * @FilePath: \css\行內元素.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>行內元素</title> 18 <style> 19 .span1 { 20 height: 100px; 21 width: 100px; 22 background-color: pink; 23 } 24 25 .div1 { 26 background-color: green; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div>case1,一行內可以有多個行內元素</div> 33 <div class='div1'> 34 <span>行內元素1</span> 35 <span>行內元素1</span> 36 <span>行內元素1</span> 37 </div> 38 <div>case2,行內元素設定高寬無效,預設寬度是其內部文字的寬度</div> 39 <div> 40 <span class='span1'>行內元素1</span> 41 <span class='span1'>行內元素1</span> 42 <span>行內元素1</span> 43 </div> 44 <div>case3,行內元素內部只能放置文字和其他行內元素</div> 45 <div> 46 <span class='span1'>行內元素父 47 <span>行內元素的行內元素子</span> 48 </span> 49 </div> 50 </body> 51 52 </html>View Code
例外：
1.<a>內部不允許在放置<a>，因為不知道跳轉到哪個a。
2.<a>內部可以放置塊級元素
三、行內塊元素
常見元素：<img/><input/><td>
描述：他們同時具備行內元素和塊元素的特點。
特點：
1.一行上可以有多個行內塊元素,元素之間有空隙。（行內元素特點）
2.預設寬度是本身文字內容的寬度（行內元素特點）
3.高度，寬度，內外邊距可以設定(塊級元素特點）
程式碼如下：
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:07:18 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 17:08:07 7 * @Description: 8 9 * @FilePath: \css\行內塊元素.html 10 --> 11 12 <!DOCTYPE html> 13 <html lang="en"> 14 15 <head> 16 <meta charset="UTF-8"> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 18 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 19 <title>行內塊元素</title> 20 <style> 21 .input1 { 22 width: 200px; 23 height: 200px; 24 } 25 </style> 26 </head> 27 28 <body> 29 <input class='input1' type="text"> 30 <input class='input1' type="text"> 31 32 </body> 33 34 </html>View Code
四、元素顯示模式轉換
1.將行內元素轉換成塊級元素，則行內元素具有塊級元素的特性。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:12:45 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 17:14:37 7 * @Description: 8 * @FilePath: \css\元素顯示模式轉換.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>元素顯示模式轉換</title> 18 <style> 19 .isTrans { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 display: block; 24 } 25 </style> 26 27 </head> 28 29 <body> 30 <a href="www.baidu.com">百度(未轉換)</a> 31 <a href="www.google.com" class='isTrans'>google(a轉換為塊元素)</a> 32 </body> 33 34 </html>View Code
2.將塊元素轉換成行內元素，則塊元素具有行內元素的特性。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:12:45 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 17:18:58 7 * @Description: 8 * @FilePath: \css\元素顯示模式轉換.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>元素顯示模式轉換</title> 18 <style> 19 .isTransBlock { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 display: block; 24 } 25 26 .isTransInLine { 27 height: 200px; 28 width: 200px; 29 background-color: green; 30 display: inline; 31 } 32 </style> 33 34 </head> 35 36 <body> 37 <!-- <a href="www.baidu.com">百度(未轉換)</a> 38 <a href="www.google.com" class='isTransBlock'>google(a轉換為塊元素)</a> --> 39 <div>我是塊元素（未轉換)</div> 40 <div class='isTransInLine'>我是塊元素（已轉換為行內元素)</div> 41 42 </body> 43 44 </html>View Code
3. 將行內元素轉化成行內塊元素
3.1 行內元素轉換為行內塊元素
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:12:45 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 17:26:29 7 * @Description: 8 * @FilePath: \css\元素顯示模式轉換.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>元素顯示模式轉換</title> 18 <style> 19 .isTransBlock { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 display: block; 24 } 25 26 .isTransInLine { 27 height: 200px; 28 width: 200px; 29 background-color: green; 30 display: inline; 31 } 32 33 .transInLineBlock { 34 height: 200px; 35 width: 200px; 36 background-color: royalblue; 37 display: inline-block; 38 } 39 </style> 40 41 </head> 42 43 <body> 44 <!-- <a href="www.baidu.com">百度(未轉換)</a> 45 <a href="www.google.com" class='isTransBlock'>google(a轉換為塊元素)</a> --> 46 <!-- <div>我是塊元素（未轉換)</div> 47 <div class='isTransInLine'>我是塊元素（已轉換為行內元素)</div> --> 48 <span>我是行內元素(未轉換)</span> 49 <span class='transInLineBlock'>我是行內元素(轉換成行內塊)</span> 50 <!-- <div>我是塊元素(未轉換)</div> 51 <div class='transInLineBlock'>我是塊元素(轉換成行內塊元素)</div> 52 <div class='transInLineBlock'>我是塊元素(轉換成行內塊元素)</div> --> 53 54 </body> 55 56 </html>View Code
3.2 塊元素轉換為行內塊元素
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:12:45 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 17:27:52 7 * @Description: 8 * @FilePath: \css\元素顯示模式轉換.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>元素顯示模式轉換</title> 18 <style> 19 .isTransBlock { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 display: block; 24 } 25 26 .isTransInLine { 27 height: 200px; 28 width: 200px; 29 background-color: green; 30 display: inline; 31 } 32 33 .transInLineBlock { 34 height: 200px; 35 width: 200px; 36 background-color: royalblue; 37 display: inline-block; 38 } 39 </style> 40 41 </head> 42 43 <body> 44 <!-- <a href="www.baidu.com">百度(未轉換)</a> 45 <a href="www.google.com" class='isTransBlock'>google(a轉換為塊元素)</a> --> 46 <!-- <div>我是塊元素（未轉換)</div> 47 <div class='isTransInLine'>我是塊元素（已轉換為行內元素)</div> --> 48 <!-- <span>我是行內元素(未轉換)</span> 49 <span class='transInLineBlock'>我是行內元素(轉換成行內塊)</span> --> 50 <div>我是塊元素(未轉換)</div> 51 <div class='transInLineBlock'>我是塊元素(轉換成行內塊元素)</div> 52 <div class='transInLineBlock'>我是塊元素(轉換成行內塊元素)</div> 53 54 </body> 55 56 </html>View Code
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/15002959.html