CSS文档流——position,float属性详解

目录

一、文档流是什么

二、脱离文档流

1、设置浮动(float)

float的几个属性介绍:

2、设置定位(position)

position属性:

写在最后


一、文档流是什么

由于之前思否社区写的文章,我的主页:夨落旳尐孩 的文章 - SegmentFault 思否

所以这篇文章就直接从CSS文档流开始讲了,如果文章里面有不懂的内容,可以去看我的思否主页,里面有HTML和CSS基础的相关知识,欢迎大家前去访问。

文档流就是页面的布局中各个元素的先后顺序,正常的文档流就是将页面的每一行布满:块元素独占一行、行内元素从左至右排满一行。比如:div、hr、p等都是块元素,它们会把一行都直接占满,即使没有到达一行,img、span等就是行内元素,一般情况就会从左至右排列。

二、脱离文档流

文档流的一般情况可能不满足我们的设计需求,可以使用不同的布局方式来改变顺序,当前主要的布局方式有:浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。

1、设置浮动(float)

float的几个属性介绍:

left    表明元素必须浮动在其所在的块容器左侧的关键字。
right    表明元素必须浮动在其所在的块容器右侧的关键字。
none    表明元素不进行浮动的关键字。
inline-start    关键字,表明元素必须浮动在其所在块容器的开始一侧,在 ltr 脚本中是左侧,在 rtl 脚本中是右侧。
inline-end    关键字,表明元素必须浮动在其所在块容器的结束一侧,在 ltr 脚本中是右侧,在 rtl 脚本中是左侧。
示例:

html:




    
    position 定位
    


    
son1
son2
son3

css:(与html元素在同一级文件夹下面)

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    float:left;
}
div #son1{
    width:40px;
    height:40px;
    background:burlywood;
    float: right;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    /* position:relative; */
    /* float:left; */
    top: 44px;
    left: 20px;
}
div #son3{
    width: 40px;;
    height:40px;
    /* position: fixed; */
    background:yellow;
}

显示效果:

CSS文档流——position,float属性详解_第1张图片

发现在father中的块son1在其父级空间width:200px;   height:200px;内是靠右边布局的,而son2,son3在其父级空间width:200px;   height:200px;内是靠左边布局的,可以理解成将三个儿子块变为了行内元素。

注意:我这里只设置了父亲的float属性,son1是自己设置的float属性,所以是靠右边布局,son2,son3儿子都是继承于父亲的,所以他们都是靠左,父亲设置的是相对于整个浏览器窗口的。

float的清除方式clear,clear也有几个常见属性:

left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
inherit 规定应该从父元素中继承 clear 属性值
none 默认值。允许浮动元素出现在两侧

没有清除的示例:

html:




    
    position 定位
    


    
son1
son2
son3

阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力气画圆圈。 他生怕被人笑话,立志要画得圆,但这可恶的笔不但很沉重,并且不听话,刚刚一抖一抖的几乎要合缝, 却又向外一耸,画成瓜子模样了。 阿Q正羞愧自己画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。

CSS:

div{
    width:750px;
    height:200px;
    border: 2px solid black;
    float:left;
}
div #son1{
    width:40px;
    height:40px;
    background:burlywood;
    float: right;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    /* position:relative; */
    /* float:left; */
    top: 44px;
    left: 20px;
}
div #son3{
    width: 40px;;
    height:40px;
    /* position: fixed; */
    background:yellow;
}

 显示效果:

CSS文档流——position,float属性详解_第2张图片

清除的示例:

在CSS文件中加入以下代码:(清除左侧的浮动,由于右侧的浮动与左侧的高度一致,所以右侧的浮动也一起消失了)

div p{
    clear:left;
}

效果:

CSS文档流——position,float属性详解_第3张图片

我将son1的高度改为60px,会发现left的只消除了左侧的浮动:

效果:

CSS文档流——position,float属性详解_第4张图片

注:float设置的初衷只是为了实现文字环绕图片,而不是用来布局的。

2、设置定位(position)

position属性:

1、static:默认值,相当于是正常的文档流,但是会忽略top、bottom、left、right,意思就是将前面元素的这些属性忽略,但是保留了width,height)

示例:




    
    change-to-flex
    


    
A
B
C
D

实现效果:

CSS文档流——position,float属性详解_第5张图片

说明: B、C两块忽略了前面设置的top和left。

2、relative:生成相对自己原来的位置定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。

示例:

html:




    
    position 定位
    


    
son1
son2
son3

CSS: 

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    
}
div #son1{
    width:40px;
    height:60px;
    background:burlywood;
    position:relative;
    top:10px;
    left:20px;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
    top:20px;
}
div #son3{
    width: 40px;;
    height:40px;
    background:yellow;
}

 效果:

CSS文档流——position,float属性详解_第6张图片

 3、absolute:与relative属性不同的是,它是相对于父亲设置的位置偏移,然后使用它还有要注意的地方:1、设定TRBL,2、父级设定Position属性,这样可以保证在使用absolute定位的时候不会因为分辨率的问题发生错位。

示例:

html:




    
    position 定位
    


    
son1
son2
son3

CSS: 

div{
    width:200px;
    height:200px;
    border: 2px solid black;
    position: relative;
}
div #son1{
    width:50px;
    height:60px;
    background:burlywood;
    position:absolute;
    top:30px;
    left:20px;
}
div #son2{
    width:40px;
    height: 40px;
    background: red;
}
div #son3{
    width: 40px;;
    height:40px;
    background:yellow;
}

效果:

 CSS文档流——position,float属性详解_第7张图片

4、fixed: 设置绝对定位,翻译:固定的,可以根据这个翻译来记忆,它是相对于浏览器窗口来定位的

5、sticky:黏贴定位,relative和fixed的完美结合(这个地方我不能理解是为什么,因为我设置的时候的效果是和relative的一样的效果,希望有人可以帮我在评论区贴出答案)

写在最后

以上就是我看完参考文献的记录,为自己以后复习有个参照物。有错误的话欢迎在评论区指出。

CSS文档流——position,float属性详解_第8张图片

参考文献:

深入理解css之float - SegmentFault 思否

CSS 布局 position 详解_姜皓的博客-CSDN博客

你可能感兴趣的