06-CSS行高相关知识

最新推荐文章于 2022-08-10 17:25:56 发布

Sarrykiss

最新推荐文章于 2022-08-10 17:25:56 发布

阅读量203

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_38178755/article/details/78712503

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

行高

定义：
应用：将行高设置等于容器的高度可以让文字垂直居中
原理：为什么行高等于容器的高度可以让文本垂直居中
文本中的各线条
补充：
行高的继承：行高是可以继承的。
行高的单位：取值是具体的数值就是像素值
也可以使用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{
        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>

“`

Sarrykiss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-CSS行高相关知识

行高定义：应用：将行高设置等于容器的高度可以让文字垂直居中原理：为什么行高等于容器的高度可以让文本垂直居中文本中的各线条补充：行高的继承：行高是可以继承的。行高的单位：取值是具体的数值就是像素值也可以使用em. *1 em=16px; em指的是当前标签设定字体的大小，比如当前字体
复制链接

扫一扫