首页 前端知识 网页三大基础布局

网页三大基础布局

2024-03-01 12:03:00 前端知识 前端哥 849 27 我要收藏

文章目录

  • 网页三大布局方式
    • 一、流式布局
    • 二、浮动布局
      • 1.字围效果
      • 2.圣杯布局
    • 三、层布局
      • 1.相对定位
      • 2.绝对定位
      • 3.静态定位
    • 三、浮动元素会造成影响:
      • 1)对父元素的影响
      • 2)对兄弟元素的影响

网页三大布局方式

一、流式布局

想要知道什么是流式布局,就要知道什么是标准的文档流即,

网页元素会默认自动从上往下的,从左往右 流式排列方式。

流式布局按标准文档流进行布局的,也是默认的布局方式,这种布局方案,是最简单的一种布局方案。

功能太弱。
如果只使用流式布局,并不能完成复杂页面的开发

二、浮动布局

1.字围效果

为了让块级元素可以并排显示,就可以使用浮动布局

最初浮动效果的发明知识为了让文字能够环绕图片------>字围效果

在这里插入图片描述

  • 如果一个元素浮动,就会班脱离文档流,文档流里的一些标准二也就不在适用

  • 如图将图片设为浮动,其后面的文字应该会往上窜,图片会覆盖文字,但实际是文字环绕图片的字围效果

    这种情况就叫做字围效果,最初浮动就是为了字围而产生

    但人们发现,浮动也可以让块级元素并排显示,慢慢的我们都是用浮动让块级元素并排显示

标准文档流规定:
1)男盒子需要独占一行,女盒子和人妖盒子需要并排显示,满一行也会自动换行。
2)默认是从上到下,从左到右进行布局,这就形成一个标准的文档流。

2.圣杯布局

浮动布局典型的一种布局方式就是圣杯布局

在这里插入图片描述

使用浮动的目的就是将块元素并排显示

三、层布局

通过定位使用的布局,叫做层布局

1.相对定位

依据原本的位置进行定位,参考点:本身的位置,

然后通过top, left, bottom, right设置值偏移量

2.绝对定位

绝对定位:格式:position:absolute。

参考点,需要我们自己去设置,写一行代码来设置:position:relative(一般写给父元素)

如果没写就会一层一层的往上找,知道body为止

也是通过top、left, right, bottom来设置偏移量

注意设置绝对定位的元素是完全脱离标准的文档流的,多个元素进行觉得定位会发生元素重叠的现象,一般是后面的覆盖前面的

3.静态定位

就是不定位,默认的

三、浮动元素会造成影响:

1)是对父元素造成影响
2)对后面的兄弟元素造成影响

1)对父元素的影响

当父元素中的所有元素都浮动了,并且父元素没有设置高度,父元素的高度就会变成0,也叫父元素高度塌陷。

我们需要解决这种浮动产生的问题就叫做清楚浮动
在这里插入图片描述

①给父元素设置hight

②overflow:hidden

③伪墙法

<style>
/* 在father后面创建一个伪元素,并可设置为不可见*/
.father::after{
            content: "";
            display: block;
            clear: both;

          
            /* 是否可见 hidden表示不可见*/
            visibility: hidden;
        }
</style>

2)对兄弟元素的影响

在一个父元素中,如果box1,box2,box3,都浮动了,没有浮动的box4就会钻上去。

clear本意就是清除的意思。
clear:left; 清除左浮动造成的影响
clear:right; 清除右浮动造成的影响
clear:both; 清除左右浮动造成的影响
哪个兄弟受影响了,就需要把这个clear:both写在哪个兄弟上面。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2990.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!