ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML+CSS学習メモ(11)
HTML+CSS学習メモ(11)
- WBOYオリジナル
- 2016-06-24 11:24:211215ブラウズ
要素の分類
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 では、dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1、ff9c23ada1bcecdd1a0fb5d5a0f18437、ff6d136ddc5fdfeffaf53ff6ee95f185 および 25edfb22a4f469ecb59f1190150159c6 はブロックレベルの要素です。 display:block を設定すると、要素がブロック レベルの要素として表示されます。次のコードは、インライン要素 a をブロック要素に変換し、a 要素がブロック要素の特性を持つようにします。
a{display:block;} ブロックレベル要素の特徴: 1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (とても横暴で、ブロックレベルの要素が独自の行を占有します)
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
3. 幅が設定されていない場合、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。
要素の分類 -- インライン要素HTML では、45a2772a6b6107b401db3c9b82c049c2、3499910bf9dac5ae3c52d5ede7383485、2e1cf0710519d5598b1f0f14c36ba674、8e99a69fbe029cd4e2b854e244eab143、907fae80ddef53131f3292ee4f81644b が代表的なインライン要素 (inline 要素) です。もちろん、display:inline コードを使用してブロック要素をインライン要素として設定することもできます。次のコードは、ブロック要素 div をインライン要素に変換し、div 要素がインライン要素の特性を持つようにします。
div{ display:inline; }......<div>我要变成内联元素</div> インライン要素の特徴:
1. 他の要素と同じ行にある
上下の余白
を設定することはできません。幅はそこに含まれるテキストまたは画像の幅であり、変更することはできません。
要素の分類 - インライン ブロック要素 インライン ブロック要素 (inline-block) は、インライン要素とブロック要素の両方の特性を備えています。コード display:inline-block は、要素をインライン ブロック形状要素として設定します。 (css2.1 の新機能)、83d1d4e7ecf38381133c5785bddc4398 タグはそのようなインライン ブロック タグです。 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在边框外。
我的公众号二维码