CSS boxの例

Webブラウザの横幅を変えたときに、それぞれのboxがどのように描画（rendering）されるのかを見てみましょう。

class="cb01" での指定例です。ここは幅固定で、500pxです。

class="cb02" での指定例です。ここは幅指定無しです。

class="cb01" での指定例です。ここは幅固定で、500pxです。

class="cb03" での指定例です。ここは親boxに対して 50% です。

ここで指定している css-box.css の中身

.cb01 { 
  background-color: #ff00ff; 
  width: 500px;
}
.cb02 { 
  background-color: #d0d000; 
}
.cb03 { 
  background-color: #00d0d0; 
  width: 50%
}

.cb04 { 
  background-color: #d0d0d0; 
  width: 50%
}


#table3-1 {
  width: 70%;
}

td,th {
	border: solid;
}

親boxが幅50%の例

table の幅指定

width: 70%

width指定なし