CSS 왼쪽 오른쪽 위 아래 위치 지정의 소개 및 예-CSS 튜토리얼-php.cn

CSS 왼쪽 오른쪽 위 아래 위치 지정의 소개 및 예

巴扎黑

풀어 주다： 2017-06-28 09:42:03

원래의

2015명이 탐색했습니다.

이 네 가지 CSS 속성 스타일은 개체 상자를 배치하는 데 사용됩니다. 이 값을 적용하려면 position 속성 값을 절대 또는 상대로 정의해야 합니다.

1. 문법 구조

왼쪽, 오른쪽, 위쪽, 아래쪽 뒤에 숫자 + html 단위가 옵니다.

데모구조

div{left:20px}

div{right:20px}

div{top:20px}

div{bottom:20px}

Left 왼쪽으로 얼마나 떨어져 있는지

Right 얼마나 떨어져 있는지 오른쪽으로의 거리

위쪽은 얼마나 떨어져 있나요?

아래쪽은 얼마나 떨어져 있나요?

2. 사용 조건

보통 왼쪽, 오른쪽, 아래쪽만 사용하는 것은 유효하지 않습니다. 절대 위치 지정CSS 위치 스타일을 사용하여 적용합니다.

일반적으로 스타일에는 왼쪽과 오른쪽 중 하나만 사용할 수 있습니다. 오른쪽 대신 왼쪽을 사용하거나 왼쪽 대신 오른쪽을 사용하면 호환성 문제가 발생합니다. , 물체는 왼쪽으로 거리를 설정하고, 오른쪽으로의 거리는 자연스럽게 존재하므로 왼쪽을 설정할 필요가 없습니다.

같은 방법으로 개체에는 위쪽과 아래쪽 중 하나만 사용할 수 있습니다. 그렇지 않으면 논리적 호환성 문제가 발생합니다. 예를 들어, 어떤 사람은 왼쪽으로 가라고 하고, 다른 사람은 오른쪽으로 가라고 하면서 동시에 왼쪽으로 가라고 오른쪽으로 가라고 하면 어느 방향으로 가야 할지 판단하기 어렵습니다.

3. 절대 위치 지정에 사용

일반적으로 위치와 연동하여 왼쪽, 오른쪽, 위쪽, 아래쪽을 사용합니다. CSS 위치 튜토리얼에 들어가 이러한 스타일 속성에 대해 알아볼 수 있습니다.

예:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script type="text/javascript" language="javascript"> 
function selA(id) { 
switch(id) { 
case "1": 
document.getElementById("subobj").style.position = "static"; 
break; 
case "2": 
document.getElementById("subobj").style.position = "absolute"; 
break; 
case "3": 
document.getElementById("subobj").style.position = "relative"; 
break; 
case "4": 
document.getElementById("subobj").style.position = "fixed"; 
break; 
} 
} 
</script> 
<style type="text/css"> 
#all { 
  width:190px; 
  height:95px; 
  padding:10px 0 0 10px; 
  border:1px #000 solid; 
  position:relative; 
} 
#subobj { 
  width:100px; 
  height:50px; 
  border:1px #000 solid; 
  bottom:9px; 
  position:static; 
} 
#sel { 
  margin-top:5px; 
} 
select { 
  width:200px; 
} 
</style> 
</head> 
<body> 
<div id="all"> 
<div id="subobj">子对象1</div> 
</div> 
<div id="sel"><select onchange="selA(this.value)"><option value="1">static</option><option value="2">absolute</option><option value="3">relative</option><option value="4">fixed</option></select></div> 
</body> 
</html>

로그인 후 복사

위 내용은 CSS 왼쪽 오른쪽 위 아래 위치 지정의 소개 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!