첫째, CSS 박스 모델은 무엇인가?
또한 CSS 박스 모델 지정, 테두리 및 방법 박스 처리 원소 함량 외부 요소 패딩 거리라고도 CSS 박스 모델.
프레임 요소의 실제 콘텐츠의 내측 부분은, 콘텐츠를 직접 심에 의해 둘러싸여있다. 패딩 배경 요소를 제공합니다. 패딩 가장자리 경계입니다. 경계 마진이다 벗어나 마진은 기본적으로 투명하며, 따라서 후속의 요소를 차단하지 않을 것이다.
패딩, 여백 및 테두리는 선택적, 기본값은 0입니다. 그러나, 사용자 에이전트 스타일 시트 마진과 패딩으로 많은 요소. 요소는 이러한 브라우저 스타일을 충당하기 위해 제로 마진과 패딩으로 설정할 수 있습니다.
둘째, 박스 모델 - 보더 (국경) : 국경은 각각 세 점, 테두리 두께, 스타일, 색상을 포함한다.
경계 : 2 픽셀 빨간색으로, 2 픽셀, 실선 스타일의 두께를 의미, 색상은 빨간색입니다.
테두리 속성에 :
셋째, 박스 모델 - 패딩 (패딩) : 요소와 프레임 사이의 거리를 설정, 패딩이라고합니다.
패딩은 테두리와 요소 내용 요소 사이의 빈 영역을 정의합니다. 당신은 길이 값과 백분율 값을 설정할 수 있으며, 음의 값의 사용을 허용하지 않습니다.
위, 아래, 왼쪽 및 오른쪽 : 패딩은 네 부분으로 나눌 수 있습니다. 이 네 가지 속성은 지속적으로 쓸 수 별도로 설정할 수 있습니다.
td {
padding: 20px 10px 50px 50px;
}
위, 아래, 왼쪽과 오른쪽 네 가지 요소 쓰기를 분리 :
td {
padding-top: 50px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 50px;
}
넷째, 박스 모델 - 경계 : 요소 사이의 거리, 즉 외측 테두리가 설치된 마진이다 경계.
마진은 네 부분으로 나누어진다 즉 좌상 우하 (마진 정상 / 여백 / 오른쪽 여백 / 하단 가장자리 왼쪽).
네 부분의 같은 이익률은 지속적으로 쓸 수 있습니다.
p {
margin: 20px 50px 60px 30px;
}
위, 아래, 왼쪽과 오른쪽 네 가지 요소 별도 쓰기 : **
p {
margin-top: 20px;
margin-left: 30px;
margin-bottom: 60px;
margin-right: 50px;
}
마지막으로, 나는 추천 프런트 엔드 학습 교환기 685 910 553 고급에 푸시 ( 프런트 엔드 정보 공유 ), 상관없이 당신이 지구에있는 어느 방향으로
당신은 당신이에 정착 몇 년 동안 작업에 오신 것을 환영합니다 여부를! (그룹 내에서 정기적으로 무료 학습 자료 및 얼굴 질문과 답변 문서 정돈 책의 주요 그룹의 일부의 무료 모음을 제공합니다!)
이 문서에 이의가있는 경우 문서에 코멘트에, 당신의 의견을 적어주세요.
이 문서가 흥미 경우, 공유 및 전달, 또는 당신이 볼 수하십시오, 당신은 인정하고 우리의 기사의 격려.