ホームページ > 記事 > ウェブフロントエンド > cssシリーズのレビュー 01_html/css_WEB-ITnose
cssシリーズのレビュー 01_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:251039ブラウズ
地下鉄で一人で座っていると、突然、説明のつかない孤独感が私の心にやって来ました。私は人生の苦さと甘さを長い間一人で抱えていたことがわかりました。
私たちは、周りの人や物事を無視して、必死にゴールに向かって走っていることがよくありますが、心を落ち着かせ、気持ちを整理し、初心を忘れないようにしましょう。 ??2015-10-11 (友人の引っ越しを手伝ってください)
さて、今日のトピックに入り、CSS で見落とされがちな問題を再整理しましょう
1.css ボックス モデル
rree
2.
<!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 はこの属性値を実装していませんでした)。固定と絶対には多くの共通点があります:
- はインライン要素のプレゼンテーション モードを変更し、表示をブロックに変更します。
- は、要素を通常の流れから切り離し、スペースを占有しないようにします。
- デフォルトでは、配置されていない要素をカバーします。
具体的な例については、以下を参照してください:
<!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>
3.
ホームページのフレームレイアウト構造の表示:
<!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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。