CSS3盒子模型

CSS3盒子模型

1、文档流（Normal Flow）

• 网页是一个多层结构

• 最下层被称为文档流，文档流是网页的基础

• 元素主要有两个状态：在文档流中，脱离文档流

1.1、块元素

• 块元素会在页面中独占一行
• 默认宽度是父元素的宽度
• 默认高度是子元素或内容的高度

1.2、行内元素

• 行内元素不会独占页面的一行，只占自身的大小
• 行内元素在页面中从左向右排列
• 当一个行内元素空间不足时会换行显示
• 行内元素的宽高都是被内容撑开

2、盒模型（Box model）

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

2.1、盒子的组成

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

2.1.2、内容区

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

2.1.3、边框

• border：直接设置三个属性，不论顺序。可以使