摘要:包含种基本的布局模型即为元素的中布局模型分别为流动模型标准文档流方式,元素从上至下,从左至右是默认的网页布局方式特点块状元素占据多带带的一行,从上至下排列内联元素会从左至右排列浮动模型网页元素可通过设置属性值浮动,利用浮动特性布局层模型设置网
css包含3种基本的布局模型即为元素的3中布局模型,分别为 Flow/Float/Layer
Flow(流动模型)标准文档流方式,元素从上至下,从左至右!是默认的网页布局方式
特点块状元素占据多带带的一行,从上至下排列
内联元素会从左至右排列
Float(浮动模型)网页元素可通过设置float属性值浮动,利用浮动特性布局
Layer(层模型)设置网页元素position来支持层布局模型
position: staticposition 默认值,网页元素仍然处于标准文档流中,占据文档流中的位置
position: relative特点:
相对于自身原有位置进行偏移
仍然处于标准文档流中
随即拥有偏移属性和z-index 属性
position: absolute特点:
建立了以包含块为基准的定位(包含块为距离其最近设置了定位属性的上级元素,
若无定位祖先元素,则以HTML元素为定位元素)
完全脱离了标准文档流
随即拥有偏移属性和 z-index 属性
未设置偏移量时,无论是否存在已定位祖先元素,都保持在元素初始位置
position: fixed特点:
完全脱离标准文档流
随机拥有偏移属性和 z-index 属性
无论有无已定位祖先元素,均以浏览器窗口为偏移参照基准
位置固定,不会随滚动条变化
未设置偏移量时,仍然在标准文档流原位置
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113329.html
摘要:书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中,然后设置标记表明该元素需要重新计算样式,并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决...
摘要:书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中,然后设置标记表明该元素需要重新计算样式,并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决...
摘要:重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上),有许多地方叙述的并不是十分详细,只是大致的描述一下,给自己提供一个知识轮廓。本篇中主要描述...
摘要:布局学习的主要目的是为了记住各种属性么,最重要的是理解的定位机制与盒子模型。它是一个独立的渲染区域,只有参与,它规定了内部的如何布局,并且与这个区域外部毫不相干。 css布局 学习css的主要目的是为了记住各种属性么?NO,最重要的是理解css的定位机制与盒子模型。 接下来,从布局的角度来学习css的定位机制和盒子模型,学习之前还是先来提几个问题 1.进行css布局前为什么要学习定位...
阅读 1557·2021-11-23 09:51
阅读 1091·2021-10-12 10:12
阅读 2810·2021-09-22 16:06
阅读 3634·2019-08-30 15:56
阅读 3457·2019-08-30 15:53
阅读 3109·2019-08-29 16:29
阅读 2360·2019-08-29 15:27
阅读 2016·2019-08-26 10:49