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]

---

여백

- 백분율을 사용하는 경우 계산된 값은 상위 요소의 너비 값(높이 아님)을 기준으로 합니다. 마진 상위라도!

1. 
   

   border
- 지정되지 않은 값은 기본값을 사용합니다. 예:

2. { border: solid 1px dotted;
     border: 1px;
   }

   여기서 두 번째 테두리 설정은 첫 번째 테두리 설정을 재정의합니다. 두 번째 기사에서는 테두리 스타일이 설정되지 않았고 기본값은 없음이므로 테두리가 없습니다.
   

[플로팅 및 위치 지정]

---

부동:

부동 요소의 여백은 병합되지 않습니다.

1. 비대체 요소를 부동으로 만들려면 너비를 지정해야 합니다. 그렇지 않으면 브라우저에서 지정한 최소 너비에 따라 부동됩니다.

2. 부동 요소는 블록을 생성합니다. 레벨 상자, 요소 자체가 무엇인지에 관계없이
3. 플로팅된 요소의 상단은 상위 요소 또는 이전의 모든 플로팅된 요소의 상단보다 높을 수 없습니다. >
   플로팅 요소가 문서 흐름의 요소와 겹칠 경우:
(1) 블록 수준 요소인 경우 해당 내용은 플로팅 요소 위에 있고 테두리와 배경은 아래
4. (2) 인라인 요소인 경우 내용, 테두리, 배경이 모두 부동 요소입니다. 즉, 덮어쓰이지 않습니다.

   이는 문서 흐름에 요소가 나타나는 순서와는 아무런 관련이 없습니다.

5. 플로팅 요소는 모든 플로팅 하위 요소를 포함해야 합니다.
   

6. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

7. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

8. 固定定位
     *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]

---

여백

- 백분율을 사용하는 경우 계산된 값은 상위 요소의 너비 값(높이 아님)을 기준으로 합니다. 마진 상위라도!

1. 
   

   border
- 지정되지 않은 값은 기본값을 사용합니다. 예:

2. { border: solid 1px dotted;
     border: 1px;
   }

   여기서 두 번째 테두리 설정은 첫 번째 테두리 설정을 재정의합니다. 두 번째 기사에서는 테두리 스타일이 설정되지 않았고 기본값은 없음이므로 테두리가 없습니다.
   

[플로팅 및 위치 지정]

---

부동:

부동 요소의 여백은 병합되지 않습니다.

1. 비대체 요소를 부동으로 만들려면 너비를 지정해야 합니다. 그렇지 않으면 브라우저에서 지정한 최소 너비에 따라 부동됩니다.

2. 부동 요소는 블록을 생성합니다. 레벨 상자, 요소 자체가 무엇인지에 관계없이
3. 플로팅된 요소의 상단은 상위 요소 또는 이전의 모든 플로팅된 요소의 상단보다 높을 수 없습니다. >
   플로팅 요소가 문서 흐름의 요소와 겹칠 경우:
(1) 블록 수준 요소인 경우 해당 내용은 플로팅 요소 위에 있고 테두리와 배경은 아래
4. (2) 인라인 요소인 경우 내용, 테두리, 배경이 모두 부동 요소입니다. 즉, 덮어쓰이지 않습니다.

   이는 문서 흐름에 요소가 나타나는 순서와는 아무런 관련이 없습니다.

5. 플로팅 요소는 모든 플로팅 하위 요소를 포함해야 합니다.
   

6. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

7. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

8. 固定定位
     *right的值总是等于－left，bottom的值总是等于－top。

更多css属性总结 相关文章请关注PHP中文网！