- 블록 수준 요소에만 적용되는 속성
너비, 높이(이 두 가지는 요소를 대체하는 데 사용할 수 있음)
text—align, text— 들여쓰기, 수직 —정렬(테이블 셀 및 입력/img와 같은 대체 요소에도 사용할 수 있음)
배경 위치(백분율과 절대값의 차이에 유의하세요. 이 속성은 타일링 효과에 영향을 미칩니다)
[기본 시각적 서식]
1. 상자 모델 :
- 배경에는 콘텐츠 상자, 내부 여백 및 테두리가 포함됩니다. 투명, 부모 요소 표시
2. 수평 속성 :
- 왼쪽(오른쪽) 여백, 왼쪽(오른쪽) ) 하위 요소의 테두리 및 콘텐츠 상자 너비 값의 합은 상위 요소의 콘텐츠 상자 너비와 같아야 합니다.
- margin-left, margin-right, 너비 중 2개가 있는 경우; (이 세 가지 값만 자동으로 설정할 수 있음) 특정 값이 설정되고 나머지 값은 자동이며, 자동으로 설정된 속성 값은 상위 요소의 너비를 채우기 위해 자동으로 계산됩니다.
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
로그인 후 복사
로그인 후 복사
- 상위 요소의 패딩은 하위 요소의 여백과 겹칩니다.
- 너비가 자동으로 설정된 경우 대체되지 않은 요소의 기본 너비는 해당 내용에 따라 결정됩니다. (예: img) 대체된 요소의 경우 해당 값은 원래 너비가 됩니다. 너비만 설정된 경우 높이는 비례적으로 변경되며 그 반대도 마찬가지입니다.
3. 세로 속성 :
은 가로 속성과 유사하지만 차이점/참고는 다음과 같습니다.
- margin-top 또는 margin-bottom인 경우 자동으로 설정하면 기본값이 0이 되므로 설정이 특정 값으로 표시되지 않는 한 세로로 가운데에 맞춰질 수 없습니다.
- 하위 요소의 높이를 설정하기 위해 백분율을 사용할 때 높이 값이 상위 요소가 명시적으로 설정되지 않은 경우 하위 요소의 높이는 다음과 같습니다. 기본값은 자동입니다.
- 상위 요소에 하위 블록 수준 요소만 포함된 경우 상위 요소의 높이는 다음을 포함하지 않습니다. 상위 요소에 테두리나 패딩이 없는 경우 하위 요소의 여백! ! 왜냐면 세로방향의 여백이 겹치기 때문이죠. 이러한 관점에서 겹치는 것을 방지하려면 테두리와 패딩을 사용하여 인접한 여백을 구분해야 합니다.
인라인 요소 :
- line-height (line box height ) 대체된 요소, 해당 콘텐츠의 높이. 따라서 대체된 요소에는 줄 간격(줄 높이 - 글꼴 크기)이 없습니다. 대체되지 않은 요소의 경우 콘텐츠 상자의 높이에 줄 간격을 더한 값입니다. 텍스트만 포함하는 줄의 경우 행간 간격은 행 높이, 글꼴 크기, 수직 정렬만 변경할 수 있습니다.
비대체 요소:
- line-height 값이 글꼴 크기보다 작은 경우 텍스트 겹침이 발생할 수 있으므로 이러한 현상을 방지하려면 line-을 설정하십시오. height는 1em(글꼴 크기를 설정해야 함) 또는 1(글꼴 크기를 기준으로 한 배율 인수)입니다. 또한 명시적으로 정의하지 않는 한 리터럴 값이 아닌 상위 요소의 계산된 값을 상속합니다. >
- 인라인 요소의 내용 여백, 여백, 테두리는 줄 높이에 영향을 주지 않습니다. 외부 여백은 위쪽과 아래쪽이 아닌 왼쪽과 오른쪽에만 유효합니다. 그러나 양수 패딩과 배경이 있는 경우 인접한 행을 덮을 수 있습니다(여전히 행 높이와 레이아웃, 즉 행에는 영향을 미치지 않습니다). 패딩이 설정된 경우 높이는 변경되지 않습니다) height)
대체 요소:
- 인라인 요소의 내부 여백, 외부 여백 및 테두리가 줄에 영향을 미칩니다. 높이, 위쪽 및 아래쪽 여백이 유효합니다.
- img의 높이 값을 설정하면 줄 높이에 영향을 주지만, 수직 정렬과 같은 일부 속성은 계산에 줄 높이의 유효 값을 사용합니다. - 블록 수준 요소 또는 테이블 셀의 유일한 하위 요소인 대체 요소가 기준선에 배치되는 경우(예: p의 img) 해결 방법: 음수 여백을 사용하여 아래로 내리거나 디스플레이를 차단으로 설정하여 라인 상자 생성을 방지하세요.
4. 기타
- 표시 속성:
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
* 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
* 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
로그인 후 복사
로그인 후 복사
[border, margin, padding]
여백
- 백분율을 사용하는 경우 계산된 값은 상위 요소의 너비 값(높이 아님)을 기준으로 합니다. 마진 상위라도! -
border - 지정되지 않은 값은 기본값을 사용합니다. 예:-
{ border: solid 1px dotted;
border: 1px;
}로그인 후 복사
로그인 후 복사
여기서 두 번째 테두리 설정은 첫 번째 테두리 설정을 재정의합니다. 두 번째 기사에서는 테두리 스타일이 설정되지 않았고 기본값은 없음이므로 테두리가 없습니다.
[플로팅 및 위치 지정]
부동:
부동 요소의 여백은 병합되지 않습니다.
-
비대체 요소를 부동으로 만들려면 너비를 지정해야 합니다. 그렇지 않으면 브라우저에서 지정한 최소 너비에 따라 부동됩니다.
-
부동 요소는 블록을 생성합니다. 레벨 상자, 요소 자체가 무엇인지에 관계없이
- 플로팅된 요소의 상단은 상위 요소 또는 이전의 모든 플로팅된 요소의 상단보다 높을 수 없습니다. >플로팅 요소가 문서 흐름의 요소와 겹칠 경우:
(1) 블록 수준 요소인 경우 해당 내용은 플로팅 요소 위에 있고 테두리와 배경은 아래 - (2) 인라인 요소인 경우 내용, 테두리, 배경이 모두 부동 요소입니다. 즉, 덮어쓰이지 않습니다.
이는 문서 흐름에 요소가 나타나는 순서와는 아무런 관련이 없습니다.
플로팅 요소는 모든 플로팅 하위 요소를 포함해야 합니다.
-
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
-
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
持续更新中。。。。。
本文参考 《css权威指南》
- 블록 수준 요소에만 적용되는 속성
너비, 높이(이 두 가지는 요소를 대체하는 데 사용할 수 있음)
text—align, text— 들여쓰기, 수직 —정렬(테이블 셀 및 입력/img와 같은 대체 요소에도 사용할 수 있음)
배경 위치(백분율과 절대값의 차이에 유의하세요. 이 속성은 타일링 효과에 영향을 미칩니다)
[기본 시각적 서식]
1. 상자 모델 :
- 배경에는 콘텐츠 상자, 내부 여백 및 테두리가 포함됩니다. 투명, 부모 요소 표시
2. 수평 속성 :
- 왼쪽(오른쪽) 여백, 왼쪽(오른쪽) ) 하위 요소의 테두리 및 콘텐츠 상자 너비 값의 합은 상위 요소의 콘텐츠 상자 너비와 같아야 합니다.
- margin-left, margin-right, 너비 중 2개가 있는 경우; (이 세 가지 값만 자동으로 설정할 수 있음) 특정 값이 설정되고 나머지 값은 자동이며, 자동으로 설정된 속성 값은 상위 요소의 너비를 채우기 위해 자동으로 계산됩니다.
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
로그인 후 복사
로그인 후 복사
- 상위 요소의 패딩은 하위 요소의 여백과 겹칩니다.
- 너비가 자동으로 설정된 경우 대체되지 않은 요소의 기본 너비는 해당 내용에 따라 결정됩니다. (예: img) 대체된 요소의 경우 해당 값은 원래 너비가 됩니다. 너비만 설정된 경우 높이는 비례적으로 변경되며 그 반대도 마찬가지입니다.
3. 세로 속성 :
은 가로 속성과 유사하지만 차이점/참고는 다음과 같습니다.
- margin-top 또는 margin-bottom인 경우 자동으로 설정하면 기본값이 0이 되므로 설정이 특정 값으로 표시되지 않는 한 세로로 가운데에 맞춰질 수 없습니다.
- 하위 요소의 높이를 설정하기 위해 백분율을 사용할 때 높이 값이 상위 요소가 명시적으로 설정되지 않은 경우 하위 요소의 높이는 다음과 같습니다. 기본값은 자동입니다.
- 상위 요소에 하위 블록 수준 요소만 포함된 경우 상위 요소의 높이는 다음을 포함하지 않습니다. 상위 요소에 테두리나 패딩이 없는 경우 하위 요소의 여백! ! 왜냐면 세로방향의 여백이 겹치기 때문이죠. 이러한 관점에서 겹치는 것을 방지하려면 테두리와 패딩을 사용하여 인접한 여백을 구분해야 합니다.
인라인 요소 :
- line-height (line box height ) 대체된 요소, 해당 콘텐츠의 높이. 따라서 대체된 요소에는 줄 간격(줄 높이 - 글꼴 크기)이 없습니다. 대체되지 않은 요소의 경우 콘텐츠 상자의 높이에 줄 간격을 더한 값입니다. 텍스트만 포함하는 줄의 경우 행간 간격은 행 높이, 글꼴 크기, 수직 정렬만 변경할 수 있습니다.
비대체 요소:
- line-height 값이 글꼴 크기보다 작은 경우 텍스트 겹침이 발생할 수 있으므로 이러한 현상을 방지하려면 line-을 설정하십시오. height는 1em(글꼴 크기를 설정해야 함) 또는 1(글꼴 크기를 기준으로 한 배율 인수)입니다. 또한 명시적으로 정의하지 않는 한 리터럴 값이 아닌 상위 요소의 계산된 값을 상속합니다. >
- 인라인 요소의 내용 여백, 여백, 테두리는 줄 높이에 영향을 주지 않습니다. 외부 여백은 위쪽과 아래쪽이 아닌 왼쪽과 오른쪽에만 유효합니다. 그러나 양수 패딩과 배경이 있는 경우 인접한 행을 덮을 수 있습니다(여전히 행 높이와 레이아웃, 즉 행에는 영향을 미치지 않습니다). 패딩이 설정된 경우 높이는 변경되지 않습니다) height)
대체 요소:
- 인라인 요소의 내부 여백, 외부 여백 및 테두리가 줄에 영향을 미칩니다. 높이, 위쪽 및 아래쪽 여백이 유효합니다.
- img의 높이 값을 설정하면 줄 높이에 영향을 주지만, 수직 정렬과 같은 일부 속성은 계산에 줄 높이의 유효 값을 사용합니다. - 블록 수준 요소 또는 테이블 셀의 유일한 하위 요소인 대체 요소가 기준선에 배치되는 경우(예: p의 img) 해결 방법: 음수 여백을 사용하여 아래로 내리거나 디스플레이를 차단으로 설정하여 라인 상자 생성을 방지하세요.
4. 기타
- 표시 속성:
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
* 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
* 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
로그인 후 복사
로그인 후 복사
[border, margin, padding]
여백
- 백분율을 사용하는 경우 계산된 값은 상위 요소의 너비 값(높이 아님)을 기준으로 합니다. 마진 상위라도! -
border - 지정되지 않은 값은 기본값을 사용합니다. 예:-
{ border: solid 1px dotted;
border: 1px;
}로그인 후 복사
로그인 후 복사
여기서 두 번째 테두리 설정은 첫 번째 테두리 설정을 재정의합니다. 두 번째 기사에서는 테두리 스타일이 설정되지 않았고 기본값은 없음이므로 테두리가 없습니다.
[플로팅 및 위치 지정]
부동:
부동 요소의 여백은 병합되지 않습니다.
-
비대체 요소를 부동으로 만들려면 너비를 지정해야 합니다. 그렇지 않으면 브라우저에서 지정한 최소 너비에 따라 부동됩니다.
-
부동 요소는 블록을 생성합니다. 레벨 상자, 요소 자체가 무엇인지에 관계없이
- 플로팅된 요소의 상단은 상위 요소 또는 이전의 모든 플로팅된 요소의 상단보다 높을 수 없습니다. >플로팅 요소가 문서 흐름의 요소와 겹칠 경우:
(1) 블록 수준 요소인 경우 해당 내용은 플로팅 요소 위에 있고 테두리와 배경은 아래 - (2) 인라인 요소인 경우 내용, 테두리, 배경이 모두 부동 요소입니다. 즉, 덮어쓰이지 않습니다.
이는 문서 흐름에 요소가 나타나는 순서와는 아무런 관련이 없습니다.
플로팅 요소는 모든 플로팅 하위 요소를 포함해야 합니다.
-
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
-
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
更多css属性总结 相关文章请关注PHP中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
