Css(层叠样式表)的浮动布局，定位布局，display&visibility，盒子模型与定位，Flex布局

最新推荐文章于 2024-06-11 18:06:56 发布

一千次晚安。

最新推荐文章于 2024-06-11 18:06:56 发布

阅读量295

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46104231/article/details/120952674

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.传统布局方式

利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!

2.flex布局

有自己的一套属性, 效率高, 学习成本低, 兼容性强!

3.grid布局 dispaly:grid;

网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局

浮动布局

块的默认的布局为流式布局，其无论你宽度设置为多少，均不会使其排列在一个块元素的后方，造成空间浪费

为了实现对布局的要求，我们需要让块浮动起来，需要对float属性进行设置。

在对float属性均设置成left后，如果宽度可以容纳，则会自动向后补充。

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度

BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

盒子高度塌陷问题：

一个盒子不设置height，当内容子元素都浮动脱离文档流时，无法撑起自身
这个盒子没有形成BFC

解决方法：

1：给盒子的属性添加上position:absolute，缺点：要观察浮动对布局有没有影响

2：给父元素添加浮动，缺点同上

3：给父元素添加overflow:hidden，缺点：可能会导致下拉框不可用，慎用

4：给父元素设置一个::after伪元素，并且设置clear属性，clear:both，缺点：无法兼容ie之前的版本 #都说这个办法好

5：在浮动元素的末尾添加一个空标签，例如隔一个带clear:both的盒子，缺点：多余元素

定位布局

position :Static, Relative, Absolute, Fixed, Sticky

static是正常的文档流，是css的默认布局方式，设置top，right，bottom等无效。

relative在确认元素的默认位置后，通过top，right，bottom，left来设置位置的偏移，元素所占的空间保留在原位，其他元素不会挤占其空间。

absolute脱离标准文档流，释放自己的位置，对其他元素不会有干扰但是会覆盖上去，绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。

fixed固定定位，包含元素是当前浏览器窗口，无论页面怎么滚动都会固定在同一个位置，脱离标准文档流会把元素的宽高设置为内容的宽高。

sticky是relative和fixed的结合体，其在滚动情况下会固定在同一个位置，但是在正常情况下与relative同等，其通过设置top，right，bottom，left来确定距离浏览器多少时开始固定。

z-index 为人眼到浏览器的距离，这个值越大优先级就会越高，如果父子元素大小关系出现不同，由父元素的该值决定。

display&visibility

display:none后不存在并且不占用空间

display:inline为行级元素，多个占一行，不可以设置宽高

display:block为块级元素，自己占一行，可以设置宽高

display:inline-block为行级块元素，典型的有img，input，多个占一行，可以设置宽高

visibility:visible为可见

visibility:hidden为不可见，但是原空间仍旧在原位

盒子模型及定位

两种盒子模型（均与margin无关）：

box-sizing:content-box 默认，自己会膨胀，padding变大后盒子就膨胀了，不好还原

box-sizing:border-box 自己不会膨胀，推荐用法，元素的width=content+border+padding

margin是有坍塌问题的，两个块元素的margin会取最大值而不是相加，解决办法是设置为行级块元素。并且，在父子元素中同时设置margin，也会取最大值。

盒子模型布局稳定性：width>padding>margin

盒子的布局顺序：确定结构，布局方式，行内元素，盒子类型，width/height，padding，margin

Flex布局

flex是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

写给自己看的display: flex布局教程 « 张鑫旭-鑫空间-鑫生活

display：flex弹性布局 - 清许 - 博客园

各种参数参照博客。

利用flex实现三栏式布局：

<head>
    <style>
        .Flex_test{
            display: flex;
            flex-direction: column;
            min-height: 500px;
            text-align: center;
            
        }
        .footer,
        .header{
            flex: 1;
            background-color: burlywood;
            line-height: 100px;
        }
        .Main{
            display: flex;
            height: 400px;
            line-height: 400px;
        }
        .right_content,
        .left_content{
            flex: 0 0 300px;
            background-color: rgb(255, 0, 200);
            
        }
        .main_content{
            flex: 1;
            background-color: blue;
        }
        



    </style>
</head>
<body class="Flex_test">
    <div class="header">我是头部</div>
    <div class="Main">
        <div class="left_content">我是左侧边栏</div>
        <div class="main_content">内容</div>
        <div class="right_content">我是右侧边栏</div>

    </div>
    <div class="footer">我是底部</div>

</body>

效果：

利用flex实现网格布局：

代码：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        .grid{
            display: flex;
            margin-top: 10px;
            width: 800px;
        }
        .grid_1of3{
            flex: 0 0 33.3333%;
            margin-left: 5px;
            background-color: aqua;
            height: 30px;
        }
        .grid_1of2{
            flex: 0 0 50%;
            margin-left: 5px;
            background-color: aqua;
            height: 30px;
        }
        .grid_1of4{
            flex: 0 0 25%;
            margin-left: 5px;
            background-color: aqua;
            height: 30px;
        }
        .grid_auto{
            flex: 1;
            margin-left: 5px;
            background-color: aqua;
            height: 30px;
        }



    </style>
</head>
<body>
    <div class="grid">
        <div class="grid_1of3 grid6">1/3</div>
        <div class="grid_1of3 grid6">1/3</div>
        <div class="grid_1of3 grid6">1/3</div>
    </div>    
    <div class="grid">
        <div class="grid_1of2 grid6">1/2</div>
        <div class="grid_1of2 grid6">1/2</div>
    </div>    
    <div class="grid"> 
        <div class="grid_1of3 grid6">1/3</div>
        <div class="grid_auto grid6">auto</div>
    </div>    
    <div class="grid">
        <div class="grid_1of2 grid6">1/2</div>
        <div class="grid_1of4 grid6">1/4</div>
        <div class="grid_1of4 grid6">1/4</div>
    </div>    
</body>

效果图：

Grid布局

因为兼容性的问题，该布局方式需要看具体需求

css grid 属性 | 菜鸟教程

详细看菜鸟教程

一千次晚安。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css(层叠样式表)的浮动布局，定位布局，display&visibility，盒子模型与定位，Flex布局

浮动布局块的默认的布局为流式布局，其无论你宽度设置为多少，均不会使其排列在一个块元素的后方，造成空间浪费为了实现对布局的要求，我们需要让块浮动起来，需要对float属性进行设置。在对float属性均设置成left后，如果宽度可以容纳，则会自动向后补充。浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
复制链接

扫一扫