第二十六节 display属性：块元素和内联元素 

 1 <!-- 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟悉的进行页面布局
 2     1、块元素：也称为行元素，布局中常用的标签如：div、p、li、h1~h6、dl、dt、dd等都是块元素。它在布局中的行为：
 3         a、支持全部样式
 4         b、如果没有设置宽度，默认宽度为父级的100%
 5         c、盒子占据一行，即使设置了宽度 
 6     2、内联元素：也称为行内元素，布局中常用标签如：a、span、em、b、strong、i等都是内联元素，他们在布局中的行为：
 7         a、支持部分样式（不支持宽，高，margin上下，padding上下）
 8         b、盒子的宽由内容决定
 9         c、盒子并在一行 
10         d、代码切换，盒子之间会产生间距
11         e、子元素是内联元素，父元素可以用text-align属性设置子元素的水平对其方式
12         解决内联元素间隙的方法：
13             a、去掉内联元素之间的换行
14             b、将内联元素的父级设置font-size为0，将内联元素自身再设置font-size
15     3、内联块：也叫行内块，是新增的元素类型，现有的元素类型没有归于此类，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。他们在布局中表现的行为：
16         a、支持全部样式
17         b、如果没有设置宽高，宽高由内容决定
18         c、盒子并行在一行
19         d、代码换行，盒子产生间距
20         e、子元素是内联块元素，父元素可以用text-align属性设置子元素的水平对其方式
21     display属性：
22         a、none元素隐藏，且不占位置
23         b、block 元素以块元素显示
24         c、inline 元素以内联元素显示
25         d、inline-block 元素以内联块元素显示
26         -->
27 <!DOCTYPE html>
28 <html lang="en">
29 <head>
30     <meta charset="UTF-8">
31     <title>Document</title>
32     <style type="text/css">
33 
34         /* 块元素格式设置 */
35         .box1{
36             width:600px;
37             height:600px;
38             background-color: gold;  /* 不给宽度，默认占整行 */
39             text-align: center;        
40             /* 子元素是内联元素，父元素可以用text-align属性设置子元素的水平对其方式 */
41             font-size: 0;
42             /*将内联元素的父级设置font-size为0，将内联元素自身再设置font-size*/
43         }
44         
45         /* 内联元素格式设置 */
46         .box1 a{
47             background-color: green;
48             margin:20px 20px;  /* 左右会起作用，上下不会 */
49             padding:20px 20px;  /* 左右会起作用，上下不会 */
50             font-size: 16px;
51         }
52     </style>
53 </head>
54 <body>
55     <div class="box1">
56         <a href="#">链接一</a>  
57         <a href="#">链接二</a><a href="#">链接三</a>
58         <!-- 三个并排，两两因为代码换行会有一个小间距，取消换行可以解决 -->
59     </div>
60 </body>
61 </html>

 

posted @ 2020-03-05 15:49  kog_maw  阅读(224)  评论(0)    收藏  举报