在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。
上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时介绍了box-sizing和行框。这篇我们继续...
一、定位与浮动
上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我们就需要使用到定位和浮动的相关知识。
1.1 文档流
文档流就是按照页面元素书写的顺序,将页面元素按从左到右,从上至下的一般顺序进行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果,就需要脱离文档流,在一个新的平面上去显示,这样我们就可以在屏幕上有多个平面叠加显示的效果了,那么这就是浮动和定位的工作了。
1.2 定位
定位允许你使用 position 属性,将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。
根据 position 属性的取值,元素可以分为静态定位元素static(默认值)、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。
首先我们抛开static这个默认值,因为他基本不属于定位的范畴,因为元素默认就是static,他就相当于是依据文档流显示。
当我们使用定位时,需要position属性和top,left,right,bottom这两类属性共同参与来决定一个元素的 定位类型 和 偏移量 。
使用方法