line-height和height的区别
2016-07-15 12:02
344 查看
line-heigth是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度。
如:
假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时,这个p标签的高度会为20px,如果为两行,则p标签的高度为40px;
行高20px;
行高变为40px;
但是,我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变,如果显示为2行,文字的总高度超出了,这个p标签的高也不会随着文本而改变。
height:20px;折行后文本超出了元素
技巧一
行高等于元素高,可将文本内容垂直居中
行高尽量不要大于元素高。如果行高大于元素高,多个相同的结构下很容易出现错位
技巧二
设置高度和浏览器一样高
效果:
你设置高为100%,再设置边是不起作用的。需要把html和body一起设置为100%,完整代码如下
写在< style >中就可以了。
如:
<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 >中就可以了。
相关文章推荐
- 浅谈jQuery中height与width
- 使用jquery中height()方法获取各种高度大全
- jQuery height()、innerHeight()、outerHeight()函数的区别详解
- jquery获取文档高度和窗口高度汇总
- jQuery中的height innerHeight outerHeight区别示例介绍
- jQuery中height()方法用法实例
- js中不同的height, top的区别对比
- 深入理解CSS height属性设置元素的高度
- Web前端新人笔记之height、min-height的区别详解
- height、clientHeight、scrollHeight、offsetHeight
- jQuery,javascript获得网页的高度和宽度
- img的width和height属性
- 创建UILable的时候,可以根据文字算出文字所占区域大小的方法
- document.documentElement和document.body
- [转]js获取各种宽高
- input元素的盒子模型和W3C盒子模型标准不一致的问题
- css 中 height:100% 和 height:inherit 异同
- js获取图片原始大小
- iOS:UITextView自适应高度
- 当键盘弹出时,获取键盘高度