30-CSS-08-CSS(CSSのケースモデル)

2121 ワード
実際のウェブページ開発ではdiv+cssが多く,すなわちdivでウェブページにいくつかの領域を分割し,CSSで各領域のスタイルを設定することを「箱」と呼ぶ.
(九宮格配列方式が想像できるが、詳細はデスクトップ図解ファイルvedio 30 CSS 08参照)
ボックスモデルのプロパティは次のとおりです.
(1)外枠:border
上枠:border-top
下辺:border-bottom
左枠:border-left
右ボーダー:border-right
(ボックスボーダースタイルを統一して設定することができます.borderでも上下左右に分けて異なるスタイルを設定することができます.)
(2)内マージン:padding
上内余白:padding-top
下マージン:padding-bottom
左内余白:padding-left
右内側余白:padding-right
(同様に統一して設定してもよいし、別々に設定してもよいし、paddingで2、3、4個の値を直接一度に指定してもよい.詳細はサンプルコードを参照)
(3)外距離:margin
上余白:margin-top
下余白:margin-bottom
左余白:margin-left
右余白:margin-right
(同様に統一して設定してもよいし、別々に設定してもよいし、marginで2、3、4個の値を直接一度に指定してもよい.詳細はサンプルコードを参照)
============================================================================================================
【例】
<html>
<head>
	<style type="text/css">
		div{
			border:#09F solid 1px;	/*          （    <div>  ）*/
			height:100px;	/*        */
			width:200px;	/*        */
		}
		
		#div_1{	/*id   */
			background-color:#F90;	/*            */
			padding:20px;	/*           20，           ，                 20，            */




/*padding:20px 100px;          、      20， 、      100*/


/*padding:20px 100px 200px;              20， 、      100，     200*/


/*padding:20px 100px 200px 300px;              20，      100，     200，     300*/


/*  padding:        ，   、 、 、      ；    2  ，        、    ，      、    ；    3  ，         */
/*  ，      、    ，         ；    4  ，    “ ”，    “ ”，    “ ”，    “ ”，      。*/


			margin:50px;	/*            50，       2、3、4  ， padding    */


/*【  】    margin   0px，           “    ”，       ，  <body>         ，       <body> margin   0px  ，  */
/*style /style     body{margin:0px}*/
		}
	
		#div_2{
			background-color:#0CF;
		}
		
		#div_3{
			background-color:#3F0;
		}
	</style>
</head>
<body>
	<div id="div_1">
	     11
	</div>


	<div id="div_2">
	     22
	</div>
	
	<div id="div_3">
	     33
	</div>
</body>
</html>
floatによる思考
公認メディアタイプ