css要设置2倍行高

html-css014

css要设置2倍行高,第1张

其实,行高就是你所设置的字符大小的高度。

即,在段落中,你的字体是12PX,那么1倍行高就是12PX。2倍当然就是12*2=24PX了。

因为,所谓的行高,其实就是段落中字符的大小。如果你的行高小于你的字符大小,那么第二行的字就会挡住了第一行的字。

具体例子,你可以自己试试就明白了。

个人喜欢用jQuery

$("#hezi").height($("#hezi").width() * 2)  //高度为宽度的2倍

对于宽度变化的情况,可以使用一些事件,在盒子宽度改变时触发这个事件,然后把上面的代码根据你的情况改一下就行(主要还是对ID进行修改,也可以不是ID是CLASS,都可以)

当你使用绝对的值设置了一个框的大小(如,固定像素的宽/高),允许的大小可能不适合放置内容,这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。它有一些可能的值,但是最常用的是:

框模型的 width 和 height (不是content设置的width,height),框模型 content 不足以放下内部元素时可以延伸到框的外部,即使 content 设置的height为0,然而默认溢出是当内容过多时溢流的内容被显示在框外边。

示例1:先看溢出框的情况

结果1:

发现img溢出到父容器之外

示例2:溢出框被删减的情况

发现设置完overflow之后img超出父容器的部分被删减了。

为什么height设置为0?

因为容器如果去掉这一行的话,img下面会出现一个img大小的空白区域,这个区域是设置 padding-bottom 导致的,所以设置height=0是为了让父元素没有高度。