line-height和height的区别

line-height 是指每行的高度, 假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时，这个p标签的高度会为20px，如果为两行，则p标签的高度为40px; line-height是20px不变, 只是height变了

但是，我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变，如果显示为2行，文字的总高度超出了，这个p标签的高也不会随着文本而改变。

技巧一
行高等于元素高，可将文本内容垂直居中

p{ height: 50px; line-height: 50px; background: yellowgreen; width:100px; }
<p>测试文本</p>

行高尽量不要大于元素高。如果行高大于元素高，多个相同的结构下很容易出现错位

技巧二
设置高度和浏览器一样高
效果：

你设置高为100%，再设置边是不起作用的。需要把html和body一起设置为100%，完整代码如下

html,body{ height: 100%; overflow: hidden; } body{ border:10px solid red;}

写在< style >中就可以了。

转载于:https://www.cnblogs.com/bigshow1949/p/7068367.html

line-height和height的区别相关推荐

[css] body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
关于height和min-height的区别
height:给元素指定高度,当元素较少的时候保持设置的高度,当元素较多时元素溢出. min-height:给元素设置最小高度,当元素较少时保持设置高度,元素较多时自适应. 父元素设置min-heig ...
[shell] while read line 与for循环的区别
while read line 与for循环的区别 ---转载整理 while read line 是一次性将文件信息读入并赋值给变量line ,while中使用重定向机制,文件中的所有信息都被读入并 ...
height和line-height的区别（简单易懂）
height:指定区域的高度 line-height:一行的高度,简称行高. 行高:两行文字之间基线的距离 1.height和line-height值相同的情况实例解释: height定义了一个盒子 ...
height和line-height的区别
height:表示行高 line-height:表示每行文字所占的高度下面举例子你就会明白: 第一种情况:使用height 运行结果: 第二种情况:行高为50px和文字高度为20px情况:这时候文字 ...
css height 100% 和 100vh 区别
1. height 100% 意思就是,想在这container设置高度! [有约束] 高度设置成 100% 但是呢这得看 container的父级 body的height是否为100% 还往上看bo ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
height:100%和height:100vh的区别
(1)vh (视口高度)和 vw(视口宽度)介绍 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 效果: 当元素没有内容时候,设置height:10 ...

line-height和height的区别

line-height和height的区别相关推荐

最新文章

热门文章