cssシリーズのレビュー 01_html/css_WEB-ITnose-htmlチュートリアル-php.cn

cssシリーズのレビュー 01_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:35:25

オリジナル

1095 人が閲覧しました

地下鉄で一人で座っていると、突然、説明のつかない孤独感が私の心にやって来ました。私は人生の苦さと甘さを長い間一人で抱えていたことがわかりました。

私たちは、周りの人や物事を無視して、必死にゴールに向かって走っていることがよくありますが、心を落ち着かせ、気持ちを整理し、初心を忘れないようにしましょう。 ??2015-10-11 (友人の引っ越しを手伝ってください)

さて、今日のトピックに入り、CSS で見落とされがちな問題を再整理しましょう

1.css ボックスモデル

rree

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{margin: 0;}        .container{margin: 10px;}        .bd{border-style: dotted}        .pd{padding: 100px;}        .content{font-size: 22px;background-color: #f2dede;}        .container2{margin: 20px;}        .bd2{border-style: dotted}        .pd2{padding: 100px;}        .content2{font-size: 22px;background-color: #f2dede;}    </style></head><body><!--外边距合并 是以大的一个的距离为准 进行合并操作的 .container2{margin: 20px;}--><div class="container">    <div class="bd">        <div class="pd">            <div class="content">hello word </div>        </div>    </div></div><div class="container2">    <div class="bd2">        <div class="pd2">            <div class="content2">hello word </div>        </div>    </div></div></body></html>

ログイン後にコピー

ちょっとした位置の知識

1) Position:relative/absolute が適用された要素の場合、margin 属性は引き続き有効です。position:relative を例に挙げます。

左、上、下、右の属性を設定した場合、要素を正確に配置して干渉要因を最小限に抑えることが困難になるため、マージンデータを設定しないことをお勧めします。

2)position:Absolute はルート要素のパディングを無視します。

3) IE6/7 でposition 属性を設定すると、z-index 属性が無効になります

4) Position:Absolute を適用すると、インライン要素の表示が変わります。

したがって、relative はインライン要素のレンダリングモードを変更しないことに注意することが重要ですが、absolute が設定されている場合は、要素の表示をブロックに明示的に変更する必要はありません。

5) 位置: 絶対/相対を適用した後、他の非位置決め要素 (つまり、静的位置を持つ要素) がカバーされます。他の要素をカバーしたくない場合は、z-index を -1 に設定することもできます。

修正されました

長い間、この属性値は互換性の問題により広く使用されていませんでした (IE6 はこの属性値を実装していませんでした)。固定と絶対には多くの共通点があります:

fixedとabsoluteの最大の違いは、absoluteでは「ルート要素」を設定できるのに対し、fixedでは「ルート要素」がブラウザウィンドウに固定されることです。つまり、Web ページをスクロールするとき、その要素とブラウザウィンドウの間の距離は一定です。

具体的な例については、以下を参照してください:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body style="background: yellow;"><div style="background: #fff;">A    <div style="background: #81b6ff; position:relative;">A - 1        <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">            A - 2</div></div></div></body></html>

ログイン後にコピー

ホームページのフレームレイアウト構造の表示:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>浮动</title>    <style>        .container{width: 500px;height: 500px;background-color: darkgray;}        .fd{width: 150px;height: 150px;background-color: #0000FF;float: left;}        .sd{width: 150px;height: 150px;background-color: #9dffbb;float: left;}        .td{width: 150px;height: 150px;background-color: #ffd093;float: left;}    </style></head><body><div class="container">    <div class="fd"></div>    <div class="sd"></div>    <div class="td"></div></div></body></html>

ログイン後にコピー