CSS布局相关知识点（一）：盒子模型、文档流

一、盒子模型 Box model：

1 盒子模型是什么：

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

2 盒子模型的四个组成部分：

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

3 四个组成部分的具体内容和属性：

• 内容区（content）

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

两个属性：内容区的大小由width和height两个属性来设置

• 边框（border）

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

三个属性+四个单独边框：

边框的宽度 border-width （可以分别指定四个边的边框）
边框的颜色 border-color （可以分别指定四个边的边框，如果省略了则自动使用color的颜色值）
边框的样式 border-style（默认值：none，solid 表示实线 dotted 点状虚线 dashed 虚线 double 双线）

简写属性:可以同时设置边框所有的相关样式，并且没有顺序要求（eg. border-top: thick double #32a1ce;）

单独设置某一边框：
border-top
border-right
border-bottom
border-left

•  内边距（padding）

内容区和边框之间的距离是内边距

四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left

背景颜色会延伸到内边距上

内边距的设置会影响到盒子的大小

盒子的可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

• 外边距（margin）

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

一共有四个方向的外边距：
margin-top：上外边距，设置一个正值，元素会向下移动
margin-right：默认情况下设置margin-right不会产生任何效果
margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动
margin-left：左外边距，设置一个正值，元素会向右移动
也可以设置负值，如果是负值则元素会向相反的方向移

元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素

简写属性：margin 可以同时设置四个方向的外边距，用法和padding一样

4 行内元素的盒子模型：

行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局

5 元素类型、显示属性：

display 属性用来设置元素显示的类型，可选值：

• inline 将元素设置为行内元素
• block 将元素设置为块元素
• inline-block 将元素设置为行内块元素（行内块：既可以设置宽度和高度又不会独占一行）
• none 元素不在页面中显示，也不占位置

visibility 用来设置元素的显示状态，可选值：

• visible 默认值，元素在页面中正常显示
• hidden 元素在页面中不显示，但是占位置

二、文档流 Document flow / Normal flow：

1 文档流是什么：

网页是一个多层的结构，一层摞着一层

通过CSS可以分别为每一层来设置样式

作为用户来讲只能看到最顶上一层

这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列

2 元素在文档流中的两个状态：

在文档流中

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

3 不同元素在文档流中的布局特点：

• 块元素：

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

• 行内元素：

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