一、 学习定位体系之前,我们首先要了解几个概念,1什么是视觉格式化模型?2什么是视口?3什么是包含块?在掌握这几个概念之后我们才能够去使用定位体系,并且在页面做布局时达到预期效果。那么接下来就先讲这几个概念吧。
1、视觉格式化模型(visual formatting model)
我们可以把它简单的理解为CSS的一种机制,是它规定了页面的多个盒子如何布局,即定位体系是由视觉格式化模型规定的,它规定定位体系一共有三种,分别为常规流、浮动和绝对定位。
2、视口(viewport)
. 即可视窗口,我们通常说的视口一般为浏览器的可视区域。
.视口的尺寸仅受到浏览器可视窗口的大小影响和内容无关。
.当网页内容尺寸超出视口尺寸时,浏览器会出现滚动条。
3、包含块(contaning block)
.它一般为父级元素的内容盒,每个元素都有包含块。
.根元素(html):其实根元素就是html元素(html标签、html标记。叫法不同而已)
大家肯定都知道html元素就是祖宗元素了,它是没有父元素的,也就是说他不会生成包含块,但是浏览器会在一开始为它生成初始化包含块。
二、在了解了以上几个基本概念之后咱们就可以来了解定位体系了。
1、在前面我们就讲到视觉格式化模型规定定位体系一共为三种,具体是常规(nomal flow)、浮动(float)以及绝对定位(absolute flow)。其实浮动因为弊端太多现在web领域用的很少了,有自学的朋友简单了解,知道怎么消除浮动即可。
2、我们要知道所有元素默认情况下都为常规流(normal flow),且任何一个元素都必定属于三种定位体系中的某一种定位体系。值得注意的是不同定位体系中元素在包含块中的位置盒尺寸会有一些差异。
3、其实想判断元素何种定位体系很简单记住下面这张图就行了
怎么样是不是很简单呢?到这里我相信各位小伙伴对定位体系已经有了一个初步的了解。那么三种定位体系该如何书写且运用还请看下回分解。溜了、溜了今天太晚了。告辞!!