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>