nyantarou and css box model001

---

 file name :html0003.html And :data-css/0003.css
 import model

 **********************************
 <style type="text/css" media="screen">
                   @import "data-css/0003.css"; 
 </style>
 **********************************

   今回は css 自体は 前回のもので色は幾許 換えてあるが
  それにboxを 追加していってその振舞をみてみる。
  考慮しておく点は body{ width :480px; 云々である。
  これは 緑系統の場所の幅:480pxであり padding:30px、
  border:20px、margin:10pxということは全体の幅は

  480px+30px+20px+10px+10px+20px+30px=600px

  に なることであるpadding:、border:、margin:は
  各々両側に存在するので追加する必要がある。
  確認のため box480 を 作成してみよう
  下記のもの を css に 追加する
  わかりやすくするために、padding:、border:、margin:は全て
  零に設定してある。

 .box480{
    width :480px;
    color:#006600;
    margin:0px;
    background-color : #ffff00; 
    border:0px solid #0000ff;
    padding:0px; 
 }

  では 500px に 変えた box500 を 作成してみよう

 .box500{
    width :500px;
    color:#006600;
    margin:0px;
    background-color : #ffff00; 
    border:0px solid #0000ff;
    padding:0px; 
 }

  580pxの場合はみ出しが著しいので 500pxで 行っ た。
  もう少し見ておこう50px少なくするとどうなるか？
  box430 を 見てみよう

 .box430{
    width :430px;
    color:#006600;
    margin:0px;
    background-color : #ffff00; 
    border:0px solid #0000ff;
    padding:0px; 
 }

  ではこんどは margin:10px;、border:20px solid #0000ff;、
  padding:30px;にして

  360px+30px+20px+10px+30px+20px+10px=480px

  box360 を 作成してみよう

 .box360{
    width :360px;
    color:#006600;
    margin:10px;
    background-color : #ffff00; 
    border:20px solid #0000ff;
    padding:30px; 
 }

  margin:10px か 区別 しにくいのであれば
  box380 ではどうですか？

 .box380{
    width :380px;
    color:#663300;
    margin:0px;
    background-color : #66cc33; 
    border:20px solid #cc0099;
    padding:30px; 
 }

   これらがうまく見えてれば良いのですが box500 以外
  は 全て内部に収まってあればとりあえずは良いかもしれません
  しかしながら（UA）によっては width に border:と padding:を
  含めて取り扱うものがあるそうです。