1. span元素在默认情况下忽略 width 和 height，除非设置其 display 属性为 block 或 inline-block。这是因为只有块级元素和行内块级元素才能够有自己的宽高。
<body> <span id="haha">这是一个行内元素</span> </body> #haha{ 200px; height:80px; background-color:pink; display:inline-block; }
2. 在将 span 元素设置成块级元素后如何居中显示文本？ 设置 line-height 属性为 height 的值，并设置 text-align 为 center。
<body> <span id="haha">这是一个行内元素</span> </body> #haha{ 200px; height:80px; background-color:pink; display:inline-block; line-height:80px; text-align:center; }
3. 不要在 p 元素中嵌套 div。 这会导致外层的 p 元素会被拆分成两个同级的 p 元素，并且原先内嵌的 div 会被提升到拆分后的两个 p 元素中间。
<div> <p> 这是p标签的文本 <div>这里是div的文本</div> </p> </div>
如上的源码会导致生成如下图所示的结果：
p 标签应该用来存放文本而不是用于布局。
4. 浮动布局。
假设有如下的代码：
<div> <div class="box">第一个盒子</div> <div class="box">第二个盒子</div> <div class="box">第三个盒子</div> </div> .box{ 90px; height:80px; background-color:purple; color:#fff; text-align:center; line-height:80px; margin:2px; }
这三个带 box 类属性的 div 会从上到下依次排开，因为 div 是块级元素会独占一行：
为了让这三个 div 横向上依次排开，需要对它们进行浮动布局，即让它们“飘起来”。注意，飘起来后只有两个方向，向左浮动和向右浮动。使用“float：left|right”可以达到漂浮的目的。
.box{
90px;
height:80px;
background-color:purple;
color:#fff;
text-align:center;
line-height:80px;
margin:2px;
float:left;
}
5. 行内元素的浮动布局。
对行内元素使用浮动布局，会使得其转变为行内块级元素。
<div> <span class="box">第一个盒子</span> <span class="box">第二个盒子</span> <span class="box">第三个盒子</span> </div> .box{ 90px; height:80px; background-color:purple; color:#fff; text-align:center; line-height:80px; margin:2px; float:left; }
6. 清除浮动：清除浮动就是给飞出去的元素填坑，好让后面的元素不顶过来。
<div> <div class="box fl">第一个盒子</div> <div class="box fl">第二个盒子</div> <div class="box fl">第三个盒子</div> <div class="box">第四个盒子</div> </div> .box{ 90px; height:80px; background-color:purple; color:#fff; text-align:center; line-height:80px; margin:2px; } .fl{float:left;} .fr{float:right;}
如上所示的代码，如果不清除浮动的话，第四个盒子是看不见的。清除浮动的方法有两种。
（1）在浮动定位的最后一个元素后面添加一个空元素（如 div ），并对其应用样式“clear:both”即可。
<div> <div class="box fl">第一个盒子</div> <div class="box fl">第二个盒子</div> <div class="box fl">第三个盒子</div> <div style="clear:both"></div> <div class="box">第四个盒子</div> </div>
（2）【推荐】使用伪类。
/* 清除浮动 */ .clearfix:before, .clearfix:after{content:" "; display:table;} .clearfix:after{clear:both;}
给需要清除浮动的那个元素添加上 clearfix 的 class 即可，例如在本例中，需要给三个盒子外面套一层 div，加上 clearfix 的class，就可以了。
<div class="clearfix"> <div class="box fl">第一个盒子</div> <div class="box fl">第二个盒子</div> <div class="box fl">第三个盒子</div> </div> <div class="box">第四个盒子</div>
