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>