标签：ext lis pad png orm 资料 ges 3.2 ack
复习:
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{
width: 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{
width: 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{
width: 208px;
height: 383px;
border: 1px solid #CECECE;
/*居中显示*/
margin: 20px auto;
}
.title{
height: 25px;
background-color: #ECEDEE;
/*设置居中*/
line-height: 25px;
}
h4{
padding-left: 9px;
}
.photo{
width: 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;
width: 70px;
background: url(img/vb.jpg) no-repeat;
margin-bottom: 5px;
}
.friend input{
width: 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>
标签：ext lis pad png orm 资料 ges 3.2 ack
原文地址：http://www.cnblogs.com/LiLihongqiang/p/7191662.html
