CSS 박스 모델 이해하기

HTML + CSS 박스 모델은 지식과 더 나은 타이포그래피, 페이지 레이아웃하기 위해이 중요한 개념의 이해의 핵심 기초입니다. 여기에 초보자를위한 유용한 그들의 축적 ^ _ ^ 요약 희망의 CSS 박스 모델에 대한 지식이다.

A, CSS 박스 모델의 개념

또한 박스 모델 (박스 모델)로 알려진 CSS CSS 박스 모델은 여러 요소의 요소 내용 (컨텐츠), 패딩 (패딩), 경계 (국경), 여백 (마진)가 포함되어 있습니다. 도표 :

경계선 (경계) 다음 블록 최도가 외부 프레임 부재 옆 요소의 실제 콘텐츠, 즉 소자 하우징이다 패딩 패딩, 그 최 외층은 마진 (마진) 전체를 구성이며 박스 모델. 우리는 보통 콘텐츠, 패딩, 테두리,이 범위, 배경 표시 영역을 설정합니다. 외측 한계 마진 투명하고, 주변의 다른 구성 요소를 차단하지 않는다.

그리고, 소자 폭은 프레임 요소 (요소) + 피치 값 + 좌측 가장자리 및 우측 가장자리 값 + 왼쪽 경계 폭의 좌우 마진 패딩 전체 폭 =;

높이 박스 소자 소자 (요소) + 상기 위쪽 여백과 아래쪽 여백 상부와 경계선의 상하 폭의 아래쪽 여백 값 + + 마진 값의 총 높이 =.

두, CSS 마진 병합 (오버레이)

때는 실전 마진 병합 같이 두 한계 값의 결합 된 높이의 외측에서 두 개의 수직 프레임 요소는, 더 높은 마진의 결합 발생 동일 수직으로 인접한 :

페이지가 때때로이 요소를 고려하는 실제 필요로 발생하므로 쉽게는 이해합니다. 아래와 같이 물론, 마진은 실제로 존재의 의미를 합병했다 :

에만 병합 스트림으로부터 수직 외측 하우징 블록 일반 문서 마진 발생 : 참고. 내부 상자 플로트 절대 위치 또는 거리의 경계 밖에서 병합되지 않는다.

CSS 리셋도 자주 사용됩니다

* { 
  여백 : 0 ; 
  패딩 : 0 ; 
}

세 개의 상자 크기 조정 속성 설명

가능성을해야합니다 때문에 박스 모델이 부동산뿐만 아니라 CSS 리셋에 그것을 소개하는 이유는, 속성은 사용자 인터페이스의 속성입니다 상자 크기 조정.

박스 크기 : 내용 상자 | 국경 박스 | 상속;

폭과 높이의 값은 상자 요소의 내용에 적용되도록 (1) 콘텐츠 상자는 기본값이 설정 될 수있다. 전용 콘텐츠를 포함하는 폭 상자.

　　즉, 전체 폭 = 마진 + 국경 + 패딩 + 폭

(2) 경계 상자는 너비 값은 실제 여백을 제외한 테두리 + + 패딩 요소의 전체 폭이다. 박스 테두리 + 패딩 + 콘텐츠있어서 품

　　　　즉, 전체 폭 = + 마진 폭

많은 CSS 프레임, 박스 모델의 계산 방법은 간단합니다.

(3) 상속 소정 값은 부모 요소 속성 상자 크기를 상속해야

경계 박스 사용에 :

1 100 % 폭 박스, 양쪽에서 원하는 간격은 비교적 양호한 이번에
2 좋은 글로벌 설정 테두리 상자, 먼저 직관적이며, 그것은 또 다시 간단한 계산 하였다 분배 그것은 또한 중요한 역할을 - 상자의 폭의 비율의 정상적인 사용의 테두리가 그래서.

넷째, 실제 개발 및 응용 프로그램은 작은 문제가 발생 모델에 따라 다름을 상자.

1 개 범위 밖 마진 (마진 아래쪽 여백 탑 및 국경 문제의 첫번째 하위 요소의 마지막 자식 요소)

예를 들어의 첫 번째 자식에 여백 탑 :

부모 요소는 시간의 여유 정상 값의 첫 번째 자식을 설정 테두리 국경이없는 경우, 마진 - 최고 값을 더한 부모 요소의 현상이있을 것, 네 가지 해결책이 있습니다 :

(1) 부모 요소 테두리에 테두리를 추가 (부작용)

(2) 상위 요소 세트 패딩 값 (부작용)

(3) 부모 요소 플로우 추가 : 숨김 (부작용)

(4) 부모 요소 미리 생성 된 컨텐츠를 추가. (권장)

네 번째 방법은, 예를 들어 :

.parent { 
     폭 : 500 픽셀; 
     높이 : 500 픽셀; 
     배경 색상 : 레드,       
} 
.parent : {전에 
     내용 : ""; 
     표시 : 테이블; 
} 

.child { 
     폭 : 200 픽셀; 
     높이 : 200 픽셀; 
     배경 색상 : 녹색; 
     여백 - 상단 : 50 픽셀; 
}

<DIV 클래스 = " 부모 " > 
    <DIV 클래스 = " 아이 " > </ DIV> 
</ DIV>

두 브라우저 사이의 박스 모델.

(1) UL 기본 태그는 모질라 패딩 값에, 만 여백 값 IE가 있습니다.

(2) 표준 IE 박스 모델과 모델 사이의 차이 :

　　상술 한 바와 표준 박스 모델이 모델은 더 많은 IE 상자 사이징 같다 : 경계 박스, 테두리의 폭과 상기 패딩의 내용. 템플릿의 문서 타입의 HTML을 증가 :이 솔루션은하는 것입니다.

박스 모델 삼각형 동영상 3

<DOCTYPE html로!> 
<HTML> 
  <HEAD> 
    <스타일> 
        .triangle { 
            폭 : 0 ; 
            키 : 0 ; 
            국경 : 100 픽셀 고체 투명; 
            국경 정상 : 100 픽셀 청색; / * 这里可以设置국경的위, 아래, 왼쪽, 오른쪽四个方向的三角* / 
        }
     </ 스타일> 
  </ head> 
  <body> 
    <div 클래스 = " 삼각형 " > </ DIV> 
  </ BODY> 
< / HTML>

페이지 결과를 보여줍니다 :

-----------------------

원래 링크 주소 : HTTPS : //www.cnblogs.com/clearsky/p/5696286.html

CSS 박스 모델 이해하기

추천