CSS 布局模型

tracy 发布于2019-08-29 15:27 / 2329人阅读

摘要：包含种基本的布局模型即为元素的中布局模型分别为流动模型标准文档流方式，元素从上至下，从左至右是默认的网页布局方式特点块状元素占据多带带的一行，从上至下排列内联元素会从左至右排列浮动模型网页元素可通过设置属性值浮动，利用浮动特性布局层模型设置网

css包含3种基本的布局模型即为元素的3中布局模型,分别为 Flow/Float/Layer

Flow(流动模型)

标准文档流方式，元素从上至下，从左至右！是默认的网页布局方式

特点

块状元素占据多带带的一行，从上至下排列

内联元素会从左至右排列

Float(浮动模型)

网页元素可通过设置float属性值浮动，利用浮动特性布局

Layer(层模型)

设置网页元素position来支持层布局模型

position: static

position 默认值,网页元素仍然处于标准文档流中,占据文档流中的位置

position: relative

特点：

相对于自身原有位置进行偏移

仍然处于标准文档流中

随即拥有偏移属性和z-index 属性

position: absolute

特点：

建立了以包含块为基准的定位（包含块为距离其最近设置了定位属性的上级元素,

若无定位祖先元素，则以HTML元素为定位元素）

完全脱离了标准文档流

随即拥有偏移属性和 z-index 属性

未设置偏移量时，无论是否存在已定位祖先元素，都保持在元素初始位置

position: fixed

特点：

完全脱离标准文档流

随机拥有偏移属性和 z-index 属性

无论有无已定位祖先元素，均以浏览器窗口为偏移参照基准

位置固定，不会随滚动条变化

未设置偏移量时，仍然在标准文档流原位置

GPU云服务器云服务器 css布局 css布局教程学习css布局对象模型与数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113329.html

浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

_Dreams 2019-08-29 16:40 评论0 收藏0
浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

xiangchaobin 2019-08-23 11:50 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
从布局看css基础

摘要：布局学习的主要目的是为了记住各种属性么，最重要的是理解的定位机制与盒子模型。它是一个独立的渲染区域，只有参与，它规定了内部的如何布局，并且与这个区域外部毫不相干。 css布局学习css的主要目的是为了记住各种属性么？NO，最重要的是理解css的定位机制与盒子模型。接下来，从布局的角度来学习css的定位机制和盒子模型，学习之前还是先来提几个问题 1.进行css布局前为什么要学习定位...

thekingisalwaysluc 2019-08-30 10:51 评论0 收藏0