参考）
http://webdesignrecipes.com/css-visual-formating-model/
基本型：１つのBox を１つのBoxに組み入れて２つのBox
- 大きなBoxの定義(<div>タブ）で小さなBoxの<div>を挟む -
1. html
<html>
<head>
<link href="boxp.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box_1">
<h2> Box Practice</h2>
<div id="box_2">
</div>
</div>
</body>
</html>
<head>
<link href="boxp.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box_1">
<h2> Box Practice</h2>
<div id="box_2">
</div>
</div>
</body>
</html>
2. CSS
#box_1{
width: 650px;
height: 600px;
border: 1px solid black;
}
#box_2{
width: 250px;
height: 220px;
border: 1px solid blue;
}
width: 650px;
height: 600px;
border: 1px solid black;
}
#box_2{
width: 250px;
height: 220px;
border: 1px solid blue;
}
<Tag>
1. postion
position: static;（初期値）
relative;通常の位置を基準とした相対的な配置
absolute; ウィンドウまたは親ボックスを基準とした絶対的な配置
fixed; ウィンドウを基準とした絶対的な配置 + 位置の固定
(1) 位置の指定
top、right、bottom、left は、位置決めされた要素に適用できます。
例： {position: relative; left: 80px; }
◆Paddig: Box内のコンテンツとBox線との間の余白（padding）
(書き方)
1) 値を１つ指定
上下左右の余白（padding）を指定
padding: 20px;（上下左右に20pxの余白）
2) 値を２つ指定
記述した順に「上下」・「左右」の余白（padding）を指定できます。
padding: 30px 50px; （上下に30px、左右に50pxの余白）
3) 値を３つ指定
「上」・「左右」・「下」の余白（padding）を指定
4) 値を４つ指定
「上」・「右」・「下」・「左」の余白（padding）を指定
◆margin: 定義されたBoxと外部（ボックス,Window枠）との間の余白
p 要素の配置場所や大きさは、p 要素自身ではなくて、div 要素が決めている
（中央寄せ）
親ボックスで"text-algin = "center"' を指定しても、ボックス内のボックスは動かない。
p要素の文字列はセンターに寄る。
この場合、中央に寄せたいboxの定義内で
「 margin: 0 auto; 」を指定。
(回り込み)
float: left; 指定されたボックスを’左’に寄せて配置し、文字を回り込ませます。
float right;指定されたボックスを’右’に寄せて配置し、文字を回り込ませます。
但し、boxの場合、最初に記述したboxだけにfloat：leftを記述すると、後に記述されているboxは
前のBoxに重なってしまい、かつ前のＢｏｘの背後に配置されてしまう。
(下記、ピンクの部分が後ろのbox)
後ろのBoxにfloat: rightを書くと、左右に分かれる。
float:left; float:rightは、margin: 0 auto; よりも優先されて実行されるので、効かない。
やっぱり、入れ込む２つのBoxの大きさの和に合わせて、中央に寄せるBoxを作って、その中できっちり float: left; float: right; をしても良いように作るしかないですね。
CSSは、こんな感じ。
#box_1{
width: auto;
height: 600px;
border: 1px solid black;
padding: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#center{
width: 550px;
height: 300px;
margin: 0 auto;
}
#box_2{
width: 250px;
height: 220px;
border: 1px solid blue;
float: left;
background-color: white;
padding-right: 5px;
}
#box_3{
width: 250px;
height: 240px;
border: 1px solid blue;
background-color: pink;
float: right;
}
0 件のコメント:
コメントを投稿