范仁义css3课程---19、流动布局 范仁义css3课程---19、流动布局

一、总结

一句话总结：

流动（Flow）布局是默认的网页布局模式，在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，内联元素都会在所处的包含元素内从左到右水平分布显示。

1、流动模型的比较典型的两个特点？

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。块状元素都会以行的形式占据位置。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。

二、流动布局

博客对应课程的视频位置：19、流动布局
https://www.fanrenyi.com/video/10/54

1、基本布局简介

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

2、流动布局

流动（Flow）：自上而下。
先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

元素在文档流中的特点

块元素

1.块元素在文档流中会独占一行，块元素会自上向下排列：
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开

内联元素

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续白左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开开


当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

三、课程代码