CSS 박스 모델과 그 응용

사실, 세 가지 모듈에 CSS : 상자 모델, 플로트, 위치, 나머지는 세부 정보입니다. 이 세 가지 부품을 필요로하는 경우는 매우 능숙 배워야한다.

소위 박스 모델은 컨테이너에 포함 된 내용입니다 직사각형 상자와 같은 HTML 페이지 요소입니다. 각 콘텐츠 요소는 직사각형, 패딩 (패딩), 경계 (경계)와 마진 (마진) 조성물로 구성된다.

페이지의 레이아웃의 특성을 통해 참조

페이지 레이아웃, 우리가 텍스트 안에 넣어하는 방법, 이미지, 아트 렌더링에 따라 우리에게 그것의 단정하고 질서있는 배열을 제공?

 

소비자가 구입하도록 우유, 어떻게 수송하는 것입니다?

 

우리는, 우리가 이중 라벨 박스 배운 인라인 요소는 우유와 유사한 텍스트로도 최대 적재 상자에 넣어 필요했다. 상자, 우리는 무료, 무료, 배치 할 수 있습니다.

즉, 페이지 레이아웃을 텍스트와 그래픽 등의 페이지 요소를, 등등, 상자 안에 넣어 상자를 넣고 CSS 프로세스를 사용 : 페이지 레이아웃의 특성을 참조하십시오. 우리의 어린 시절은 빌딩 블록을 가지고 노는 유사 전혀 훨씬 논리가없는 사실 CSS, 우리는 우리가 원하는 효과를 넣어 무료, 무료가 될 수 있습니다.

박스 모델 (박스 모델)

여기에 옛 즉 상자 모델 (IE6 이하) 건너 뛰기, 미안 해요, 난 IE5 브라우저를 보지 못했다.

첫째, 우리는 박스 모델에 무엇인지 이해하는지도 봐.

모든 문서 요소 (레이블) 직사각형 상자를 생성합니다, 우리는 페이지 레이아웃 문서 요소의 크기 다음 집계 공유의 위치를 설명 요소 상자 (요소 상자)이된다. 따라서, 각각의 경우는 크기와 위치뿐만 아니라 그것의 자신뿐만 아니라 다른 상자의 크기와 위치에 영향을 미칩니다.

박스 프레임 (테두리)

피부의 계층입니다 테두리입니다. 오렌지 껍질. . 자몽 껍질. . 오렌지 껍질. . .

구문 :

 국경 : 국경 폭 || 국경 스타일 || 국경 컬러

테두리 속성 - 테두리 스타일을 설정 (국경 스타일)

다음과 같이 스타일, 테두리 스타일은 페이지 프레임을 정의하는 데 사용됩니다, 속성 값이 사용됩니다 :

 없음 : 모든 국경을 (기본값) 무시 테두리가 폭 솔리드 : 하나의 실선 테두리 (가장 일반적으로 사용) 점선 : 점선으로 경계   점선 테두리 : 점선 이중 : 이중 실선 경계
 
 
 
 
 
 
 
 

박스 프레임 작성 요약 테이블

 

가는 선 테두리를 형성

이전에 배운 HTML 테이블 테두리 하나의 문장 CSS 함께 아름 다울 수있다, 매우 두꺼운입니다. CSS는 우리의 왕자님 (백설 공주)입니다, 우리가 정말 생각하자.

테이블 {국경 - 붕괴 : 붕괴;} 붕괴 단어 병합 수단

국경 - 붕괴 : 붕괴, 결합 된 경계를 나타냅니다.

둥근 모서리 (CSS3)

그 이후로, 우리의 세계뿐만 아니라 직사각형입니다. 반경 반경 (거리)

구문 :

 국경 반경 : 왼쪽 상단 오른쪽 상단 오른쪽 하단 모서리에 왼쪽 하단;

교실 케이스 :

<스타일> 
         DIV { 
             폭 : 200 픽셀, 
             높이 200 픽셀, 
             테두리 : 1 픽셀 고체 레드; 
         } 
         DIV : 아우 * /로부터 선택된 제 - 자식 {/ * 구조 의사 클래스 선택기 
             보더 RADIUS : 10px; / * 값이 4를 의미 아크 10px의 *의 동일한 코너하고 / 
         } 
         DIV : 어린이 제 N (2) { 
             / * 보더 RADIUS : 100 픽셀이 상기 폭과 높이의 절반은 원형 * /로 이동합니다 
             보더 RADIUS : 50 % / * 100 픽셀의 50 %가 원 * /로 절반 폭과 높이를 촬영한다 
         } 
         DIV : 어린이 N 번째 (3). { 
             보더 RADIUS : 10px 40px; / * 좌우 모서리가 10px 오른쪽 상단 왼쪽 하단 대각선 각도 40 * / 
         } 
         DIV : N 번째 하위 -. (4) {
         
             경계 반경 : 10px 40px 80 픽셀; / * 왼쪽 오른쪽 상단 왼쪽 하단 오른쪽 아래 10 80 * 40 / 
         } 
         DIV : 어린이 제 N {(5). 
             보더 RADIUS : 10px 40px 80 픽셀 100 픽셀; / * 10 오른쪽 상단 왼쪽 상단 40 하단 오른쪽 하단 80 * 100 /의 우측 하단 왼쪽 
         } 
         . (6) 어린이 제 N {DIV 
             :; 100 픽셀 경계 RADIUS   
             높이 100 픽셀을; 
         } 
         DIV : 어린이 제 N {(7). 
             보더 RADIUS : 0 100 픽셀을;   
         }    
         </ 스타일>

패딩 (패딩)

패딩 속성은 여백을 설정하는 데 사용됩니다. 그것은 테두리와 내용 사이의 거리를 의미한다.

패딩 탑 : 패딩

패딩 오른쪽 : 오른쪽 안쪽 여백

패딩 바닥 : 아래쪽 여백

패딩 왼쪽 : 왼쪽 여백

참고 : 몇 가지 수치 표현으로 뒤에 의미는 동일하지 않습니다.

 

 

 교실 케이스 :시나 탐색

 

 

여백 (여백)

마진 속성은 여백을 설정하는 데 사용됩니다. 설정 여백이 일반적으로 다른 빈 배치 할 수 없습니다, 요소 사이의 "차이"를 만들 것입니다.

여백 - 가기 : 여백에

마진 오른쪽 : 오른쪽 여백

마진 - 하단 : 하단 여백

여백 왼쪽 : 여백에

여백 : 여백 오른쪽 여백 하단 여백에 외부 왼쪽

동일한 패딩 주문 금액.

중간을 달성하기 위해 상자 외부에서

상자는 중간 수준을 달성 할 수 있습니다, 우리는 두 가지 조건을 충족해야합니다 :

1. 그것은 블록 수준 요소해야합니다.

2. 상자 너비 (폭)를 지정해야

그런 줄 여백이 자동으로 설정됩니다에 대해 수평 중심으로 블록 레벨 요소를 만들 수 있습니다.

이 방법으로 페이지 레이아웃, 다음 샘플 코드에서 일반적인 관행 :

 .header { 폭 : 960; 여백 : 0 자동;}

중심 텍스트 상자 사진 및 배경의 차이

1. 텍스트는 수평 텍스트 정렬을 중심 : 센터

2. 수평 마진을 중심으로 상자를 자동으로 변경

 = 왼쪽 텍스트를 정렬 : 센터; / * 텍스트 센터 수평 * / 
 마진 : 10px 자동;   / * 박스는 자동 *에 폭 왼쪽 여백에 수평 중심 /

3. 등 우리가 사용하는 클래스에 그림을 삽입하는 등 제품

4. 우리의 배경 이미지는 일반적으로 크거나 작은 아이콘 배경 배경 이미지에 사용됩니다

이동 섹션 IMG {   
         폭 : 200 픽셀; / * 삽입 된 화상 크기의 폭과 높이를 변경 * / 
         신장 210px; 
         마진 위쪽 : 30 픽셀 / * 화상 변화 위치를 삽입 할 여백 또는 패딩 박스 모델 * / 
         마진 왼쪽 : 50 픽셀 / * 화상이 상자 * 삽입되면 / 
     } 
 따로 { 
         폭 : 400 픽셀, 
         높이 400 픽셀, 
         테두리 : 1 픽셀 고체 퍼플; 
         배경 : #fff의 URL (이미지 / sun.jpg) NO-REPEAT, 
         배경 사이즈 : 200 픽셀 210px; / * 배경 이미지 만 사이즈 - * 배경 /의 크기를 변경하는 데 사용될 수 
         배경-총수 : 30 픽셀 50 픽셀 / * 배경 이미지 나 그 위치를 사용하여 위치 - 자세한 배경 * / 
     }
     

내부 및 기본 여백 외부 지우기 요소

더 쉽게 페이지 요소 및 웹 페이지의 생성을 제어하기 위해, 다음 코드는 내부와 외부 청소 기본 마진 요소를 모두 사용할 수 있습니다 :

 {* 패딩 : 0;         / * 클리어 패딩 * / 여백 : 0;           / * 클리어 마진 * / }
    
    
 

참고 : 인라인 요소는 여백에 대해, 아니 위 여백 아래가 없습니다. 패딩, 낮은 버전 6으로 다른 브라우저에서 문제가 될 것입니다.

우리는 내부를 지정하지 않으려 상하 여백의 외부에 잘 요소를 인라인.

여백 합병

결합 마진이 발생할 수 있습니다 때 외부에서 수직 마진 정의 블록 요소를 사용합니다.

조합 된 차단 소자는 인접한 수직 여백

두 개의 수직으로 인접하는 블록 요소가 충족되면, 상기 소자는 아래쪽 여백 마진 바닥이있는 경우, 그들 사이의 여백 아래쪽 여백 정상보다 수직 간격을 외연 탑에서 다음 요소가 합하지만, 이들의 더 큰. 이러한 현상을 수직 여백 조합하여 인접 블록 요소라고한다 (도 마진을 축소 함).

 

해결 : 잘하지 마십시오.

수직 여백 병합 중첩 된 블록 요소

두 블록 요소의 중첩 관계 아니더라도 부모 요소 및 상부 프레임 패딩 서브 요소와의 거리를 모두 비교적의 결합 거리 밖에 부모 요소에서 합병 외부 케이스의 외부에있을 것 큰, 0으로 외부에서 부모 요소는, 합병이 발생할 경우에도 마찬가지입니다.

 

 

 

해결 방법 :

1. 당신은 하나 개의 픽셀 또는 패딩의 부모 요소의 경계를 정의 할 수 있습니다.

2. 부모 요소는 오버 플로우를 추가 할 수 있습니다 : 숨겨진.

계속합니다. . . .

폭과 높이 콘텐츠

폭 속성 폭과 높이가 상자의 높이의 크기를 제어 할 수 속성.

부모 요소의 백분율 %에 대하여 다른 단위 또는 값이 될 수있다 폭 및 높이의 속성 값, 가장 일반적인 방법은, 화소 값이다.

위에서 파이어 폭스, IE6과 같은 대부분의 브라우저는 CSS 박스 모델 전체 폭과 높이의 합계 계산 원칙의 규범과 일치하여, W3C의 사양을 채택하고 있습니다 :

   / * * / 팩 크기 (공간 크기 소자)를 계산 
   요소 콘텐츠 높이 공간의 높이 + 패딩 + = + 마진 테두리 
   요소 콘텐츠 폭 + 공간 폭 패딩 + = 테두리 + 마진 
  / * 박스 크기 (실제 크기 소자)를 계산 * / 
  요소의 높이 = 콘텐츠 높이 + 패딩 + 경계 (높이 콘텐츠의 높이) 
 내용 요소 폭 = 폭 + 패딩 + 테두리 (폭 콘텐츠의 폭)

참고 :

도 1에서, 폭과 높이의 폭은 인라인 소자의 유효하지 않은 (태그 입력 IMG는 제외)의 높이 속성 만 블록 레벨 요소에 적용 특성.

박스 모델의 전체 높이를 계산할 때 상하의 여백 수직 박스 결합 위치를 2,도 고려되어야한다.

3 상자는 너비 / 높이 또는 아버지의 너비 / 높이를 지정되지 않는 경우는, 패딩 크기는 현재의 경우에는 영향을주지 않습니다 .

박스 모델 레이아웃 안정성

상자 학습 모델을 시작하는 학생들의 가장 큰 혼란은 그 사용 패딩 어떤 상황, 여백의 사용 무엇 아래 상황에서 내부 및 외부 TELL 마진의 사용?

대답은 : 사실, 대부분의 경우에 그들은 혼합 될 수있다. 즉, 당신은 또한 패딩을 사용할 수 있습니다, 마진도 사용할 수 있습니다. 당신이 생각하는 사용이 편리합니다.

그러나, 그것의 최선 사용이 항상있다, 우리는 안정성, 다음 권장 사항을 분할해야합니다 :

우선적 폭 (폭) 둘째 패딩 (패딩)을 다시 마진 (마진)에 따라 사용된다.

   폭> 패딩> 여백   

이유 :

1. 마진이 최종 사용하므로 (증오) 아래 버그 IE6를 두 배로 마진도 마진을 병합 할 것입니다.

2. 패딩이 상자의 크기에 영향을 미칠 것입니다, 우리는 추가 또는 사용 뒤에 컴퓨팅 (문제를) 빼야 할 필요가있다.

3. 폭은 종종 우리가 잔여 방법 너비 높이 잔류 방법을 사용 할 문제 (하이 피부)입니다.

    

CSS3 상자 모델

CSS3 상자 모델은 박스 크기를 지정할 수 있습니다, 콘텐츠 상자, 국경 박스로 지정할 수 있습니다, 우리는 변화하는 방식에 상자의 크기를 계산합니다.

이 두 가지 경우로 나눌 수 있습니다 :

1 상자 - 크기 : 내용 상자 상자 크기 폭 + 패딩 + 국경 컨텐츠 상자 : 요소가 W3C 표준 상자 모드를 유지할 수 있도록이 값이 기본값입니다

2 박스 크기 : 패딩과 테두리의 폭에 포함되는 상자 폭의 경계 박스의 크기는 내부에

참고 : 위의 마크 폭이 폭 CSS의 세트의 특성을 의미한다 : 길이, 값의 콘텐츠는 자동적으로 조정된다.

사업부 : 응급 아이 { 
             폭 : 200 픽셀, 
             높이 : 200 픽셀, 
             배경 - 색상 : 핑크, 
             박스 크기 조정 : 내용 - 박스 / *입니다 전자 표준 상자 모델 W3C * / 
             패딩 : 10px; 
             국경 : 15 픽셀 솔리드 레드; 
             / * 상자 폭 + 패딩 + 국경 내용 상자의 크기는 : 요소가 W3C 표준을 유지하도록이 값은 기본값입니다 * 모드 상자 / 
         } 
         DIV : 마지막-아이 { 
             폭 : 200 픽셀, 
             높이 : 200 픽셀, 
             배경 색 : 퍼플; 
             패딩 : 10px; 
             박스 크기 조정 : 경계 박스 / *가 확장 상자 패딩 * / 국경없는 
             국경 : 15 픽셀 레드 고체; 
             / * 마진 : 10px; * /
             / * 패딩과 테두리의 폭에 포함되는 상자 폭의 크기는 내부에 * / 
 }

그림자 상자

구문 :

 상자 그림자 수평 퍼지 그림자 부화 / 수직 거리 내의 음영 색 불균일의 외부 크기 그림자;

1. 처음 두 속성을 쓸 수 있습니다. 나머지는 생략 될 수있다.

2. 외부 그림자 (처음에는)하지만 그림자 삽입 내에서 기본을 쓰고 싶지 않아

{DIV의 
             폭 : 200 픽셀, 
             높이 200 픽셀; 
             경계 : 10px 레드 고체; 
             / * 그림자 상자 - : 3px의 4 픽셀 5px 5px RGBA (0, 0, 0, 0.4); * / 
             / * 그림자 상자 - : 수평 위치 수직 위치 그림자 (그림자 크기)으로부터 퍼지 사이즈 / 외측 그림자 그림자 색상 * / 
             박스 그림자 : 15 픽셀 30 픽셀 RGBA 0 (0, 0, 0, 0.4); 
             
 }