CSS学习笔记(一)-6.元素显示模式

元素显示模式有3种，块元素，行内元素，行内块元素，他们分别有自己的特点。

一、块元素

常见块级元素：h1-h6,p,div,ul,ol,li.典型的是div

特点：

1.独占一行。

2.高度，宽度，内外边距,自己设置。

3.默认宽度是父级容器宽度的100%，默认高度是盒子内部内容的高度。如果没有内容则高度为0.

4.块级元素为文本标签时(p,h1)，内部放置块元素无效。

5.块级元素为文本标签时(p,h1)，内部放置行内元素有效

以上特点代入如下：

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-10 21:34:15
 5  * @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>
View Code

页面如下；

 二、行内元素

常见行内元素:<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.将行内元素转换成块级元素，则行内元素具有块级元素的特性。

选择器 { display: block;}

 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.将块元素转换成行内元素，则块元素具有行内元素的特性。

选择器 { display: inline;}

 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 行内元素转换为行内块元素

选择器 { display:inline-block;}

 

 

 

 

 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

 

 

 

 

总结：

 

 

 

 

posted @ 2021-07-12 17:29  kaer_invoker  阅读(69)  评论(0)  编辑  收藏  举报