css视觉格式化模型(标准流、浮动、三种定位、BFC)

·  阅读 168
css视觉格式化模型(标准流、浮动、三种定位、BFC)

视觉格式化模型

视觉格式化模型的三种定位体系:常规流、浮动、绝对定位。

任何一个元素都必须属于其中的某一种定位体系。不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异

一、基础复习

一)三种基本定位机制:

网页常见的布局方式

1.常规流/标准流:

1)块级元素独占一行-->垂直布局

2)行内元素一行显示多个-->水平布局

2.浮动

1)可以让原本垂直布局的块级元素变成水平布局

3.定位

1)可以让元素自由的摆放在网页的任意位置

2)一般用于盒子之间的层叠情况

二、css标准流

一)标准流概述

介绍:标准流又叫文档流,是浏览器在渲染显示网页内容是默认采用的一套排版规则

这套规则规定了应该以何种方式排列元素

二)常见的标准流排版规则

1.块级元素:从上往下,垂直布局,独占一行;

2.行内元素 或 行内块元素:从左往右,水平布局,空间不够则自行换行;

块级原素:

img


行内元素:

img

三)块级元素补充:

盒子位置:盒子在包含块的垂直方向上依次摆放,垂直方向上若两个外边距相邻,则会出现折叠情况。(垂直相邻)

垂直方向:水平方向上不会重叠;

合并:两个盒子外边距都是正数的情况下,取最大值;均为负数时取最小;一正一负则相加。

三、css浮动

一)浮动的概述

当元素的float属性值为left或right时的元素为浮动元素

代码:float

取值:

属性名效果
float:none不浮动
float:left左浮动
float:right右浮动

左浮动的盒子向上向左排列;

右浮动的盒子向上向右排列;

浮动盒子的顶边不得高于上一个盒子的顶边;

若放不下,则换行。

二)浮动的使用场景

1.早期的作用:图文环绕(可搭配外边距一起)

2.现在的作用:

1)让垂直布局的盒子变成水平布局(块级元素排成一行)

如:一个在上方窗口左,一个在窗口右上方(当浏览器窗口变大缩小时,其左右浮动位置大小都不会改变)

.box1{
​
height:300px;
width:300px;
background-color:red;
/*左浮动*/
float:left;
}
复制代码
.box2{
​
height:300px;
width:300px;
background-color:red;
/*右浮动*/
float:right;
}
复制代码

三)浮动的特点

1.浮动元素会脱离标准流,在标准流中不占位置(原位置会被其下一个元素自动补位);

2.浮动元素比标准流高半个级别,可以覆盖标准流中的(后一个补位的)元素;

3.下一个浮动元素会再上一个浮动元素的后面进行左右浮动;

4.浮动元素回受到上面元素边界的印象;(如果遇到独占一行的块级元素,则抵着上边界浮动,或可将块级元素变为行内元素display: block/ inline-block)

5.浮动元素有特殊的显示效果:

1)一行可以显示多个(就算是块级元素,在全部添加相同浮动后也是在一行显示)

2)可以设置宽高

注意点:

1)浮动的元素不能通过text-align:centenr或margin-auto,让浮动元素本身居中,而让浮动元素中的文本在浮动块中居中还是可以的,用 : text-align: center; line-height: 50px; (数值为浮动块的高度)

\

四)当常规流遇上浮动:

常规流盒子和浮动盒子混合摆放:

*浮动盒子在摆放时要避开常规流盒子;

*常规流盒子在摆放时无视浮动盒子

高度坍塌:常规流盒子的自动高度计算时无视浮动盒子

五)清除浮动

1.介绍

含义:清除浮动带来的影响,对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方

影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素.

原因:子元素浮动后脱离文档流--->不占位置

目的:需要父元素有高度,从而不影响其他网页元素的布局

2.使用方法

1)直接给父元素设置高度(简单粗暴的解决方式)

2)额外标签法:

在父元素内容的最后添加一个块级元素(或最后一个子元素),给添加的块级元素设置clear:both属性,可以防止父元素的高度坍塌,让内容不会重叠在一起。

属性名:clear

默认值:none

取值:none、left、right、both

缺点:会添加很多额外的标签让页面结构变得复杂

3)单伪元素清除法

基本写法:(用伪元素代替了额外的标签)

父级::after{
/*在父级最后添加一个元素*/
content:'';
/*添加空内容*/
display:block;
/*转换为块级元素*/
clear:both;
/*清除浮动*/
}
复制代码

补充写法:(不用记)

父级::after{
/*在父级最后添加一个元素*/
content:'';
/*添加空内容*/
display:block;
/*转换为块级元素*/
clear:both;
/*清除浮动*/
    /*补充内容,其作用是在网页中看不到添加的这个伪元素*/
    height:0;
    visibility:hidden;
    /*让当前元素隐藏起来*/
}
复制代码

4)双伪元素清除法(固定使用套路)

.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
​
.clearfix::after{
clear:both;
}
复制代码

在 html中给父元素类名中添加 clearfix。

5)给父元素设置 overflow:hidden(用于父元素不设置高的时候)最优化

方法:直接给父元素设置 overflow:hidden。

特点:最优化

补充六)BFC块级格式化上下文

1.介绍:

他是一个独立的渲染区域,与区域外部分不相干。

2.创建的方法:

1)float的值不能是none;

2)position的值不是static或者relative;

3)display的值是inline-block、table-cell、flex、table-caption或者inline-flex;

4)overflow的值不是visible。

/*

1.html标签本身就是一个BFC盒子;

2.浮动元素本身就是一个BFC盒子;(给父元素也加一个浮动)

3.行内块元素本身就是一个BFC盒子;(把父元素变成行内块元素:添加display:ilnline-block)

4.overflow的值不是visible。(给父元素添加overflow:hidden属性)

*/

3.bfc的作用:

作用1:解决margin塌陷

利用bfc解决上下相邻的两个margin的重叠现象。

作用2:解决父级元素的高度塌陷(什么时候会出现高度坍塌?

作用3:清除浮动

BFC盒子会默认包裹住内部子元素(标准流、浮动)

自适应两栏式布局

四、定位

一)定位的常见应用:

1.可以解决盒子与盒子之间的层叠问题:

定位之后的元素层级最高,可以层叠在其他盒子上面;

2.可以让盒子始终固定在屏幕中的某个位置,不会因为滚动页面而移动。

二)使用定位的步骤:

1.第一步设置定位方式:

*属性名:position

*常见属性值:

意思取值写法
静态位置(静态定位)staticposition: static
相对位置(相对定位)relativeposition: relative
绝对位置(绝对定位)absoluteposition: absolute
固定位置(固定定位)fixedposition: fixed
粘性位置(不常用)stickyposition: sticky

2.第二步设置方位属性和偏移值:

*偏移值设置分为两个方向,水平和垂直方向各选一个使用即可;

*选取的原则一般是就近原则(离哪个近用哪个)

*常见取值:

方向属性名属性值含义
水平left数字+px距离左边的距离
水平right数字+px距离右边的距离
垂直top数字+px距离上边的距离
垂直bottom数字+px距离下边的距离

三)五种属性值及其使用方法

1.静态定位 static

*介绍:静态定位是默认值,就是之前认识的标准流。

*代码:position: static

*注意点:

静态定位就是之前认识的标准流,不能通过方位属性进行移动。

2.相对定位 relative

*介绍:相对于盒子原来的位置偏移,原本所占空间不变,没有脱离文档流,一般会用来做绝对定位的元父素。

*代码:position: relative

*特点:

1)需要配合方位属性实现移动(top、bottom、left、right);

2)相对于自己原来的位置进行移动;

3)原本所占空间不变,没有脱离文档流

*应用场景:

1)配合绝对定位组成“子绝父相”

2)用于小范围的移动

*基础写法:

div{
position:relative;
top:30px;
left:50px;
}
复制代码

3.绝对定位 absolute

*介绍:相对于设置了定位属性(除static)的父元素偏移;如果没有就相对于html元素

*代码:position: absolute

*特点:

1)需要配合方位属性实现移动(top、bottom、left、right);

2)默认相对于浏览器可视区域进行移动(若其父级祖先级有其他定位属性,则相对于其最近的有定位的元素进行移动);

3)在页面中不占位置-->已经脱离文档流

*补充:

1)当浮动元素被设置为绝对定位,元素的float属性会被强制改为none(float属性失效)

2)绝对定位元素对其他元素不会造成任何影响

*应用场景:

1)配合相对定位组成“子绝父相”

*绝对定位相对于谁移动?

1.祖先元素中没有定位-->默认相对于浏览器进行移动;

2.祖先元素中有定位-->相对于最近的且有定位的元素进行移动

补充:“子绝父相”

*场景:

让子元素相对于父元素进行自由移动。

*含义:

子元素:绝对定位

父元素:相对定位

*特点:父元素是相对定位,对网页布局影响小。(若两个都是绝对定位,则会覆盖页面中的其他内容;若父元素是相对定位,那子元素移动不会对页面中的其他内容产生影响)

4.固定定位 fixed

*介绍:相对于浏览器窗口进行定位移动,位置固定,不会随窗口的滚动而移动

*代码:position: fixed

*特点:

1)需要配合方位属性实现移动(top、bottom、left、right);

2)相对于浏览器可视区域进行移动

3)在页面中不占位置-->已经脱离文档流

*应用场景:

1)让盒子固定在屏幕中的某个位置(如淘宝的搜索框、导航栏)

5.粘性定位 sticky

介绍:相对于视口,依靠滚动位置;

代码:position: sticky

特点:

1)以浏览器的可视窗口为参照点移动元素(固定定位的特点)

2)粘性定位占有原先的位置(相对定位的特点)

3)必需添加方位属性才能生效(top、bottom、right、left)

.box01{position: sticky;
top:0;}
复制代码

注意:方位值表示当此区域在距视口为0时固定住不再往上。

6.总结:

定位方式属性值相对于谁移动是否占位置
静态定位static不能通过方位属性进行移动 ( 标准流)占位置(未脱离文档流)
相对定位relative相对于自己原来的位置进行移动占位置(未脱离文档流)
绝对定位absolute相对于最近的且有定位的祖先元素移动不占位置(离文档流)
固定定位fixed相对于浏览器可视区域进行移动不占位置(离文档流)
粘性定位sticky依赖与用户滚动,绝对定位+一定距离高度不占位置(离文档流)

四)元素的层级关系

1.不同布局方式(三种)元素的层级关系

定位元素层级>浮动元素层级>标准流元素层级(默认层级)

2.不同定位之间的层级关系

1)相对、绝对、固定三种定位方式的层级默认相同;

2)三种定位同时存在时,则按照html的默认排序,即写在最下面的元素层级越高,会覆盖写在上面的元素

3.手动更改定位元素的层级

*场景:改变定位元素的层级

*属性名:z-index

*属性值:数字

*特点:数字越大,层级越高,堆叠在越上方

\

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改