CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동

CSS 레이아웃 속성: 표시, 위치 및 부동

CSS는 웹 페이지의 스타일을 제어하는 ​​데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃을 디자인할 때 레이아웃 속성은 매우 중요합니다. CSS는 다양한 레이아웃 속성을 제공하며 가장 일반적으로 사용되는 속성은 표시, 위치 및 부동입니다. 이 기사에서는 이러한 세 가지 레이아웃 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. display attribute
   디스플레이 속성은 요소의 표시 유형을 지정하는 데 사용됩니다. 일반적인 표시 속성 값은 다음과 같습니다:

1.1.block
블록 요소는 전용 줄을 차지하고 항상 새 줄부터 표시를 시작하며 상위 요소의 너비를 채웁니다. 예를 들어, dc6dce4a544fdca2df29d5ac0ea9906b 요소는 일반적인 블록 요소입니다.

div {
  display: block;
}

1.2. inline
인라인 요소는 그 자체로 한 줄을 차지하지 않고 필요한 공간만 차지합니다. 예를 들어, 45a2772a6b6107b401db3c9b82c049c2 요소는 일반적인 인라인 요소입니다.

span {
  display: inline;
}

1.3. inline-block
inline-block 요소는 행을 차지하지 않지만 너비와 높이를 설정할 수 있습니다. 예를 들어, a1f02c36ba31691bcfe87b2722de723b 요소는 일반적인 인라인 블록 요소입니다.

img {
  display: inline-block;
}

1.4. none
none 요소는 표시되지 않으며 문서 흐름에서 제거됩니다. 예를 들어, display: none을 설정하여 요소를 숨길 수 있습니다.

.hidden {
  display: none;
}

2. 위치 속성
   위치 속성은 요소의 위치를 ​​지정하는 데 사용됩니다. 일반적인 위치 속성 값은 다음과 같습니다.

2.1. static
static이 기본 위치 지정 방법이며 요소는 문서 흐름 순서에 따라 배치됩니다.

div {
  position: static;
}

2.2.relative
relative 자체 초기 위치를 기준으로 한 위치입니다. 상단, 하단, 왼쪽, 오른쪽 속성을 사용하여 요소의 위치를 ​​조정할 수 있습니다.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

2.3. 절대
절대값은 상위 요소를 기준으로 위치가 지정되거나 위치 지정 속성이 있는 가장 가까운 조상 요소를 기준으로 위치가 지정됩니다(위치는 정적이 아님).

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4.fixed
fixed는 브라우저 창을 기준으로 위치가 지정되며 스크롤 막대가 스크롤될 때 위치가 변경되지 않습니다.

div {
  position: fixed;
  top: 0;
  right: 0;
}

3. float attribute
   float 속성은 요소가 부동하는 방식을 지정하는 데 사용됩니다. 요소가 부동으로 설정되면 일반 문서 흐름에서 제거되고 가능한 한 왼쪽이나 오른쪽으로 부동됩니다. 다른 요소는 부동 요소 주위에 배치됩니다.

img {
  float: left;
}

위는 디스플레이, 위치 및 부동의 세 가지 일반적인 레이아웃 속성에 대한 소개 및 코드 예제입니다. 실제로 웹 페이지 레이아웃 디자인을 달성하기 위해 특정 요구 사항에 따라 사용할 레이아웃 속성을 선택할 수 있습니다. 이 글이 독자들에게 CSS 레이아웃에 대한 도움을 줄 수 있기를 바랍니다.

위 내용은 CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!