CSS_html/css_WEB-ITnoseの詳細説明

この記事は主に CSS ボックス モデルの学習に関するメモであり、いくつかの基本的な概念、知識ポイント、詳細をまとめています。

いくつかの基本概念

HTML のほとんどの要素はブロック要素またはインライン要素です

ブロックレベルの要素

デフォルトでは、ブロックレベルの要素は新しい行で始まり、コンテナ全体に可能な限り埋め込まれます。
ブロックレベル要素にはインライン要素やその他のブロックレベル要素を含めることができ、インライン要素よりも複雑で大きな構造を作成できます。

ブロックレベル要素のリスト:

html5 で追加された新しい要素:
figcation: グラフィック情報グループのタイトル。 、記事：記事、図：グラフィック情報グループ
出力：フォーム出力、サイド：サイドバーコンテンツ、フッター：セクション末尾またはページフッター、オーディオ：オーディオ再生
ビデオ：ビデオ再生、セクション：ページセクション、キャンバス：キャンバス、グラフィックを描画、 header: セクションヘッダーまたはページヘッダー
hgroup: ヘッダーグループ、

address: 連絡先情報、ol: 順序付きリスト、p: 行、form: フォーム、pre: フォーマット済みテキスト、blockqute: ブロック引用符
h1-h6: タイトル、 table:テーブル、dd:リスト内の項目の説明、dl:定義リスト、div、hr:水平分割線

インライン要素

インライン要素は新しい行を開始せず、対応するラベルのみを占有します。境界線、
にはデータとその他のインライン要素のみを含めることができます

インライン要素のリスト

b、big、i、small、tt、
abbr、頭字語、cite、code、dfn、em、kbd、strong、samp、var、
a、bdo、br、img、map、object、q、script、span、sub、sup、
button、input、label、select、textarea

ブロックレベル要素とインライン要素の違い

ブロックレベル要素:
1. 新しい行が始まります。
2. 幅、高さ、マージン、パディング、境界線の属性を設定できます。

インライン要素:

1.他の要素と同じ行です
2。高さと幅はコンテンツの高さと幅です
3. margin-left 属性と margin-right 属性は設定できますが、margin-top 属性と margin-bottom 属性は設定できません。
4. ボーダーとパディングは設定できますが、ボーダー - トップとパディング - トップがページの上部に達すると、それ以上増加しません

通常のフロー

通常のフローとは、左から右への表示を指します。上から下へ。要素を通常のフローから取り出す唯一の方法は、要素をフローティングまたは配置することです

非置換要素

要素のコンテンツがドキュメントに含まれている場合、その要素は非置換要素と呼ばれます。たとえば、段落のテキストが要素自体の中にある場合、その段落は非置換要素です。

置換要素

他のコンテンツのプレースホルダーとして機能する要素は置換要素と呼ばれ、タグと属性の値に基づいてコンテンツを表示する要素です。たとえば、img 要素は、ドキュメント ストリームに挿入される画像ファイルを単に指します。ほとんどのフォーム要素 (type 属性に基づく入力、表示コンテンツ) も置換要素です。

ルート要素

ドキュメントツリーの最上部に位置し、HTMLドキュメント内のHTML要素です

ボックスモデル

HTMLドキュメント内のすべての要素は長方形のボックスとして表され、これらの長方形のボックスはモデルを使用します占有空間を説明するために、このモデルはボックス モデルと呼ばれます。ボックス モデルは、図に示すように、マージン (外側のマージン)、ボーダー (境界線)、パディング (内側のマージン)、コンテンツ (コンテンツ領域) の 4 つの境界によって記述されます。

CSS ボックス モデル

いくつかのヒント

1.padding、border、および margin はすべてオプションであり、デフォルト値は 0 ですが、ブラウザーは要素のマージンとパディングを独自に設定し、

1 *{2     margin:0;3     padding:04 }

を設定することでブラウジングをオーバーライドします。 CSSスタイルシートのデバイススタイルで。注: * ここではすべての要素を意味しますが、このパフォーマンスは良くありません。よく使用される要素を一度にリストして設定することをお勧めします

2. 要素の背景を設定し、境界線の色を透明にすると、背景はコンテンツ、パディング、境界領域に適用されます。

3. ブラウザの互換性

適切な DTD がページに設定されると、ほとんどのブラウザは上記のようにコンテンツをレンダリングします。ただし、IE 5 および 6 でのレンダリングは正しくありません。

W3C 仕様によれば、要素のコンテンツが占めるスペースは width 属性によって設定され、コンテンツの周囲のパディングとボーダーの値は個別に計算されます。
残念ながら、IE5.X と 6 は独自の非標準モデルを奇妙なモードで使用します。これらのブラウザの width プロパティは、コンテンツの幅ではなく、コンテンツ、パディング、境界線の幅の合計です。

水平方向の書式設定

非置換要素の水平方向の書式設定

水平方向の書式設定の 7 つの属性は、margin-left、border-left、padding-left、width、padding-right、border-right、margin-right です。これら 7 つの属性値の合計が親要素の幅の値になることがよくあります。

左マージン、幅、右マージンは自動に設定できます。

主に次のような状況があります:

一个属性设置成auto

如果三个属性中某个属性设置了auto，其余两个为特定的值，那么设置auto的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的width。

例子

HTML代码

 

1 <div class="parent">2 3     <span class="block">块级元素</span>4 5 </div>

 

CSS代码

 1 .parent{ 2     width:600px 3 } 4  5  6 div { 7     background: #eeb3b3 none repeat scroll 0 0; 8 } 9 10 11 .block {12     background: #ffd800 none repeat scroll 0 0;13     display: block;14     margin-left: auto;15     margin-right: 100px;16     padding: 30px;17     width: 100px;18 }

 

 

被设置为auto的margin-auto属性值为340px，即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600

总和不等于父级元素的width

使用auto可以弥补实际值与所需总和的差距，如果三个属性都设置了特定值，但是总和不等于父级元素的width。
修改上面例子中的margin-left为100px，即

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: 100px;6     padding: 30px;7     width: 100px;8 9 }

 

在上面的CSS中，margin-left，width，margin-right都设置了特定值，但是七大属性总和不等于父级元素的width。这种情况下：
在FF中，margin-right的值为开发者设定的值
在Chrome中，margin-right被强制为auto

width设置为auto

如果margin-left和margin-right都设置特定值，width设置为auto，则width将会等于某个特定值以达到父级元素的width。
如果将width修改为auto，即：

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: 100px;6     padding: 30px;7     width: auto;8 9 }

 

元素的width将被被设定为340px来使总和达到父级元素的width

margin-left和margin-right设置成auto

如果margin-left和amrgin-right都设置为auto，则它们会设置相等的值，因此元素将在父级元素中居中。这是将块级元素居中的一种方法。注意：text-align设置为center只适用于块级元素中的内联内容居中，并不能使块级元素居中。
设置margin属性为margin:0 auto

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin: 0 auto;    5     padding: 30px;6     width: 100px;7 8 }

 

 

margin-left和margin-right的值会被设置为相等，使得元素居中

某个外边距和width设置成auto

如果设置某个外边距和width为auto，则设置为auto的外边距会为0，width会设置为所需的值来填充父级元素。

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: auto;5     margin-right: 100px;6     padding: 30px;7     width: auto;8 }

设置margin-left和width为auto，则margin-left将被设置为0，width会被设置为440px来满足父级元素的width

全设置成auto

如果margin和width都设置为auto，则两个外边距会设置为0，width会尽可能宽。

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: auto;5     margin-right: auto;6     padding: 30px;7     width: auto;8 }

 

 

三个值都设置为auto，则两个外边距会设置为0，width会被设置为540px

负外边距

7个属性只要都是大于等于0的值，总和总是等于父级元素的width，不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素width更大的区域

 

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: -400px;6     padding: 30px;7     width: auto;8 }

 

设置margin-right为-400px，则元素会大于父级元素width，因为100+0+30+840+30+0-400=600，元素的width为840px

替换元素的水平格式化

替换元素的水平格式化规则和非替换元素的规则类似，只有一个width有区别，如果width设置为auto，则元素的宽度是内容的固有宽度。注意：对于img标签，如果width不等于其固有宽度，则height也会等比例增加，除非设置特定值。反过来如果height设置高度，width也会等比例增加

垂直格式化

垂直格式化和水平格式化类似，也有7个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。
其中margin-top，margin-bottom和height可以设置成auto
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。

如果正常流元素的height设置为auto，则其高度将会被设置为其内容元素的高度总和。

垂直外边距合并

垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例子：

html代码

1 <div class="m20"> 外边距20px </div>2 <div class="m10"> 外边距10px </div>

 

css代码

1 .p20 { padding: 20px; }2 .p10 { padding: 10px; }

 

図に示すように、2つのdivタグのマージンはそれぞれ20pxと10pxですが、2つのdiv間の最終的な距離は20+10=30pxではなく20pxです

インライン要素のボックスモデル

インライン要素がありますもボックス モデルですが、注意すべき点がいくつかあります。
1. margin-left 属性と margin-right 属性はインライン要素に設定できますが、margin-top 属性と margin-bottom 属性は設定できません
2.インライン要素のボーダーとパディングは設定できますが、ページの先頭に到達するとボーダートップとパディングトップは増加しなくなりました