HTML インライン要素とブロックレベル要素、およびそれらの相互変換についての理解_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:15:09
オリジナル
1414 人が閲覧しました

ブロックレベル要素: div、p (段落)、form (フォーム)、ul (順序なしリスト)、li (リスト項目)、ol (順序付きリスト)、dl (定義リスト)、hr (水平方向)分割線)、メニュー(メニューリスト)、テーブル(表)...

特徴: 1. ブロックレベル要素は排他的な行を占有し、その幅は親要素の幅を自動的に埋めます。

2.幅と高さの属性を設定できます。 (幅を設定しても、float属性など特別な事情がない限り、排他行を占有します)

3. margin(外側のマージン)とpadding(内側のマージン)を設定できます。

インライン要素: span、strong、em、br、img、input、label、select、testarea...

(インライン要素、インライン要素、インライン要素、インライン要素はすべて「インライン」要素を指します) )

特徴: 1. インライン要素は 1 行を占めません。 隣接するインライン要素は、要素の内容に合わせて幅が変わるまで折り返されません。コンテンツによってサポートされる幅)。 2. width属性とheight属性の設定は無効です。方 平 3. Padding-left、padding-right、margin-heft、margin-right は境界線の間隔効果を生成しますが、

垂直方向のpadding-top、padding-bottom、margin-bottomには効果がありません。

可変要素:

コンテキストに基づいて要素がブロックレベル要素であるかインライン要素であるかを判断する必要があります。コンテキストがそのカテゴリを決定すると、ブロックレベル要素またはインライン要素の規則に従います。

CSS:

css は、HTML のデフォルトのレイアウト モードを変更し、ブロックレベルの要素を必要な場所に配置できます。

ブロックレベル要素とインライン要素の基本的な違いは、ブロック要素は通常改行で始まるのですが、CSS制御が追加されるとこの属性の違いは違いになりません。

inline要素

display:block

のような属性を追加し、inline要素にも毎回改行から始まる属性を持たせます。

block-level要素display:inline

属性を追加し、ブロックレベル要素が改行属性を持たないようにする。

inline要素

display:inline-block

属性を追加します まだインライン要素ですが、width属性やheight属性などを設定することができます。

(この記事は学習と交換のみを目的としています。異なる意見がある場合は、貴重なコメントを残してください~)


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!