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

ホームページ

ウェブフロントエンド

CSSチュートリアル

div+css Web レイアウトデザインの新たな始まり (7)

黄舟

Dec 29, 2016 pm 02:38 PM

ここで、2 つの水平方向の div の外側のマージンが重なる問題に戻りましょう

<html>
<head>
<style type="text/css"> 
body{margin:0;padding:0;} 
#a{width:500px;height:500px;border:solid;}
.div{width:100px;height:100px;border:soild;
margin-right:20px;background:green;float:left;} 
#b{width:100px;height:100px;border:soild;margin-left:20px;background:green;float:left;} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

ログイン後にコピー

div+css Web レイアウトデザインの新たな始まり (7)

ie6 と Firefox は同じです
これは、水平方向の外側のマージンが重ならないことを意味します

最初の div が float に設定されていないのはなぜですかその 2 一度設定すると、水平方向に配置されなくなります

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

ログイン後にコピー

まずは Firefox を見てください

div+css Web レイアウトデザインの新たな始まり (7)

ここで、float div と通常の div では垂直方向の余白が重ならないことがわかります

今度は IE6 を見てください。

div+css Web レイアウトデザインの新たな始まり (7)

2 番目の div は実際には最初の div に左マージン (10px) を追加するため、ブラウザの互換性の問題は非常に厄介です

フローティング div は通常の div に基づいて配置できます

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

ログイン後にコピー

div+css Web レイアウトデザインの新たな始まり (7)

では、通常の div はフローティング div に基づいて配置できますか?実験してみましょう

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
margin-top:25px;
background:green;
float:left;
} 
#c{
width:300px;
height:300px;
border:soild;
margin-top:50px;
background:green;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

ログイン後にコピー

ここで 3 番目の div は意図的に大きくされています

div+css Web レイアウトデザインの新たな始まり (7)

2 番目の div が存在することを認識していませんが、最初の通常の div 、 50px に基づいてその位置を決定していることがわかります。真ん中に離れています

ここの3番目のdivは2番目のdivをカバーしていませんが、その下にあります。2番目のdivを別の色に変更すると確認できます

div+css Web レイアウトデザインの新たな始まり (7)

通常のdivは地面にしか配置できないためです。空へ行きます

IE6の表示を見てみましょう。。。

div+css Web レイアウトデザインの新たな始まり (7)

CSS を学ぶために IE6 を使用するのは悲劇だと思います。。。

では、フローティング div はフローティング div に基づいて配置できますか?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
background:green;
float:left;
} 
#c{
width:100px;
height:100px;
border:soild;
margin-left:50px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

ログイン後にコピー

答えはイエスです

div+css Web レイアウトデザインの新たな始まり (7)

ie6も同じです

以下は要約です
浮動要素は非浮動要素(つまり、通常のdiv)と浮動要素に基づいて配置できます
非-浮動要素のみが可能です非浮動要素に基づいた位置決めは、浮動要素に基づいた位置決めはできません

その場合、空港に関するアナロジーは再解釈する必要があります
浮動要素は空を飛ぶ飛行機です非浮動要素は地面に駐機している飛行機です
非浮動要素が領域を占める方法、浮動要素はこの領域を占有しません。地面は空中に見えるため、非浮動要素に従って配置できます
そして、浮動要素が領域を占有する場合, 地上の非浮遊要素は空気の状況が分からないので存在が分からず、空と地上の二つが重なってしまいます

以上が内容ですdiv+css Web レイアウトデザインの新たな始まり (7)、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。