ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい行に表示される必要があります。 •幅、高さ、パディング、マージンをすべて制御できます。 インライン要素のプロパティ: • 隣接するインライン要素と同じ行に配置する • 幅 (width)、高さ (height)、内側余白の上/下 (padding-top/padding-bottom)、外側余白の上/下 (margin-top/margin-bottom)、つまり内部のテキストや画像のサイズは変更できません。 主なブロックレベル要素は次のとおりです。 コードをコピー コードは次のとおりです。アドレス、blockquote、center、dir、div、dl、fieldset、form、h1、h2、h3、h4、h5、h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul 主なインライン要素は次のとおりです。 コードをコピー コードは次のとおりです。a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、 テキストエリア、tt、u、var 可変要素(コンテキストに基づいて要素がブロック要素かインライン要素かを判断する) : コードをコピー コードは次のとおりです。アプレット、ボタン、del、iframe、ins、マップ、オブジェクト、スクリプト CSS におけるブロックレベル要素とインライン要素の適用: CSS を使用すると、上記の表の HTML タグ分類の制限を取り除き、さまざまなタグ/要素に必要な属性を自由に適用できます。 主に使用される CSS スタイルは次の 3 つです。 •display:block -- ブロックレベル要素として表示 •display:inline -- インライン要素として表示 • dipslay:inline-block -- インライン ブロック要素として表示され、同じ行に表示され、幅、高さ、内側と外側の余白などのプロパティを変更できます。多くの場合、display:inline-block スタイルを <ul> 要素に追加して、元々垂直なリストを水平に表示できるようにします。 話題外: 最近、ブロックレベル要素とインライン要素の違いについて知識を整理しました。インターネットで関連記事をたくさん見つけましたが、みんなの理解が間違っているようでした。自分でテストしてみたところ、多くの問題が見つかりました: 1. インライン要素の margin-left / margin-right と padding-left / padding-right を制御できるため、この 4 つのプロパティによってインライン要素の幅を制御できます。 2. ブロックレベル要素タグはインライン要素内にも配置でき、内部のブロックレベル要素タグは外部のインラインタグを拡張するため、ブロック要素を配置することでインライン要素の高さを制御できます(インライン要素にはテキストと他のインライン要素のみを保持できるとインターネット上で紹介されています) 例えば: コードをコピー コードは次のとおりです。<あ> <div style="width:100px;height:100px;">テスト</div> </a> |
>>: http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順
MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...
目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...
序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...
目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...
簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
この記事では、マーキーのシンプルな効果を実現するためのVueの具体的なコードを参考までに共有します。...
1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...
ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...
シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...
目次1. 遅いクエリSQLを見つけて最適化する方法a. スローログに基づいてスロークエリSQLを見つ...
目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...
会議中に同僚から開発ライブラリを書き込めないとの報告を受けました。エラー メッセージは次のとおりでし...