레이아웃이란 무엇입니까? 브라우저는 요소를 올바른 위치에 올바른 크기로 배치합니다.
레이아웃: 요소를 배치하는 모드입니다.
요소의 크기와 위치에 영향을 미치는 CSS 속성: 표시 위치 부동 소수점 플렉스
display
요소의 표시 모드 설정 , 크기 및 위치를 포함하여 표시 값은 다음과 같습니다.
block
inline
inline-block
none
디스플레이 : 블록
블록 요소는 "블록 수준 요소"라고도 합니다
디스플레이 : 인라인
display: 선 특성:
1. 기본 너비는 콘텐츠 너비입니다.
2. 너비와 높이는 설정할 수 없습니다. 라인 레벨 요소는 설정할 수 없습니다
3. 피어 표시. 이전 요소와 후속 요소가 모두 display:inline(행 수준 요소)인 경우 동일한 행에 표시됩니다. 요소 내부에 줄을 감쌀 수 있습니다.
기본 표시: 인라인 요소span , a , label, cite , em, …
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display_inline</title>
<style type="text/css">
.sample{
background-color: pink;
}
/* 行级元素设置宽高无效 */
.sample{
width: 200px;
height: 200px;
}
/* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
em{
display: block;
}
</style>
</head>
<body>
<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
