CSS_html/css_WEB-ITnose のコア

前提:

ブロックレベルの要素: div タグはブロックレベルの要素であり、Web ページ上で 1 行を占めるものとして表されます
インライン要素: scan タグはインライン要素であり、その長さは文字の長さにのみ関係します

小さな例:

<span style="font-size:18px;"><div  class="menu">阿猫</div>    <span class ="menu">阿狗</span>    <span class="menu">阿兔</span><span class="title">f阿牛</span></span>

効果:

インライン要素をブロックレベルの要素に変換する方法。例: スパンタグの美しさを行全体にまたがるように変換する

<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>

小さな例:

<span style="font-size:18px;">.ttt{    display:block;}</span>

効果:

標準フロー 概念: ラベルの配置は、表示時に書き込み順に配置されます。例えば、上記例のCatとDogの表示順序やスタイルページの

優先度は標準フローに関係します。

ボックスモデル

Web デザインでよく聞く属性名、コンテンツ、パディング、ボーダー、マージン、CSS ボックス モードはすべてこれらの属性を持っています。これらの属性を日常生活の箱（ボックス）に置き換えることで理解することができます。私たちが日常生活で目にする箱は、物を入れることができる箱であり、これらの属性も備えているため、ボックスパターンと呼ばれます。

ボックス モデルは、外側のマージン: ボーダー (上、下、左、右)、内側のマージン: パディング (上、下、左、右)、コンテンツ: コンテンツ (幅、高さ)、額縁: マージンに分割されます。 (上下左右)

各ラベルはボックスに相当します。ボックス モデルを通じて各ラベルの内側と外側の余白を設定します。

小さな例 (1):

<span style="font-size:18px;">.menu{                              /*栏目样式*/    color:#00f;                             /*文字颜色*/    background-color :#ffd800;    border-width:5px;    border-color :#0ff;    border-style:solid;}</span>

効果:

小さな例 (2)

<span style="font-size:18px;">内边距属性写法  /*padding-top: 5px;    padding-left : 5px;    padding-bottom : 5px;*/    /*padding: 5px;*/                      /*如果据上下左右的边距一样的话可以这样写*    padding:5px  6px  7px  8px;     /*默认的是逆时针上右下左的顺序*/      </span>

上の両方の列にマージンがある場合、2 つの列の間の距離が最大値になります)

効果:

注: インライン スタイルはマージン、長さなどに反応しません。 .、つまりボックスモデルです。

フローティング フローティング ボックスは、その外縁が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。ボックスモデルはブロックレベルの

要素用なので、ブロックレベルの要素をフローティングで並べることができます。標準的な流れから外れています。

小さな例:

<span style="font-size:18px;">float:left ;         /*盒子向左浮动*/</span>

効果:

<span style="font-size:18px;">clear:left;         /*清除浮动*/</span>

フローティングについては、より詳細な Web サイトをお勧めします: http://www.w3school.com.cn/css/css_positioning_ float.asp

相対的な位置決め、相対的な位置決め。標準フローから逸脱することなく、特定のブロックレベルの要素を見つけます。元の位置を基準にして。したがって、アー・マオの位置は依然としてアー・ドッグの元の位置と相対的です。

<span style="font-size:18px;">position:relative;   /*相对定位*/    top:20PX;</span>

絶対、絶対の位置決め。箱の外側の外箱に対して、標準の流れから分離されています。

ハイライト: ボックスモデルは素晴らしいモデルです。これを現実の生活と組み合わせることで、Web デザインの形式をより徹底的かつ簡単に習得できます。