CSS中line-height与height的区别
2015-11-12 17:12
591 查看
简单来说,line-height是行高的意思,height则是定义元素自身的高度。
例如下面这段代码
<div class="test">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
如果我们定义.test {line-height:20px;},那么这个元素的实际高度将取决于其中内容的多少,假如文字部分在浏览器里面显示为一行,那么这个div的实际高度就是20px,如果文字显示为两行,那么div的实际高度就是40px,而且文字的行高是20px的;
如果我们定义.test{height:40px},那么这个元素的实际高度一般并不会因为内容的多少而发生改变,如果文字显示为一行,那么这个div的高度仍然是40px,如果显示为2行,但是文字的行高不够20px,这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了,一般来说这个div的高度还是会相应增加的。
例如下面这段代码
<div class="test">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
如果我们定义.test {line-height:20px;},那么这个元素的实际高度将取决于其中内容的多少,假如文字部分在浏览器里面显示为一行,那么这个div的实际高度就是20px,如果文字显示为两行,那么div的实际高度就是40px,而且文字的行高是20px的;
如果我们定义.test{height:40px},那么这个元素的实际高度一般并不会因为内容的多少而发生改变,如果文字显示为一行,那么这个div的高度仍然是40px,如果显示为2行,但是文字的行高不够20px,这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了,一般来说这个div的高度还是会相应增加的。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签