line-height

line-height最详解_常用词

注意点：

行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度

line-height最详解_html_02

怎么办？

第一步:先把行高设置成20px

第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。

line-height最详解_网络流_03

line-height最详解_网络流_04

还原字体与字号:

<!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;

效果：

line-height最详解_常用词_05

margin传递问题

1.在父子元素中， 如果给子元素设置了margin-top， 默认会传递到父元素？怎么办？

2.2给父元素添加两行代码

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>

注意点：是给父元素添加哦(这两句代码)

line-height最详解_常用词_06

效果：

line-height最详解_h5_07