기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

상자 모델의 속성

심

padding 요소 콘텐츠와 테두리 사이의 간격을 제어하는 ​​데 사용되며 요소의 각 측면(상단, 오른쪽, 하단, 왼쪽)에 대해 개별적으로 설정할 수 있습니다. 패딩 단위는 픽셀(px), 백분율(%) 등이 될 수 있습니다.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

국경

border 테두리의 너비, 스타일, 색상을 포함하여 요소의 테두리를 설정하는 데 사용됩니다.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

크기 속성

너비

width 요소의 너비를 설정하는 데 사용됩니다. 단위는 픽셀(px), 백분율(%), 뷰포트 너비 단위(vw) 등이 될 수 있습니다.width 패딩, 테두리, 여백을 제외한 콘텐츠 영역의 너비만 설정합니다.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

키

height 요소의 높이를 설정하는 데 사용됩니다. 단위는 픽셀(px), 백분율(%), 뷰포트 높이 단위(vh) 등이 될 수 있습니다.height 패딩, 테두리, 여백을 제외한 콘텐츠 영역의 높이만 설정합니다.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

레이아웃 속성

표시하다

display 속성은 요소의 표시 유형을 정의하는 데 사용됩니다. 일반적인 값은 다음과 같습니다.

• block: 블록 수준 요소는 상위 컨테이너의 전체 너비를 차지하며 기본적으로 래핑됩니다.
• inline: 인라인 요소는 콘텐츠의 너비만 차지하며 줄 바꿈되지 않습니다.
• inline-block: 인라인 블록 수준 요소는 인라인 요소처럼 배열되지만 너비와 높이를 설정할 수 있습니다.
• none: 숨겨진 요소는 페이지에 나타나지 않으며 공간을 차지하지 않습니다.
• flex: 유연한 상자 레이아웃을 활성화하고 하위 요소를 한 줄로 정렬합니다.
• grid: 그리드 레이아웃을 활성화하여 그리드에 하위 요소를 정렬합니다.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

개요

결합하여 padding、border、width、height 그리고display 및 기타 속성을 사용하여 요소의 크기, 간격 및 레이아웃을 유연하게 제어할 수 있습니다. 이러한 속성은 반응성이 뛰어나고 아름다운 웹 페이지를 구축하기 위한 기초입니다. 다음은 이러한 속성을 함께 사용하여 패딩, 테두리, 특정 너비 및 높이가 있는 블록 수준 요소를 만드는 방법을 보여주는 포괄적인 예입니다.

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

이 예에서는.box 요소는 너비가 300픽셀, 높이가 150픽셀이고 패딩이 20픽셀이고 검정색 테두리가 5픽셀인 블록 수준 요소로 설정됩니다. 이 설정을 사용하면 요소의 콘텐츠와 테두리 사이에 충분한 공간이 있고 테두리는 요소의 외부 경계를 명확하게 정의합니다.

이 설명이 도움이 되기를 바랍니다. 추가 질문이 있거나 더 많은 예시가 필요하면 알려주시기 바랍니다.