ホームページ >ウェブフロントエンド >htmlチュートリアル >cssシリーズのレビュー 01_html/css_WEB-ITnose
地下鉄で一人で座っていると、突然、説明のつかない孤独感が私の心にやって来ました。私は人生の苦さと甘さを長い間一人で抱えていたことがわかりました。
私たちは、周りの人や物事を無視して、必死にゴールに向かって走っていることがよくありますが、心を落ち着かせ、気持ちを整理し、初心を忘れないようにしましょう。 ??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 に設定することもできます。
修正されました
具体的な例については、以下を参照してください:
<!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>