div+css 웹 레이아웃 디자인의 새로운 시작 (7)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

div+css 웹 레이아웃 디자인의 새로운 시작 (7)

黄舟

Dec 29, 2016 pm 02:38 PM

다음으로 두 가로 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 웹 레이아웃 디자인의 새로운 시작 (7)

ie6과 Firefox는 동일합니다
이 가로로 바깥쪽 여백이 겹치지 않는다는 걸 보여줍니다

왜 첫 번째 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: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 웹 레이아웃 디자인의 새로운 시작 (7)

여기서 float div와 일반 div의 경우 세로 여백이 겹치지 않는 것을 볼 수 있습니다.
보면 ie6

div+css 웹 레이아웃 디자인의 새로운 시작 (7)

두 번째 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 웹 레이아웃 디자인의 새로운 시작 (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>

로그인 후 복사

여기서 의도적으로 세 번째 div를 더 크게 만듭니다.

div+css 웹 레이아웃 디자인의 새로운 시작 (7)

보시다시피 저는 그렇지 않습니다. 두 번째 div가 있는지는 모르지만 첫 번째 일반 div를 기준으로 50px 간격으로 배치됩니다.
여기 세 번째 div는 두 번째 div를 덮지 않고 그 아래에 세 번째 div를 그 아래에 배치합니다. . 두 div의 색상을 바꿔보면 알 수 있습니다

div+css 웹 레이아웃 디자인의 새로운 시작 (7)

일반 div는 지상에만 있을 수 있고 공중에는 있을 수 없기 때문입니다

ie6 쇼를 보고 있어요. . .

div+css 웹 레이아웃 디자인의 새로운 시작 (7)

IE6를 사용하여 CSS를 배우는 것은 비극이라고 생각합니다. . .

그럼 플로팅 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 웹 레이아웃 디자인의 새로운 시작 (7)

ie6도 마찬가지입니다

다음은 요약
플로팅 요소는 비플로팅 요소(즉, 일반 div)와 플로팅 요소를 기반으로 위치를 지정할 수 있습니다
비플로팅 요소는 플로팅 요소가 아닌 비플로팅 요소를 기반으로만 위치를 지정할 수 있습니다

그래서 공항에 대한 비유는 재해석이 필요합니다
부유하는 요소는 공중을 나는 비행기입니다. 플로팅 요소는 이 영역을 차지하지 않습니다. 왜냐하면 공중에서 지상의 상황을 볼 수 있기 때문에 플로팅 요소가 아닌 요소를 기준으로 배치할 수 있기 때문입니다
. 지상에 떠 있는 요소는 공중에 있는 상황을 모르기 때문에 존재하는지 알 수 없으므로 둘이 겹쳐 하나는 하늘에 있고 다른 하나는 땅에 있습니다

위 내용은 div+css 웹 레이아웃 디자인의 새로운 시작(7) 관련 내용입니다. 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.