css的布局模型(一)—-流动模型

CSS包含3种基本的布局模型,分别是:

1.流动模型(Flow)

2.浮动模型 (Float)

3.层模型   (Layer)

我们先来说说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征:

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

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

运行结果如下:

在该例子中,我们没有对html代码做什么布局,由运行结果可以看到,在默认情况下,网页布局采用的是流动模型,对于块级元素会占据一行,对于内联元素会从左至右显示。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容