CSS中的定位

从之前布局用到的浮动,在到后来的弹性布局,在到栅格布局。越来越强大和方便,弊端也越来越少,但是在这样布局当中。3大定位体系的绝对定位用户布局也是非常方便的

一般在常规流下,盒子的默认值position: static,当取值是absolute(绝对定位)fixed(固定位置)如果是其中某一个取值,则当前元素就属于“绝对定位”,如果是默认值-static,但是float属性取值为left或right时,元素属于浮动定位,如果取值是none,当前盒子就属于常规流。浮动用于布局也有好处,但是浮动元素拥有flex的弊端。flex能够实现的。浮动不一定可以,而且浮动会造成元素脱离文档流,常规流盒子的自动高度计算时,无视浮动盒子既高度塌陷。这个时候,为了恢复,会采用加个空标签。但是这样要多些css和html,无法净化代码。因此会采用弹性布局,不过,3大定位体系中的绝对定位也是布局的好手,只要明白了relative,absolute,fixed!就能玩转绝对定位。取值不同,会涉及到当前盒模型的包含块不同,包含块的不同,当前元素的开始位置也会不同。因此页面会变得“乱七八糟”。absolute,fixed也会造成脱离文档流的问题,下方的元素也会占据当前定位元素是absolute,fixed的原位置。不过fixed在用于广告,侧边栏。导航等一些特别的,醒目的标签效果缺出奇的好。把absolute和relative联合起来使用,也可以达到布局的效果,不过为了维护页面和调试页面。absolute和relative还是用与微调页面 比如log等元素会好一些,其他大致的布局使用弹性布局也可以达到效果,也比定位维护和调试方便很好!

CSS中的定位

上一篇:8 JS - dom操作


下一篇:[ICPC2020南京L] Let's Play Curling - 双指针