1.CSS 상자 모델 (박스 모델)
모든 HTML 요소는 CSS의 박스로 간주 될 수있다 "박스 모델은"디자인과 레이아웃에 사용되는 용어입니다.
: 상기 CSS 박스 모델의 성격에 HTML 요소를 둘러싸는 박스 패키지가 마진 (여백), 경계 (국경), 패딩 (패딩), 실제 내용 (컨텐츠) 네 개의 속성.
카트리지 모델은 요소의 경계 주위에 배치되어 우리에게 다른 요소와 요소 사이의 공간을 할 수 있습니다.
밤나무 :
< 버튼 스타일 = "여백 : 10px; 패딩 : 10px; 국경 : 빨간색으로 2 픽셀, 폭 : 70 픽셀;" >这是버튼 </ 버튼 >
도면으로부터 알 수있는 바와 같이 : 푸른 부분 (46 34.400 X) 버튼 콘텐츠 패딩 녹색, 황색은 어두운 황색 마진, 경계이다.
3.W3C 상자 모델 (표준 박스 모델) 및 IE 박스 모델 (이상한 상자 모델)
W3C 박스 모델 (표준 박스 모델)
W3C의 사양에 따라, 차지하는 공간 원소 함량이 폭 속성으로 설정하고, 주변 패딩 및 경계 값의 함량이 더 계산된다 , 즉 표준 모드의 박스 모델 너비 / 높이의 상자 실제 콘텐츠 (콘텐츠) = 카세트 전체 폭 / 높이 = 너비 / 높이 + 패딩 + 테두리 우리는 너비 / 높이 설정 + 마진.
.box {
폭 : 200 픽셀;
높이 : 200 픽셀;
테두리 : 검은 색을 20 픽셀;
패딩 : 50 픽셀;
여백 : 50 픽셀;
}
상자 모델 IE ()
이 모드에서는, 폭 특성은 브라우저 컨텐트의 폭이 있지만, 내측 가장자리 테두리 콘텐츠의 폭의 합이 아닌 즉, 카트리지 모델 모드 쿼크; 상자 (내용) + 폭 + 패딩 패딩 테두리 폭 = 우리의 경계 설정 (신장도), 전체 박스 너비 / 높이 = 너비 / 높이 + 마진 = 광역 콘텐츠 폭
.box {
폭 : 200 픽셀;
높이 : 200 픽셀;
테두리 : 검은 색을 20 픽셀;
패딩 : 50 픽셀;
여백 : 50 픽셀;
}
4 아래의 두 가지 모드의 스타일과 호환성 문제를 해결하는 방법
그것은 지정된 폭 요소에 패딩을 추가 할 수 있지만 부모 요소와 자식 요소에 마진이나 패딩을 추가하려고하지 않는 것이 좋습니다.
박스 모델의 유형을 지정 5.CSS3
상자 크기 조정 부동산 것은이 지역의 특정 요소와 일치하는 특정 방법을 정의 할 수 있습니다.
박스 크기 : 콘텐츠 상자 // 폭과 높이가 각각 박스 요소의 콘텐츠에 적용. 폭과 높이 외측 가장자리 테두리 요소를 도면.
박스 크기 : 경계 박스 // 요소 세트는 하우징 부재의 테두리의 폭과 높이를 결정한다. 요소가 설정된 폭 및 높이에 대해 그려 즉, 패딩 및 경계가 지정되어있다. 설정된 폭과 높이에서 감산함으로써, 각각 테두리 패딩 내용의 폭과 높이를 얻을 수있다.
박스 크기 : 상속; 값 상자 사이징 부모 요소 특성 // 소정 상속한다.
그 상자 크기 조정 속성은 W3C 박스 모델 (표준 박스 모델) IE (이상한 상자 모델)에 대한, 경계 박스 박스 모델로 지정된 박스 모델, 컨텐츠 상자의 유형을 지정합니다.