HTML+CSS学習メモ(11)

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

要素の分類

CSS レイアウトを説明する前に、事前にいくつかの知識を知っておく必要があります。CSS では、HTML 内のラベル要素は、一般的に

ブロック要素インライン要素 (インライン要素とも呼ばれます) の 3 つの異なる種類に分類されます。 インライン ブロック要素

一般的に使用されるブロック要素は次のとおりです:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
ログイン後にコピー

一般的に使用されるインライン要素は次のとおりです:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
ログイン後にコピー

一般的に使用されるインライン ブロック要素は次のとおりです:

<img>、<input>
ログイン後にコピー

要素の分類 -- ブロック レベルの要素

ブロック レベルの要素とは? HTML では、

    および
  • はブロックレベルの要素です。 display:block を設定すると、要素がブロック レベルの要素として表示されます。次のコードは、インライン要素 a をブロック要素に変換し、a 要素がブロック要素の特性を持つようにします。

a{display:block;}
ログイン後にコピー

ブロックレベル要素の特徴:

1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (とても横暴で、ブロックレベルの要素が独自の行を占有します)

2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

3. 幅が設定されていない場合、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。

要素の分類 -- インライン要素

HTML では、

 div{     display:inline; }......<div>我要变成内联元素</div>
ログイン後にコピー

インライン要素の特徴:

1. 他の要素と同じ行にある

上下の余白

を設定することはできません。幅はそこに含まれるテキストまたは画像の幅であり、変更することはできません。

要素の分類 - インライン ブロック要素 インライン ブロック要素 (inline-block) は、インライン要素とブロック要素の両方の特性を備えています。コード display:inline-block は、要素をインライン ブロック形状要素として設定します。 (css2.1 の新機能)、 タグはそのようなインライン ブロック タグです。 inline-block 要素の特徴: 1. 他の要素と同じ行にあります。

2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

ボックスモデル - ボーダー (1)

ボックスモデルの

ボーダー

は、

コンテンツ

フィラー

を囲む線であり、この線の

太さ

スタイル

を設定できます。 . (ボーダーの 3 つの属性)。 たとえば、次のコードは、境界線の太さ 2px、ソリッド スタイル、赤色の境界線を設定する div です:

div{    border:2px  solid  red;}
ログイン後にコピー
上記は境界線コードの省略形であり、個別に記述できます。
div{    border-width:2px;    border-style:solid;    border-color:red;}
ログイン後にコピー
注: 1. border -style (ボーダー スタイル) の一般的なスタイルは次のとおりです:
dashed(虚线)| dotted(点线)| solid(实线)。
ログイン後にコピー
2. border-color (ボーダー カラー) の色は、次のように 16 進数の色に設定できます。
border-color:#888;//前面的井号不要忘掉。
ログイン後にコピー

3. border-width (ボーダーの幅) 幅は次のように設定することもできます。

rrree

ボックス モデル - ボーダー (2)

ここで、p タグの下のボーダーを個別に設定したい場合はどうすればよいでしょうか。他の3辺に境界線のスタイルを設定していないのですか? CSS スタイルを使用すると、一方向のみの境界線のスタイルを設定できます:

thin | medium | thick(但不是很常用),最常还是用象素(px)。
ログイン後にコピー

次のコードを使用して、他の 3 つの側面 (上、右、左) の境界線を設定することもできます:

div{border-bottom:1px solid red;}
ログイン後にコピー

ボックス モデル - 幅と高さ

ボックスモデル 幅と高さは、私たちが通常考えるオブジェクトの幅と高さとは異なります。CSS で定義される幅と高さは、パディング内の

コンテンツ範囲

を指します。

したがって、

要素の実際の幅

(ボックスの幅) = 左ボーダー + 左ボーダー + 左パディング + コンテンツの幅 + 右パディング + 右ボーダー + 右ボーダー。

要素の高さについても同様です。

例:

css コード:

border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;
ログイン後にコピー

html コード:

div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }
ログイン後にコピー

要素の実際の長さは、10px+1px+20px+200px+20px+1px+10px=262px です。以下に示すように、Chrome ブラウザーで要素ボックス モデルを表示できます。

ボックス モデル --filling

要素

content

border

の間の距離を設定できます。これは、「」と呼ばれます。

いっぱい

" "。塗りつぶしは上、右、下、左(時計回り)に分けることもできます。次のコード:

<body>   <div>文本内容</div></body>
ログイン後にコピー

順序を間違えないでください。上記のコードは個別に記述することができます:

div{padding:20px 10px 15px 30px;}
ログイン後にコピー

上下左右のパディングがすべて 10px の場合は、次のように記述できます

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}
ログイン後にコピー
上下のパディングが同じ 10px で、左右のパディングが同じ 10px の場合パディングは同じ 20px なので、次のように書くことができます:
div{padding:10px 20px;}
ログイン後にコピー

盒模型--边界

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

div{margin:20px 10px 15px 30px;}
ログイン後にコピー

也可以分开写:

div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}
ログイン後にコピー

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}
ログイン後にコピー

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}
ログイン後にコピー

总结一下:padding和margin的区别,padding在边框里,margin在边框外。


我的公众号二维码

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート