웹 프론트엔드 CSS 튜토리얼 CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동

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

Oct 20, 2023 pm 05:36 PM
위치 뜨다 보여주다

CSS 布局属性大全:display,position 和 float

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

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

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

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

요소는 일반적인 블록 요소입니다.

1

2

3

div {

  display: block;

}

로그인 후 복사

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

1

2

3

span {

  display: inline;

}

로그인 후 복사

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

1

2

3

img {

  display: inline-block;

}

로그인 후 복사

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

1

2

3

.hidden {

  display: none;

}

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

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

1

2

3

div {

  position: static;

}

로그인 후 복사

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

1

2

3

4

5

div {

  position: relative;

  top: 10px;

  left: 20px;

}

로그인 후 복사

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

1

2

3

4

5

6

div {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

로그인 후 복사

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

1

2

3

4

5

div {

  position: fixed;

  top: 0;

  right: 0;

}

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

1

2

3

img {

  float: left;

}

로그인 후 복사

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

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

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Apple 무선 이어폰을 분실한 경우 찾는 방법_Apple 무선 이어폰 찾는 방법 Apple 무선 이어폰을 분실한 경우 찾는 방법_Apple 무선 이어폰 찾는 방법 Mar 23, 2024 am 08:21 AM

Apple 무선 이어폰을 분실한 경우 찾는 방법_Apple 무선 이어폰 찾는 방법

데스크탑 레이아웃이 잠기는 이유와 해결 방법 데스크탑 레이아웃이 잠기는 이유와 해결 방법 Feb 19, 2024 pm 06:08 PM

데스크탑 레이아웃이 잠기는 이유와 해결 방법

원격 데스크톱 연결을 통해 상대방의 작업 표시줄을 표시하는 방법 원격 데스크톱 연결을 통해 상대방의 작업 표시줄을 표시하는 방법 Jan 03, 2024 pm 12:49 PM

원격 데스크톱 연결을 통해 상대방의 작업 표시줄을 표시하는 방법

Huawei 휴대폰을 분실한 후 신속하게 위치를 찾는 방법은 무엇입니까? Huawei 휴대폰을 분실한 후 신속하게 위치를 찾는 방법은 무엇입니까? Mar 24, 2024 am 08:48 AM

Huawei 휴대폰을 분실한 후 신속하게 위치를 찾는 방법은 무엇입니까?

Amap에서 상대방 휴대폰 위치 찾는 방법 - Amap에서 상대방 휴대폰 위치 찾는 방법 Amap에서 상대방 휴대폰 위치 찾는 방법 - Amap에서 상대방 휴대폰 위치 찾는 방법 Apr 01, 2024 pm 02:11 PM

Amap에서 상대방 휴대폰 위치 찾는 방법 - Amap에서 상대방 휴대폰 위치 찾는 방법

Wi-Fi 비밀번호 QR 코드를 표시하는 방법은 3초 안에 WeChat에서 Wi-Fi 비밀번호를 스캔하는 것이 좋습니다. Wi-Fi 비밀번호 QR 코드를 표시하는 방법은 3초 안에 WeChat에서 Wi-Fi 비밀번호를 스캔하는 것이 좋습니다. Feb 20, 2024 pm 01:42 PM

Wi-Fi 비밀번호 QR 코드를 표시하는 방법은 3초 안에 WeChat에서 Wi-Fi 비밀번호를 스캔하는 것이 좋습니다.

삼성은 마이크로소프트의 MR 헤드셋에 디스플레이를 제공할 예정이며, 해당 장치는 더 가볍고 선명한 디스플레이를 가질 것으로 예상됩니다. 삼성은 마이크로소프트의 MR 헤드셋에 디스플레이를 제공할 예정이며, 해당 장치는 더 가볍고 선명한 디스플레이를 가질 것으로 예상됩니다. Aug 10, 2024 pm 09:45 PM

삼성은 마이크로소프트의 MR 헤드셋에 디스플레이를 제공할 예정이며, 해당 장치는 더 가볍고 선명한 디스플레이를 가질 것으로 예상됩니다.

Linux에서 현재 디렉토리를 확인하는 방법은 무엇입니까? Linux에서 현재 디렉토리를 확인하는 방법은 무엇입니까? Feb 23, 2024 pm 05:54 PM

Linux에서 현재 디렉토리를 확인하는 방법은 무엇입니까?

See all articles