line-height
注意点： 行高和盒子高不是同一个概念 行高指的是每行内容的高度 盒子高指的是元素的高度
怎么办？ 第一步:先把行高设置成20px 第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。
还原字体与字号:
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>54-清空默认边距</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
p{
box-sizing: border-box;
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
font-family:"黑体";
font-size: 20px;
line-height: 40px;
color: #67676d;
padding-top: 10px;
}
</style>
</head>
<body>
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>
</body>
</html>注意点;
这两行文字要达到垂直居中的话,应该行高*2 font-size padding-top就等于line-height了.110;
效果：
margin传递问题
1.在父子元素中， 如果给子元素设置了margin-top， 默认会传递到父元素？怎么办？ 2.2给父元素添加两行代码
代码语言：javascript复制overflow: hidden;
*zoom: 1;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>57-margin传递问题</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
overflow: hidden;
*zoom: 1;
}
.son{
width: 200px;
height: 100px;
background: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>注意点：是给父元素添加哦(这两句代码)
效果：
