08-CSS 상자 모형 및 사용법

CSS 상자 모형 및 사용 방법
상자 모형 해석

요소는 페이지에 네모난 블록으로 표시되어 하나의 상자와 유사하다. CSS 상자 모델은 실제 상자를 비유하여 요소에 대응하는 스타일을 설정하는 데 도움을 준다.

요소를 상자라고 하는데 그에 대응하는 양식은 상자의 너비width, 상자의 높이height, 상자의 테두리border, 상자 안의 내용과 테두리 사이의 간격padding, 상자와 상자 사이의 간격margin이다.

너비 높이 설정

width: 200px;  /*        ，            ，        (  ) */ 
height: 200px; /*        ，            ，        (  ) */

테두리 설정

한쪽의 테두리를 설정합니다. 예를 들어 윗부분의 테두리는 다음과 같이 설정할 수 있습니다.

border-top: 10px solid red;

그중 10px는 선틀의 굵기를 나타낸다.solid는 선형을 나타내는데 주로 solid(실선),dashed(허선)dotted(점선)를 사용한다.레드는 선의 색상이 빨간색임을 나타냅니다.

다른 세 변을 설정하는 방법은 위와 같다. 위의'top'을'left'로 바꾸면 왼쪽,'right'로 바꾸면 오른쪽,'bottom'으로 바꾸면 밑변을 설정한다.

네 변이 같으면 네 변의 설정을 한 문장으로 합칠 수 있다.

border: 10px solid red;

내부 간격 padding 설정

상자의 네 변의 내부 간격을 설정하고 다음과 같이 설정할 수 있다.

padding-top: 20px;     /*        20px */ 
padding-left: 30px;     /*        30px */ 
padding-right: 40px;    /*        40px */ 
padding-bottom: 50px;   /*        50px */

위의 설정은 다음과 같이 간략하게 쓸 수 있다.

padding: 20px 40px 50px 30px; /*           ，                
         。 */

padding 뒤에는 3개의 값, 2개의 값과 1개의 값이 있을 수 있다. 각각 설정된 항목은 다음과 같다.

padding: 20px 40px 50px; /*         20px，      40px，      50px */ 
padding: 20px 40px; /*         20px，      40px*/ 
padding: 20px; /*         20px */

외부 간격 설정 margin

외곽 거리의 설정 방법과 padding의 설정 방법은 같고 상기 설정 항목 중의 padding를 margin로 바꾸는 것이 외곽 거리의 설정 방법이다.

상자의width와height값이 정해진 시간에 상자가 증가border와padding하면 상자 전체의 사이즈가 커지기 때문에 상자의 실제 사이즈는:

       = width + padding   + border  

       = height + padding   + border  

chrome 개발자 도구

크롬 개발자 도구는 보조 개발을 할 수 있으며 요소의 구조, 스타일, 그리고 상자 모형의 구조와 사이즈를 신속하게 볼 수 있다

상자 모형 사용 기교 및 관련 문제
margin 관련 팁

부동하지 않는 요소가 부모 수준에 비해 가운데로 설정됨: margin: x auto;

margin 마이너스 값은 원소의 위치 이동과 경계를 합치게 한다

수직 외부 거리 결합

수직 바깥쪽 거리 결합은 두 개의 부동하지 않는 원소가 수직 바깥쪽 거리를 만났을 때 바깥쪽 거리를 형성하는 것을 말한다.합병 후의 외부 거리의 높이는 합병이 발생한 두 개의 외부 거리의 높이 중의 비교적 큰 사람과 같다. 실제 개발에서는 일반적으로 margin-top만 설정하여 이런 합병 문제를 피하거나 원소를 부동시켜도 이런 문제를 피할 수 있다.

margin-top 무너지다

두 개의 움직이지 않는 상자를 끼워 넣을 때 내부의 상자margin-top가 바깥의 상자에 추가되어 내부의 상자margin-top를 설치하지 못하게 된다. 해결 방법은 다음과 같다.

외부 상자에 테두리 설정

외부 박스 설정overflow:hidden

내부 박스 설정float(권장되지 않으며 추가 질문 발생)

위류와 위원소 사용(추천방법):

.clearfix:before{
    content: '';
    display:table;
}