line-height和height的区别
来源:互联网 发布:没有网络又可以玩游戏 编辑:程序博客网 时间:2024/05/22 10:25
line-heigth是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度。
如:
<p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时,这个p标签的高度会为20px,如果为两行,则p标签的高度为40px;
行高20px;
行高变为40px;
但是,我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变,如果显示为2行,文字的总高度超出了,这个p标签的高也不会随着文本而改变。
height:20px;折行后文本超出了元素
技巧一
行高等于元素高,可将文本内容垂直居中
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 >中就可以了。
0 0
- line-height和height的区别
- height和line-height的区别
- line-height:150% 和 line-height:1.5的区别
- line-height:1.5和line-height:150%的区别
- CSS中line-height和height的区别
- (转载) CSS height 和 line-height 的区别
- CSS中line-height和height的区别
- height和line-height
- li的height 和 line-height 对比
- 关于height 和line-height的关系
- 全面理解解析line-height: 150%和line-height: 1.5em和line-height: 1.5rem和line-height: 1.5的区别
- line-height:150%, line-height:1.5的区别
- line-height:2;与line-height:2em的区别
- height:100%和height:auto的区别
- height:100%和height:auto的区别
- .css('height')和.height的区别
- height:100%和height:auto的区别
- height:auto和height:100%的区别
- Java IO流分析整理
- 常用链接
- MediBang Paint Pro超级精简版/超精简/懂你版
- 关于字符集和字符编码
- UITableViewController使用
- line-height和height的区别
- android 录音获取相关值
- 面向对象六大原则-里氏替换原则、依赖倒置原则、接口隔离原则
- React开发神器Webpack
- "Android-事件处理机制"之面试必问技能点汇总
- EasyUI基本配置,HelloWorld
- 推荐算法之 slope one 算法
- Android项目新手功能引导页面代码实现
- 基于Unity引擎的简单对象池