첫째, 의 도입
- 사이트 제작 과정에서 전체 페이지는 개발자가 계층 구조를 가지고 있으므로, 후반에도 업데이트 및 유지 보수가 편리한 구조를 나눌 수 있습니다.
- 구조는 우리가 상자라고도 판의 일부를 깎아, 판의 부분을 형성 할 것이다. 전체 사이트가 박스 구조 밖으로 나누어 또한 박스 모델이라고합니다.
- 박스 모델의 이해를 바탕으로, 당신은 더 나은 사이트를 준비하는 페이지 레이아웃 구조, 쉬운 인터페이스로 이동 할 수 있습니다.
둘째, 상자 레이아웃 설명
전체 페이지 (HTML)의 기본 구조는 큰 상자 (또한 용기) + 패딩 (패딩) + 경계선 (경계)에 의한 각 콘테이너 소자 내용 + 마진 (마진)의 구성으로 볼 수있다 전체.
주 : 정상적인 상황에서는 브라우저의 기본 마진 값이 8px입니다
소개 상자 모델 속성
1.padding의 패딩
2.margin 여백
3.border의 경계
제 내측 가장자리 패딩 (또한이 포장). 충전물은, 이름으로이 긴 요소가 상자 안에 속성의 속성입니다 의미하지만, 상자 속성의 내부에 공간을 차지합니다 또한 긴 속성 상자입니다.
예를 들면 :
우리는 100 픽셀의 폭과 높이에 div에하는 것은 부동산 가치가 상자의 안쪽 주위에 50 픽셀의 범위에 추가해야합니다 때 padding50px의 추가가 200 픽셀 패딩에있는 상자 상자 스트레치의 공간을 차지할 수 있습니다.
패딩 속성은 사용 값 :
패딩 : 모든 주위의 값을 패딩
패딩 :이 위의 값 아래로
패딩 : 세 가지에 대한 값을 낮출
패딩 : 오른쪽 왼쪽 아래에 네 개의 값
참고 : 패딩 값은 음수가 될 수 없습니다
第二个 margin 外边距 同样顾名思义 它是长在盒子外面的一个属性，它和内边距不同的是它长在盒子外面，所以不会占据盒子里面的内容。一般来控制两个盒子之间的距离。
如下所示：
运行结果如下显示：
由于没有边框border 没有内边距 box1在四周都添加了100px的外边距
外边距的属性值用法：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上右下左
注：margin的值可以为负数
第三个 边框 border 边框是元素内容的保护壳一样 是在元素内容的外侧
如图所示：
运行结果如下：
在盒子的四周形成了20px的边框。
Border的三个属性值分别代表什么意思。
第一个值代表边框的大小多少像素。
第二个值代表的是边框的类型。边框有多种类型
solid 实线
dashed 虚线
dotted 点状线
double 双线
none 没有线条
第三个值代表边框颜色 这里是一种常用的复合写法
border: 20px solid #000;
属性拆分：
border-width: 边框大小
border-color: 边框颜色
border-style: 边框类型
单独一个方向设置边框：
border-left:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-top:10px solid red;
border-width/color/style :
属性值：
1个值： 四周都添加边框
2个值： 上下 左右
3个值： 上 左右 下
4个值： 上 右 下 左