复习:
1.1行高
行高可以继承
1.2行高单位
给单独的盒子设置: Px 跟文字大小没有关系 em 行高和字体大小相乘 % 不带单位
给父盒子设置:
px 先计算再继承
2em 先计算再继承
%
影响盒子大小: Padding 边框
1.3.2 Padding
取值: 上右下左
1.3.3 Margin
塌陷
给父盒子设置border
给父盒子设置overflow
案例一:
实现效果: 
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*css初始化*/ *{ margin: 0; padding: 0; } ul{ list-style: none; } .box{ 260px; height: 327px; border: 1px solid #009900; margin: 20px auto; background:url(img/bg.gif); } .title{ height: 23px; border-left: 4px solid #c9E143; margin: 10px 0 0 10px; /*没有设置宽度可以用padding*/ padding-left: 11px; /*让文字垂直居中显示*/ line-height: 23px; color: white; /*设置不是粗体显示*/ } h4{ /*设置不是粗体显示*/ font-weight: normal; } .list{ 222px; height: 279px; background: white; margin-left: 10px; margin-top: 5px; padding-left: 9px; padding-right: 9px; } .list li{ height: 30px; border-bottom: 1px dashed #666666; line-height: 30px; background: url(img/tb.gif) no-repeat left 8px; padding-left: 16px; } </style> </head> <body> <div class="box"> <div class="title"> <h4>爱宠知识</h4> </div> <ul class="list"> <li> <a href="">养猫比养狗健康</a> </li> <li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li><li> <a href="">养猫比养狗健康</a> </li> </ul> </div> </body> </html>
案例2:
实现效果: 
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ 208px; height: 383px; border: 1px solid #CECECE; /*居中显示*/ margin: 20px auto; } .title{ height: 25px; background-color: #ECEDEE; /*设置居中*/ line-height: 25px; } h4{ padding-left: 9px; } .photo{ 180px; height: 180px; border: 1px solid #ECEDEE; margin: 5px auto; } .weibo{ /*//让内容居中 margin: 0 auto 是让盒子居中*/ text-align: center; border-bottom: 1px dashed #D1D1D1; padding-bottom: 10px; } .weibo input{ height: 24px; 70px; background: url(img/vb.jpg) no-repeat; margin-bottom: 5px; } .friend input{ 69px; height: 23px; } .friend{ text-align: center; } </style> </head> <body> <div class="box"> <div class="title"> <h4>个人资料</h4> </div> <div class="photo"> <img src="img/1.jpg"/> </div> <div class="weibo"> <span id=""> V闪闪 </span> <img src="img/v.jpg"/> <br /> <input type="button" name="" id="" value="微博" /> </div> <div class="friend"> <input type="button" name="" id="" value="加好友" /> <input type="button" name="" id="" value="发纸条" /> <input type="button" name="" id="" value="写留言" /> <input type="button" name="" id="" value="加关注" /> </div> </div> </body> </html>