深入理解深入理解css布局之定位与浮动布局之定位与浮动
主要介绍了css布局之定位与浮动的相关资料,需要的朋友可以参考下
在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这两类属性共同参与来决定一个元素的 定位类型 和 偏移量 。
使用方法很简单,这里说下他们之间的区别:
relative相对定位相对定位
元素根据其在当前文档流所在位置作为参考系,进行偏移。
定位之后原来元素在文档流中的位置会被空出来,不会被其他元素所占据。
absolute绝对定位绝对定位
元素会将其带有position为非static的祖先元素作为参考系进行偏移。
如果祖先元素里没有带有position为非static的,则会以首屏作为参考系。
定位后,原来在文档流中占据的位置,会被其他元素所占据。
fixed固定定位固定定位
根据当前可视区进行定位,所以当文档流为多屏可滚动时,fixed定位的元素会跟随滚动而滚动。
跟absolute定位一样,定位后,原来在文档流中占据的位置,会被其他元素所占据。
1.3 包含块包含块
包含块就是个专有名词,其实概念很简单,这里了解一下就好。
包含块是一个矩形区域,当元素设置属性的百分比的时候,比如width:50% 或者 top: 10%,其参考系就是他的包含块。
大部分时候对于文档流里的元素,其包含块指的都是其父元素的区域。
对于定位元素来说,相对定位元素包含块也是其父元素区域;
绝对定位元素的包含块是其带有position为非static的祖先元素区域。如果其没有这样的祖先元素的话其包含块为首屏显
示区域,这个区域也有个专有名词叫做初级包含块。
固定定位元素的包含块就是当前可视区的区域。
1.4 浮动浮动
浮动允许你将元素浮动起来,脱离文档流向左或者向右移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。
虽然浮动也脱离文档流显示,但是与定位不同的是 inline 和 inline-block 的元素可以识别这种因浮动而脱离的文档流,从而不
发生重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>