CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동
CSS 레이아웃 속성: 표시, 위치 및 부동
CSS는 웹 페이지의 스타일을 제어하는 데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃을 디자인할 때 레이아웃 속성은 매우 중요합니다. CSS는 다양한 레이아웃 속성을 제공하며 가장 일반적으로 사용되는 속성은 표시, 위치 및 부동입니다. 이 기사에서는 이러한 세 가지 레이아웃 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.
- display attribute
디스플레이 속성은 요소의 표시 유형을 지정하는 데 사용됩니다. 일반적인 표시 속성 값은 다음과 같습니다:
1.1.block
블록 요소는 전용 줄을 차지하고 항상 새 줄부터 표시를 시작하며 상위 요소의 너비를 채웁니다. 예를 들어,
div { display: block; }
1.2. inline
인라인 요소는 그 자체로 한 줄을 차지하지 않고 필요한 공간만 차지합니다. 예를 들어, 요소는 일반적인 인라인 요소입니다.
span { display: inline; }
1.3. inline-block
inline-block 요소는 행을 차지하지 않지만 너비와 높이를 설정할 수 있습니다. 예를 들어, 요소는 일반적인 인라인 블록 요소입니다.
img { display: inline-block; }
1.4. none
none 요소는 표시되지 않으며 문서 흐름에서 제거됩니다. 예를 들어, display: none을 설정하여 요소를 숨길 수 있습니다.
.hidden { display: none; }
- 위치 속성
위치 속성은 요소의 위치를 지정하는 데 사용됩니다. 일반적인 위치 속성 값은 다음과 같습니다.
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; }
- float attribute
float 속성은 요소가 부동하는 방식을 지정하는 데 사용됩니다. 요소가 부동으로 설정되면 일반 문서 흐름에서 제거되고 가능한 한 왼쪽이나 오른쪽으로 부동됩니다. 다른 요소는 부동 요소 주위에 배치됩니다.
img { float: left; }
위는 디스플레이, 위치 및 부동의 세 가지 일반적인 레이아웃 속성에 대한 소개 및 코드 예제입니다. 실제로 웹 페이지 레이아웃 디자인을 달성하기 위해 특정 요구 사항에 따라 사용할 레이아웃 속성을 선택할 수 있습니다. 이 글이 독자들에게 CSS 레이아웃에 대한 도움을 줄 수 있기를 바랍니다.
위 내용은 CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

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

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

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

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

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

뜨거운 주제











1. 먼저 휴대폰에서 [검색] 앱을 열고 장치 인터페이스의 목록에서 장치를 선택합니다. 2. 그러면 위치를 확인하고 해당 경로를 클릭하여 해당 경로로 이동할 수 있습니다.

데스크탑 레이아웃이 잠겨 있으면 어떻게 됩니까? 컴퓨터를 사용할 때 데스크탑 레이아웃이 잠기는 상황이 발생할 수 있습니다. 이 문제는 데스크탑 아이콘의 위치를 자유롭게 조정하거나 데스크탑 배경을 변경할 수 없음을 의미합니다. 그렇다면 데스크탑 레이아웃이 잠겨 있다는 메시지가 나타나면 정확히 무슨 일이 일어나고 있는 걸까요? 1. 데스크탑 레이아웃 및 잠금 기능 이해 먼저 데스크탑 레이아웃과 데스크탑 잠금의 두 가지 개념을 이해해야 합니다. 데스크탑 레이아웃이란 바로가기, 폴더, 위젯 등 데스크탑의 다양한 요소를 배열하는 것을 말합니다. 우리는 자유로울 수 있어

원격 데스크톱 연결을 사용하는 사용자가 많습니다. 사용 시 상대방의 작업 표시줄이 표시되지 않는 등 몇 가지 사소한 문제가 발생합니다. 실제로는 상대방의 설정 문제일 가능성이 높습니다. 솔루션. 원격 데스크톱 연결 중에 상대방의 작업 표시줄을 표시하는 방법: 1. 먼저 "설정"을 클릭합니다. 2. 그런 다음 "개인 설정"을 엽니다. 3. 그런 다음 왼쪽에서 "작업 표시줄"을 선택합니다. 4. 그림에서 작업 표시줄 숨기기 옵션을 끕니다.

1. 클릭하여 휴대폰에 Amap 지도 소프트웨어를 입력하세요. 2. 오른쪽 하단에 있는 내를 클릭하세요. 3. 클릭하시면 가족지도에 입장하실 수 있습니다. 4. 내 가족 지도 만들기를 클릭하세요. 5. 생성이 완료되면 초대코드가 나타나며, 다른 휴대폰과 공유할 수 있습니다.

Linux 시스템에서는 pwd 명령을 사용하여 현재 경로를 표시할 수 있습니다. pwd 명령은 PrintWorkingDirectory의 약어로 현재 작업 디렉터리의 경로를 표시하는 데 사용됩니다. 현재 경로를 표시하려면 터미널에 다음 명령을 입력하십시오. pwd 이 명령을 실행하면 터미널에 /home/user/Documents와 같은 현재 작업 디렉터리의 전체 경로가 표시됩니다. 또한 몇 가지 다른 옵션을 사용하여 pwd 명령의 기능을 향상할 수 있습니다. 예를 들어 -P 옵션은 다음을 표시할 수 있습니다.

우리 모두는 Taku APP가 매우 신뢰할 수 있는 채팅 및 소셜 플랫폼이라는 것을 분명히 알고 있습니다. 이제 모든 사람이 온라인으로 친구를 사귈 수 있습니다. 여기에서 친구를 사귀는 방법 중 일부는 주로 위치에 따라 친구를 사귈 수 있도록 해줍니다. 결국, 자동으로 귀하의 현재 위치 정보를 찾아주고 같은 도시에 있는 서로 가까운 친구들과 더 잘 연결해 주므로 모든 사람이 더 쉽게 채팅하고 여러 번 특별함을 느낄 수 있습니다. 다른 곳에서 더 많은 친구들을 알아가기 위해 누구나 주소를 수정하고 싶은 생각은 있지만, 위치 정보를 수정하는 방법을 모르니 매우 고민하기 때문에 이 사이트의 편집자는 이렇게 말합니다. 또한 특정 항목을 수집했습니다.

WIFI 비밀번호는 자주 입력할 필요가 없기 때문에 잊어버리는 것이 일반적입니다. 오늘은 3초 안에 완료할 수 있는 가장 간단한 WIFI 비밀번호 찾는 방법을 알려드리겠습니다. WIFI 비밀번호를 확인하려면 WeChat을 사용하여 스캔하세요. 이 방법의 전제는 WIFI에 연결할 수 있는 휴대폰이 있어야 한다는 것입니다. 자, 튜토리얼을 시작해 보겠습니다. 1단계. 전화기를 입력하고 전화기 상단을 아래로 당겨서 상태 표시줄과 WIFI 아이콘을 불러옵니다. 2단계. WIFI 아이콘을 길게 눌러 WLAN 설정으로 들어갑니다. WIFI 아이콘을 누릅니다. 3단계. 연결됨을 클릭하고 집의 WIFI 이름을 입력하고 비밀번호 공유를 클릭하면 QR 코드가 나타납니다. WIFI 비밀번호 공유 4단계, 스크린샷을 찍어 이 QR 코드를 저장합니다. , 바탕 화면의 WeChat 아이콘을 길게 누르고 스캔을 클릭하세요.

현대 사회에서 휴대폰은 우리 삶에 없어서는 안 될 필수품이 되었습니다. 잘 알려진 스마트폰 브랜드인 Huawei 휴대폰은 사용자들에게 깊은 사랑을 받고 있습니다. 그러나 휴대폰의 대중화와 사용 빈도의 증가로 인해 휴대폰을 분실하는 경우가 많습니다. 휴대폰을 분실하면 우리는 불안감과 혼란스러움을 느끼는 경향이 있습니다. 그렇다면 불행하게도 Huawei 휴대폰을 분실한 경우 어떻게 신속하게 위치를 찾을 수 있습니까? 1단계: 휴대폰 위치 확인 기능을 사용하십시오. Huawei 휴대폰에는 강력한 위치 확인 기능이 내장되어 있습니다. 사용자는 휴대폰 설정에서 "보안" 옵션을 사용할 수 있습니다.
