您的位置：首页 > Web前端 > CSS

06-CSS行高相关知识

2017-12-04 20:04 471 查看

行高

定义：

应用：将行高设置等于容器的高度可以让文字垂直居中

原理：为什么行高等于容器的高度可以让文本垂直居中

文本中的各线条

补充：

行高的继承：行高是可以继承的。

行高的单位：取值是具体的数值就是像素值

也可以使用em.

*1 em=16px; em指的是当前标签设定字体的大小，比如当前字体大小是16像素，那么2em是32px，如果当前字体大小是20px那么3em是60px。*em找的都是当前字体的大小。

也可以使用%。和em一样都是以当前字体大小为基数，如果大小事18px，那么line-height：200%就是36px。

也可以什么单位都不带。也是和em一样以当前的字体大小为基数。

**浏览器的补充：

浏览器的默认字体大小是什么？

谷歌默认大小16px。**

<style>
.father{
/*行高都是40px*/
font-size: 20px;
line-height: 200%；
line-height:2em;
line-height: 1.5;
line-height:40px;
}
</style>

行高的单位和继承

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size:20px;
}
.father
4000
{
font-size: 25px;
}
.son{
font-size: 30px;
line-height:2em;
}
</style>
</head>
<body>
<div class="father">
<div class="son">行高和继承</div>
</div>
</body>
</html>

这个时候行高是60px。

<style>
body{
font-size:20px;
}
.father{
font-size: 25px;
line-height:2em;
}
.son{
font-size: 30px;

}
</style>

行高是30px。因为em是以当前的字体大小为基数，后来继承了行高50px。

<style>
body{
font-size:20px;
}
.father{
font-size: 25px;
line-height:2;
}
.son{
font-size: 30px;
}
</style>

不带单位行高是60px

注意：

在设置行高的时候如果单位是em和%，那么将来行高会计算出来结果然后子元素在继承。

在设置行高的时候如果没有单位那么行高会继承给子元素再计算出行高。

行高与font的关系

font：font-style font-weight font-size line-height font-family

<style>
div{
width: 500px;
height: 30px;
background: red;
font: italic  900 20px/50px "黑体"；
font: italic 900 20px "黑体";
line-height: 50px;
}
</style>

注意要先设置font大小才能设置行高！

**

补充：margin相关

**

margin的特殊现象：

1 margin外边距的合并现象

如果两个外边距排列，给上面一个div设计margin-botton给下面一个div设置margin-top，那么这两个外边距会合并取两个较大的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.one{
height: 100px;
background: red;
margin-bottom: 50px;
}
.two{
height: 200px;
background: blue;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>

上面的两个外边距就是50px，因为合并了。

2.margin的塌陷现象

如果一个大盒子包括一个小盒子，给小盒子设置一个margin-top那么大盒子和小盒子一起移动。

<style>
*{
margin: 0px;
padding: 0px;
}
.father{
width: 400px;
height: 300px;
background: red;

}
.son{
width: 200px;
height: 150px;
background: blue;
margin-top: 50px;/*这个时候大盒子和小盒子一起移动了就是margin-top现象*/
}
</style>

***解决方法***
1.给大和值设置一个边框border。
2.给大盒子设置一个overflo属性。

<style>
*{
margin: 0px;
padding: 0px;
}
.father{
width: 400px;
height: 300px;
background: red;
border: 1px solid black;
overflow: hidden;

}
.son{
width: 200px;
height: 150px;
background: blue;
margin-top: 50px;/*这个时候大盒子和小盒子一起移动了就是margin-top现象*/
}
</style>

“`

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航