집 >웹 프론트엔드 >HTML 튜토리얼 >div 플로팅 레이어와 기본 div 레이어 사이에는 어떤 관계가 있나요?

div 플로팅 레이어와 기본 div 레이어 사이에는 어떤 관계가 있나요?

php中世界最好的语言원래의: 2017-11-22 17:45:542089검색

플로팅이라고 하면 우선 개념을 이해해야 하는데 왜 플로팅 스타일을 설정하는 걸까요? DIVobject 상자를 왼쪽이나 오른쪽으로 배치하고 싶기 때문입니다. 이런 방식으로 웹페이지를 더욱 아름답고 대화형으로 만들 수 있습니다. 그렇다면 플로팅 DIV와 기본 DIV의 차이점은 무엇일까요?

div 플로팅 레이어와 div 레이어의 차이점은 무엇인가요? CSS의 관계는 무엇인가요?

먼저 DIV 플로팅 레이어와 DIV 레이어는 모두 DIV 레이아웃을 말합니다. 스타일시트와 DIV 태그는 웹페이지 레이아웃에 사용됩니다.

div 레이어에는 일반적으로 div 플로팅 레이어가 포함되어 있습니다. div 플로팅 레이어는 div가 css 플로팅 스타일로 추가되었음을 나타내므로 플로트 플로팅 스타일이 없으면 div 플로팅 레이어라고 합니다. 플로팅 효과가 있으므로 플로팅 스타일을 추가하지 않으면 div에 플로팅 효과가 적용되지 않습니다. 이를 플로팅 레이어라고 합니다. 물론,span,h1,ul,li등의 태그도 레이어이지만,span,h1,ul,li등의 태그는 div만큼 자주 사용되지 않으므로 일반적으로 div를 상징적인 이름으로 사용합니다.

다음으로 일반 레이어가 무엇인지, 플로팅 레이어가 무엇인지 알려드리겠습니다. div CSS 플로팅 레이어를 사용하는 이유

전체 DIV+CSS 예제 HTML 코드는 다음과 같습니다

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div层与浮动层</title> 
<style> 
.div{ width:400px; height:100px} 
.div-a{ float:left; border:1px solid #F00; width:100px; height:80px} 
.div-b{ float:right; border:1px solid #00F; width:100px; height:80px} 
</style> 
</head> 
<body> 
<div class="div"> 
<div class="div-a"></div> 
<div class="div-b"></div> 
</div> 
</body> 
</html>

개체 ".div"는 부동으로 설정되지 않았고 ".div-a"는 왼쪽으로 부동(float:left)으로 설정되었으며 ". div-b"는 오른쪽으로 부동하도록 설정됩니다(float :right).

레이어와 플로팅 레이어 요약

위 예시에서 ".div" 객체는 일반 레이어이고, 기본값은 플로팅 효과가 없는 레이어입니다. 웹 페이지의 내용이 왼쪽에 있기 때문입니다. 왼쪽의 레이어를 참조하세요. 하지만 실제로는 스타일의 DIV 상자 레이어가 없습니다. 개체 내의 하위 항목 ".div-a" 및 ".div-b"는 부동으로 설정되어 부동 레이어가 됩니다. 위에서 볼 수 있듯이 하나는 왼쪽으로 부동하고 다른 하나는 오른쪽으로 부동합니다. ".div" 상자. 일반 레이어와 플로팅 레이어의 차이점은 CSS 플로트 스타일이 설정되어 있는지 여부입니다.

floating의 차이점이 매우 명확하게 소개되었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트기타관련 기사를 주목하세요!