CSS3学习（三）：盒模型

1、文档流（normalflow）

网页是一个多层的结构，一层摞着一层
通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层
这些层中，最底下的一层称为文档流
文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态

• 在文档流中
• 不在文档流中（脱离文档流）

那么元素在文档流中有什么特点，我们接着往下看

块元素

• 块元素会在页面中独占一行
• 默认宽度是父元素的全部（会把父元素撑满）
• 默认高度是被内容撑开（子元素）

行内元素

• 行内元素不会独占页面的一行，只占自身的大小
• 行内元素在页面中左向右水平排列（书写习惯一致）
• 如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
• 行内元素的默认宽度和高度都是被内容撑开

2、盒模型（box model）

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由一下几个部分组成：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）
  

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型

• width 设置内容区的宽度
• height 设置内容区的高度

边框（border）

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。

• border-width 边框的宽度：默认3px
  • border-top-width 上边框的宽度
  • border-right-width 右边框的宽度
  • border-bottom-width 下边框的宽度
  • border-left-width 左边框的宽度
• border-color 边框的颜色：默认使用color的颜色值
  • border-top-color 上边框的颜色
  • border-right-color 右边框的颜色
  • border-bottom-color 下边框的颜色
  • border-left-color 左边框的颜色
• border-style 边框的样式：没有默认值，必须指定
  • border-top-style 上边框的样式
  • border-right-style 右边框的样式
  • border-bottom-style 下边框的样式
  • border-left-style 左边框的样式

边框的大小会影响到整个盒子的大小

.box1{
    border-width: 10px;
    border-color: red;
    /* 
    	solid  实线 
    	dotted 点状虚线 
    	dashed 虚线 
    	double 双线 
    */
    border-style: solid;
}

不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况
设定几个值就决定了对应方向的宽度、颜色或样式

• 四个值：上 右 下 左
• 三个值：上 左右 下
• 两个值：上下 左右
• 一个值：上下左右

border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
border-top、border-right、border-bottom、border-left，通过这四个属性可以同时设置各个边框的相关样式

.box1{ 
	border: 10px red solid;
}

内边距(padding）

内边距，也叫填充，是内容区和边框之间的空间

• padding-top 上内边距
• padding-right 右内边距
• padding-bottom下内边距
• padding-left 左内边距

padding，内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

外边距（margin）

外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段

• margin-top 上外边距
  • 设置正值，元素自身向下移动
  • 设置负值，元素自身向上移动
• margin-right 右外边距
  • 设置正值，其右边的元素向右移动
  • 设置负值，其右边的元素向左移动
  • 述说法并不准确，对于块元素，设置margin-right不会产生任何效果
• margin-bottom 下外边距
  • 设置正值，其下边的元素向下移动
  • 设置负值，其下边的元素向上移动
  • 上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题
• margin-left 左外边距
  • 设置正值，元素自身向右移动
  • 设置负值，元素自身向左移动

外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间