CSS 레이아웃 속성: 표시, 위치 및 부동
CSS는 웹 페이지의 스타일을 제어하는 데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃을 디자인할 때 레이아웃 속성은 매우 중요합니다. CSS는 다양한 레이아웃 속성을 제공하며 가장 일반적으로 사용되는 속성은 표시, 위치 및 부동입니다. 이 기사에서는 이러한 세 가지 레이아웃 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.
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;
}img {
float: left;
}위는 디스플레이, 위치 및 부동의 세 가지 일반적인 레이아웃 속성에 대한 소개 및 코드 예제입니다. 실제로 웹 페이지 레이아웃 디자인을 달성하기 위해 특정 요구 사항에 따라 사용할 레이아웃 속성을 선택할 수 있습니다. 이 글이 독자들에게 CSS 레이아웃에 대한 도움을 줄 수 있기를 바랍니다.
위 내용은 CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
