首页 > 代码库 > 李洪强和你一起学习前端之(7)复习
李洪强和你一起学习前端之(7)复习
复习:
1.1行高
行高可以继承
1.2行高单位
给单独的盒子设置:
Px 跟文字大小没有关系
em 行高和字体大小相乘
%
不带单位
给父盒子设置:
px 先计算再继承
2em 先计算再继承
%
影响盒子大小: Padding 边框
1.3.2 Padding
取值: 上右下左
1.3.3 Margin
塌陷
给父盒子设置border
给父盒子设置overflow
案例一:
实现效果: 
代码:
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px } p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px } p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 } span.s1 { color: #596972 } span.s2 { color: #2b9edb } span.s3 { color: #d76019 } span.s4 { color: #000000 } span.s5 { color: #929151 } span.s6 { color: #060606 } span.s7 { color: #ad5cff } span.s8 { color: #ff7900 } span.s9 { color: #3c7400 } span.s10 { color: #97a700 } span.s11 { color: #2eafa9 } span.Apple-tab-span { white-space: pre }</style><!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=http://www.mamicode.com/"">养猫比养狗健康</a>
</li>
<li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li><li>
<a href=http://www.mamicode.com/"">养猫比养狗健康</a>
</li>
</ul>
</div>
</body>
</html>
案例2:
实现效果: 
代码:
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px } p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px } span.s1 { color: #596972 } span.s2 { color: #2b9edb } span.s3 { color: #d76019 } span.s4 { color: #929151 } span.s5 { color: #060606 } span.s6 { color: #ad5cff } span.s7 { color: #3c7400 } span.s8 { color: #97a700 } span.s9 { color: #ff7900 } span.s10 { color: #000000 } span.s11 { color: #2eafa9 } span.Apple-tab-span { white-space: pre }</style>
<!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>
李洪强和你一起学习前端之(7)复习