当前位置:Gxlcms > html代码 > HTMLtextareacols,rows属性和宽度高度关系研究_html/css_WEB-ITnose

HTMLtextareacols,rows属性和宽度高度关系研究_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:29人阅读

一、关于textarea元素的cols和rows属性

会发现,下面的尺寸明显比没有 cols 和 rows 属性值的要大。

下面问题来了,我想很多小伙伴知道 cols 和 rows 可以影响文本域的尺寸,那 cols 和 rows 不同的数值和最终展示的像素尺寸之间有没有什么关系呢?可不可以通过公式计算呢?最终表现是否还受到其他CSS属性的影响呢?

我想,以上的问题就很少有人知道了,包括我在内,在写此文之前,也是模模糊糊的了解。

下面要扯点废话了,写这篇文章的时候,我其实内心是孤独的。这种感觉和自己一人去荒野寻找钓场的经历很像,你知道前方有一条河流,至于那里适不适合钓鱼,是不知道的,你想要知道结果,就需要亲自去确认。但是,前往河岸的道路之前没有一个人走过,也就是没有道路,而拦在自己面前的是齐人高的荒草地,它们是那么高那么远,似乎看不到头,你不知道草地中有什么危险,毒蛇野猪随时可能出现。然而,追随自己的热情的内心,还是毅然前去开拓者未知的道路,草木长得是那么的密集,自己只能用手用力拨开他们,狠狠踩在脚下才能前行,长着倒刺的茎藤,刀片般的叶子,在手上脸上留下一个个伤痕,当你前进了一半,到了整个荒草片野中间的时候,四周没有一个人,只有轻轻的风抹动草叶交织的嗦嗦声,一股孤独的感觉油然而生,在这一刻,再强大的内心也会犹豫,我要不要继续前进……

对啊,我要不要继续前进呢!?最近一段时候,有一句话对我内心冲击很大,而且反复被提及,就是“你做这件事情的目的是什么?”

“拜托,不要搞这么功利,别搞这么累好不好,我就是追寻内心,我就是兴趣使然!”我心里的第一反应是这样的。

然而,当突然抬头,发现周围没有一个人,满是荆棘的时候,内心就会犹豫,好比这篇文章,如果非要讲功利,讲目的,真的没什么,有价值吗?有人在意吗?花出去的时间值得吗?为什么搞些无人问津的东西?为何不去关注时髦的对项目有帮助的东西?为何别人在天上飞,你要在荆棘丛中孤独前行呢?(下面视频:路人在街头黑板上写下他们这辈子最大的遗憾)

So, 统统out去吧,我继续我的前进,穿越未曾穿越过的草地,前往那召唤等待的河流,发现自己向往的垂钓处女地。

二、cols属性值和宽度

您可以狠狠地点击这里: textarea文本域cols属性和宽度关系demo

界面如下:

我们可以选择下拉修改文本域的文字尺寸,字体以及字符间距等,看看会不会对文本域的宽度造成影响。结果结论如下:

Chrome IE FireFox
font-size
font-family
letter-spacing

可以看见,Chrome浏览器只受到字符大小影响,对字体和字符间距视而不见;而FireFox浏览器则每一个都会影响之;而IE浏览器不受字符间距影响。

那最关心的问题来了, cols 的值和最终呈现的宽度有没有什么比如的关系或者公式呢?

在simsun字体,也就是宋体下,我们可以很容易得看出之间的关系为:

  • Chrome: 8px * cols + 17px
  • IE: 8px * cols + 17px
  • FireFox: 8px * cols + 29px

由于CSS,HTML这些东西是老外发明的,因此, cols 每个单位相对的宽度是相对于英文字符而言的,在宋体下,可以认为是 8px ,后面的 17px 其实很好理解,表示滚动条的宽度。在window系统下,默认,所有浏览器的滚动条所占据的宽度都是17像素。所以,对于Chrome和IE浏览器而言,文本域最终的宽度( padding 和 border 尺寸暂不考虑)就是单字符宽度* cols 值+滚动条宽度。然而,FireFox浏览器下,增加的宽度是 29px ,这个不就搞不清楚问什么是 29px 了。

在IE浏览器下,如果