HTML5 5일차 노트

CSS 속성

단락 속성

letter-spacing:10px; 단어 사이의 간격

word-spacing:1px(주로 영어에서 사용됨) 웹사이트)

text-transform:capitalize (각 단어의 첫 글자를 대문자로) 대문자 (모두 대문자) 소문자 (모두 소문자) (주로 영어 웹사이트에서 사용됨)

white-space :normal /nowrap(줄 바꿈 없음)

상자 모델

모든 태그는 상자로 처리됩니다.

블록 수준 요소를 큰 상자로 처리하고 요소는 다음과 같습니다. 작은 상자로 본

상자 모델의 구현은 어떤 부분으로 구성되어 있나요?

너비+높이(내용의 너비와 높이)+패딩(내부 여백/패딩)+테두리(테두리)+여백(외부 여백)

테두리:(테두리)

border-top:

border-bottom:

border-left:

border-right:

border-bottom: (하단 테두리)

border-bottom-style: 실선(실선) 점선(점선) 점선(점선) 이중(이중 실선) 테두리 선 스타일

border-bottom-color :red/ #fff;테두리 색상

border-bottom-width:3px;테두리 두께

border:3px solid red;

border:none/0 ;

border-top:none/0;

border-collapse:collapse(두꺼운 가장자리 제거)

padding: (패딩, 패딩, 패딩) 내용까지의 거리 테두리는 상대적으로

padding-top:

padding-left:

padding-right:

padding-bottom:

(패딩은 상자의 너비와 높이에 영향을 미칩니다)

패딩: 10px(상단, 하단, 왼쪽 및 오른쪽)

패딩: 10px 20px(상단, 하단, 왼쪽 및 오른쪽)

padding:10px 20px 30px ;(오른쪽 위, 아래) 왼쪽 = 오른쪽 "시계 방향 원칙을 따르세요"

padding: 10px 20px 30px 40px(오른쪽 위, 왼쪽 아래)

padding: 0 0 5px 0; (이렇게만 쓸 수 있음)

margin: (margins, padding) 레이블 사이의 거리
는

에 상대적입니다. 인라인 요소의 하단 여백은 구현할 수 없습니다

블록 레벨 요소의 상단 및 하단 여백은 누적될 수 없으며 최대값만 취할 수 있습니다

인라인 및 블록 모두 왼쪽 및 오른쪽 여백 -level 요소는 누적 값입니다

여백은 상자의 너비와 높이에 영향을 주지 않습니다

margin:10px(상단, 하단, 왼쪽 및 오른쪽)

margin: 10px 20px; (상단, 하단, 왼쪽 및 오른쪽)

여백:10px 20px 30px; (상단, 오른쪽, 하단) 왼쪽 = 오른쪽 "시계 방향 원칙을 따르세요》

여백: 10px 20px 30px 40px;(오른쪽 위, 왼쪽 아래)

여백: 0 0 5px 0; (이렇게만 쓸 수 있음)

상자 실제 크기:

너비: 너비 내용(너비) + 테두리(왼쪽 및 오른쪽) + 패딩((왼쪽 및 오른쪽) + 여백(왼쪽 및 오른쪽)

높이: 콘텐츠 높이(높이) + 테두리( 위쪽 및 아래쪽) + 패딩(상단 및 하단) + 여백(상단 및 하단)

여백 적용: 상위 요소의 중앙 정렬 방법으로 브라우저에서 상자를 중앙에 배치합니다.

margin:0 auto;

CSS3의 새로운 속성

box-sizing:border-box/content-box는 border 및 padding 값을 무시합니다

위 내용은 다섯번째 내용입니다 day of HTML5 Notes, more 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!