笔记三、CSS盒子模型与布局

一、盒子模型

盒子模型是实现页面布局的基础，CSS布局主要就是基于盒子模型 的，由以下四个部分组成：

1. 外边距（margin)：边框外部周围间隙，边界
2. 边框(border)：类似包装盒的纸壳
3. 内边距(padding)：内容与边框的距离，填充部分
4. 内容(content):边框中间。盒子的主要信息

 二、盒子属性及应用

 1.margin 外边距

• margin-top  上外边距
• margin-right   右外边距
• margin-bottom   下外边距
• margin-left   左外边距

注意： 

（1）使用margin一次设置4个方向，必须按顺时针方向（上右下左），若省略，则上下、左右同值处理。

• margin: 10px; 当只指定 一个值 时，该值会统一应用到全部 四个边 。
• margin: 20px 10px; 指定 两个值 时，第一个值会应用于 上边和下边 的外边距，第二个值应用于 左边和右边。
• margin: 20px 10px 20px; 指定 三个值 时，第一个值应用于 上边，第二个值应用于 右边和左边，第三个应用于 下边。
• margin: 20px 10px 20px 25px; 指定 四个值 时，（顺时针方向）依次作为 上边，右边，下边，和左边。

（2）使用margin实现某个段落的缩进以及位置的居中，语法如下：    margin：0px auto;

2.border边框 

• border-top / bottom / left  /right   上/下/左/右边框
• border-style：none /hidden /dotted /dashed /solid/ double  边框样式
• border-color  边框颜色
• border-radius  设置圆角边框

3.padding内边距 

• padding-top / bottom / left / right  内容与上/下/左/右边框间的距离

4.应用

1、更改页面颜色和字号大小

html {
  /* px 表示 “像素 ”: 基础字号为 20 像素 */
  font-size: 20px;
  background-color: #eee;
}

2、设置文档整体格式

body {
  width: 500px;
  margin: 10px auto;
  padding: 0 30px 20px 20px;
  border: 5px solid black;
  background-color: #eee; 
}

3、定位页面主标题，并添加样式

h1 {
  margin: 0;
  font-size: 40px;
  padding: 20px 0;
  color: rgb(79, 151, 99);
  text-shadow: 3px 3px 1px black; //设置文本阴影效果
}

4、设置图像居中显示

img {
  display: block;
  margin: 0 auto;
}