CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동
CSS 레이아웃 속성: 표시, 위치 및 부동
CSS는 웹 페이지의 스타일을 제어하는 데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃을 디자인할 때 레이아웃 속성은 매우 중요합니다. CSS는 다양한 레이아웃 속성을 제공하며 가장 일반적으로 사용되는 속성은 표시, 위치 및 부동입니다. 이 기사에서는 이러한 세 가지 레이아웃 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.
- display attribute
디스플레이 속성은 요소의 표시 유형을 지정하는 데 사용됩니다. 일반적인 표시 속성 값은 다음과 같습니다:
1.1.block
블록 요소는 전용 줄을 차지하고 항상 새 줄부터 표시를 시작하며 상위 요소의 너비를 채웁니다. 예를 들어,
1 2 3 |
|
1.2. inline
인라인 요소는 그 자체로 한 줄을 차지하지 않고 필요한 공간만 차지합니다. 예를 들어, 요소는 일반적인 인라인 요소입니다.
1 2 3 |
|
1.3. inline-block
inline-block 요소는 행을 차지하지 않지만 너비와 높이를 설정할 수 있습니다. 예를 들어, 요소는 일반적인 인라인 블록 요소입니다.
1 2 3 |
|
1.4. none
none 요소는 표시되지 않으며 문서 흐름에서 제거됩니다. 예를 들어, display: none을 설정하여 요소를 숨길 수 있습니다.
1 2 3 |
|
- 위치 속성
위치 속성은 요소의 위치를 지정하는 데 사용됩니다. 일반적인 위치 속성 값은 다음과 같습니다.
2.1. static
static이 기본 위치 지정 방법이며 요소는 문서 흐름 순서에 따라 배치됩니다.
1 2 3 |
|
2.2.relative
relative 자체 초기 위치를 기준으로 한 위치입니다. 상단, 하단, 왼쪽, 오른쪽 속성을 사용하여 요소의 위치를 조정할 수 있습니다.
1 2 3 4 5 |
|
2.3. 절대
절대값은 상위 요소를 기준으로 위치가 지정되거나 위치 지정 속성이 있는 가장 가까운 조상 요소를 기준으로 위치가 지정됩니다(위치는 정적이 아님).
1 2 3 4 5 6 |
|
2.4.fixed
fixed는 브라우저 창을 기준으로 위치가 지정되며 스크롤 막대가 스크롤될 때 위치가 변경되지 않습니다.
1 2 3 4 5 |
|
- float attribute
float 속성은 요소가 부동하는 방식을 지정하는 데 사용됩니다. 요소가 부동으로 설정되면 일반 문서 흐름에서 제거되고 가능한 한 왼쪽이나 오른쪽으로 부동됩니다. 다른 요소는 부동 요소 주위에 배치됩니다.
1 2 3 |
|
위는 디스플레이, 위치 및 부동의 세 가지 일반적인 레이아웃 속성에 대한 소개 및 코드 예제입니다. 실제로 웹 페이지 레이아웃 디자인을 달성하기 위해 특정 요구 사항에 따라 사용할 레이아웃 속성을 선택할 수 있습니다. 이 글이 독자들에게 CSS 레이아웃에 대한 도움을 줄 수 있기를 바랍니다.
위 내용은 CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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