ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのテキストエリアの列数、行数属性と幅、高さの関係に関する研究_html/css_WEB-ITnose

HTMLのテキストエリアの列数、行数属性と幅、高さの関係に関する研究_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:27:25
オリジナル
1308 人が閲覧しました

1. textarea 要素のcols 属性と rows 属性について

一般に「テキストエリア」または「複数行テキストボックス」として知られる

<textarea></textarea><textarea cols="30" rows="5"></textarea>
ログイン後にコピー

以下のサイズは、cols および rows 属性値がない場合よりも明らかに大きいことがわかります。

次の質問は、列と行がテキストフィールドのサイズに影響を与える可能性があることを多くの友人が知っていると思いますが、列と行のさまざまな値と最終的な表示のピクセルサイズの間には何か関係があるのでしょうか? ?計算式を使って計算できるのでしょうか?最終的なパフォーマンスは他の CSS プロパティの影響を受けますか?

上記の問題について知っている人は私も含めてほとんどいないと思いますが、この記事を書く前は漠然と理解していました。

今からくだらない話をしますが、この記事を書いたとき、私は実は心の中で孤独でした。この感覚は、目の前に川があるのはわかっているけど、釣りに適しているかどうかわからない、という感覚に似ています。結果は自分で確認する必要があります。しかし、川岸への道は誰も歩いたことがなく、つまり道はなく、目の前にあるのは人の背丈ほどもある不毛の草原であり、とても高く遠くにあります。終わりが見えない草原には、いつ毒ヘビやイノシシが現れるかわかりません。それでも、自分の情熱に従って、私は果敢に未知の道を探索しに行きました。草や木が生い茂り、手で押しのけたり、踏みしめたりするしかありませんでした。茎と蔓、刃のような葉が手と顔に跡を残し、半分進んで草原全体の真ん中に到達すると、周りには誰もおらず、絡み合った草の葉が穏やかな風に吹かれているだけです。 . ささやくような音、自然と湧き上がる孤独感、どんなに強い心でも迷ってしまう、このまま進んでいいのか…

そうだ、進めばいいのか! ?最近、私の心に大きな影響を与え、繰り返し言及される言葉があります。それは、「これを行う目的は何ですか?」です。いいですか?私はただ自分の興味を追求しているだけです!これが私の最初の反応でした。

しかし、ふと見上げると周りには誰もおらず、棘だらけであることに気づくと、例えばこの記事は、功利主義と目的について語らなければならない場合、次のようになります。本当に何もないのですか?気にする人はいますか?時間を費やす価値はありますか?なぜ誰も気にも留めないものを構築するのでしょうか?あなたのプロジェクトに役立つトレンドのものに焦点を当ててみてはいかがでしょうか?他の人が空を飛んでいる中、なぜあなたは一人で茨の中を歩かなければならないのでしょうか? (下のビデオ:通行人が路上の黒板に人生最大の後悔を書きました)

さて、みんなで行こう、まだ渡ったことのない草原を越え、呼ぶ川に向かって進み続けた待っていたら見つけた、憧れの未開の漁場。

2. Cols 属性の値と幅

ここをクリックしてください: textarea テキストエリアの Cols 属性と幅の関係のデモ

インターフェースは次のとおりです:

テキストのサイズと幅を変更するにはドロップダウンを選択できます。テキストエリアのフォントや文字間隔など、テキストフィールドの幅に影響するかどうかを確認します。結果と結論は次のとおりです。

font-sizeフォントファミリー文字間隔

ご覧のとおり、Chrome ブラウザは文字サイズのみに影響を受け、フォントと文字間隔には影響を受けません。一方、FireFox ブラウザはそれぞれの影響を受けません。IE ブラウザは文字間隔には影響されません。 。

次に、最も懸念される質問ですが、cols の値と最終的に表示される幅の間には関係や公式はありますか?

simsun フォント、つまり Songdynasty では、次の関係を簡単に確認できます:

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

CSS と HTML は外国人によって発明されたものなので、cols の各単位の相対的な幅は、Song フォントでは 8px と考えられ、次に 17px が実際には簡単です。スクロール バーの幅を理解し、表します。ウィンドウ システムでは、デフォルトで、すべてのブラウザのスクロール バーが占める幅は 17 ピクセルです。したがって、Chrome および IE ブラウザの場合、テキスト フィールドの最終的な幅 (パディングと境界線のサイズは現時点では考慮されません) は、1 文字の幅 * 列の値 + スクロール バーの幅になります。ただし、FireFox ブラウザでは、増加した幅は 29 ピクセルになるため、29 ピクセルが何であるかがわかりにくくなります。

IE ブラウザでは、

Chrome IE FireFox