div+css による Web ページレイアウトデザインの新たな始まり (4)-CSSチュートリアル-php.cn

div+css による Web ページレイアウトデザインの新たな始まり (4)

黄舟

リリース： 2016-12-29 14:23:11

オリジナル

1647 人が閲覧しました

まず、長さと幅が 500px の div を定義します。その存在を明確に示すために、その境界線を実線で表示します

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
} </style> <head>
<body>
<div class="div"></div>
</body>
</html>

ログイン後にコピー

中には多くの div があります。わかります他の小さな箱を大きな箱の中に入れてください

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
} </style> <head>
<body>
<div class="div">
<div id="a"></div> 
</div>
</body>
</html>

ログイン後にコピー

ご覧のとおり

div+css による Web ページレイアウトデザインの新たな始まり (4)

写真は未完成ですが、中のdivが左上隅にしっかりとくっついているのがわかりますbig divの

追加上の

margin-top:5px;
margin-left:5px

ログイン後にコピー

は外側のマージンを設定するための

div+css による Web ページレイアウトデザインの新たな始まり (4)

をここで設定しても効果はありません

。その後ろと下には何もありません

内側の余白を見てみましょう

rreee
試してみるとすぐに効果が分かります、とても簡単です

長さと高さという前提の下で問題を見つけました。の div は ie6 および 360 ブラウザーで設定されており、実際には適応できます。つまり、コンテンツがどれほど多くても、div はバーストしませんが、元の長さと高さは変更されます

実際、これは規格への準拠。 Firefox は正常です

margin-right:5px;
margin-bottom:5px

ログイン後にコピー

試してみてください、これはブラウザの互換性の問題でもあります

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
margin-top:5px;
margin-left:5px;
padding-top:5px;
padding-left:5px;
} </style> <head>
<body>
<div class="div">
<div id="a">hello</div> </div>
</body>
</html>

ログイン後にコピー

Firefox で実行している場合、これは

正しいです

div+css による Web ページレイアウトデザインの新たな始まり (4) IE6 ブラウザでは、それは