ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS学習(セブンティーン)-box model_html/css_WEB-ITnose
CSS学習(セブンティーン)-box model_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:45937ブラウズ
1. 理論: 1. CSS ボックス モデル
a. 外側のボックスのサイズの計算 - 高さ
要素のスペースの高さ = コンテンツの高さ + ボーダー + マージン
b. 外側のボックスのサイズの計算 - スペースの幅= コンテンツの幅 + パディング + ボーダー + 外側のスペース
c. 内側のボックスのサイズの計算 - 高さ
要素の高さ = コンテンツの高さ + パディング + ボーダー
d. 内側のボックスのサイズの計算 - 幅
要素の幅 = コンテンツの幅 + パディング + ボーダー
2 .box-sizing
a.content-box デフォルト値
b.border-box この要素は IE の伝統的なボックス モデルを維持します
c.inherit 要素に親要素のボックス モデル モードを継承させます
d.この値 主な目的は要素の合計幅を制御するには
2. 練習します:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" > *{ margin: 0; padding: 0; } .wrapper{ width: 960px; margin-left: auto; margin-right: auto; color:#6bb2ff; font-size: 30px; text-align: center; } #header{ height: 100px; background: #228833; margin-bottom: 10px; } .sidebar{ float:left; width: 220px; margin-right: 20px; margin-bottom: 10px; height: 300px; background: #ebf3fc; } .content{ float:left; width: 720px; height: 300px; background: #ffcc99; margin-bottom: 10px; } #footer{ background: #a6f821; height: 100px; clear: both; } </style></head><body> <div class="wrapper"> <div id="header">hedaer</div> <div class="sidebar">left</div> <div class="content">main</div> <div id="footer">footer</div> </div></body></html>2. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" > *{ margin: 0; padding: 0; } .wrapper{ width: 960px; margin-left: auto; margin-right: auto; color:#6bb2ff; font-size: 30px; text-align: center; background: #ffcc99; } #header{ height: 100px; background: #228833; margin-bottom: 10px; padding: 10px; width: 100%; } .sidebar{ float:left; width: 220px; margin-right: 20px; margin-bottom: 10px; height: 300px; background: #ebf3fc; padding: 10px; } .content{ float:left; width: 720px; height: 300px; background: #ffcc99; margin-bottom: 10px; padding: 10px; } #footer{ background: #a6f821; height: 100px; clear: both; padding: 10px; width: 100%; } </style></head><body> <div class="wrapper"> <div id="header">hedaer</div> <div class="sidebar">left</div> <div class="content">main</div> <div id="footer">footer</div> </div></body></html>4. れーい
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。