这是我参与【第五届青训营】伴学笔记创作活动的第九天。

盒模型

1.文档流

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

• 在文档流中
• 不在文档流中（脱离文档流） 那么元素在文档流中有什么特点，我们接着往下来看。
  

2.块元素

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

3.行内元素

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

4. 盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS 盒子模型都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

CSS 盒子模型就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型。[1]

盒模型、盒子模型、框模型（box model）

CSS 将页面中的所有元素都设置为了一个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

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

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

内容区（content）

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

元素中的所有的子元素和文本内容都在内容区中

• width和height 设置排列内容区的大小
• width 设置内容区的宽度
• height 设置内容区的高度

.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
}