标准流、浮动、flex布局

已于 2024-05-13 16:37:11 修改
阅读量912 收藏 15
点赞数 18
分类专栏： HTML 文章标签： 前端
于 2024-05-13 15:35:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan_da_wang/article/details/138498474
版权

标准流

浮动

特点：

          具备顶对齐，行内块显示特点，浮动的盒子是脱离了标准流。

如果父级的宽度不够，浮动的盒子会掉下来

 <style>
    .one{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: brown;
        float: left;
    }

    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>

小米页面的布局

    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .product{
            margin: 50px auto;
            width: 1226px;
            height: 628px;
            background-color: pink;

        }
        .left{
            width: 234px;
            height: 628px;
            background-color: blue;
            float: left;

        }
        .right{
            width: 978px;
            height: 628px;
            background-color: brown;
            float: right;

        }
        .right li {
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: orange;
            float: left;
        }
        .right li:nth-child(4n){
            margin-right: 0; 
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="left"></div>
        <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </div>
</body>
</html>

清除浮动

额外标签法

额外添加一个块级清除标签。

    <title>Document</title>
    <style>
        one{
            margin: 10px auto;
            width: 1280px;
            height: 200px;
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;

        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: yellowgreen;
        }

        .two{
            height: 100px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }

    </style>
</head>
<body>
    <div class="one ">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="two"></div>
    
</body>

单伪元素法

在父级开头加标签

注意：content：“”；

双伪元素

在父级结尾加标签。

befor在这：解决外边界塌陷问题

 .clearfix::before,

        .clearfix::after {

            content:  "";

            display:table;

        }

after：清楚浮动影响。

        .clearfix::after{

            clear: both;

        }

  <title>Document</title>
    <style>
        one{
            margin: 10px auto;
            width: 1280px;
            height: 200px;
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;

        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: yellowgreen;
        }

        .two{
            height: 100px;
            background-color: red;
        }
        /* .clearfix{
            clear: both;
        } */
        /* .clearfix::after{
            content:"" ;
            display: block;
            clear: both;
        } */
        .clearfix::before,
        .clearfix::after {
            content:  "";
            display:table;
        }
        .clearfix::after{
            clear: both;
        }

    </style>
</head>
<body>
    <!-- <div class="one clearfix"> -->
        <div class="one clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="two"></div>
    
</body>

4.overflow法

给浮动的父级加。

浮动总结

flex布局

组成

主轴对齐方式

     display: flex;

            /* 默认值 */

            /* justify-content: start; */

            /* justify-content: end; */

            /* justify-content: center; */

            /* 把父级剩余尺寸分配成间距，间距相等 */

            /* justify-content: space-between; */

            /* 间距出现在弹性盒子两侧， */

            /* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */

            /* justify-content: space-around; */

            /* 个个间距都相等 */

            justify-content:space-evenly ;

在侧轴对齐方式

align：使一致，排列;校准;(尤指)使成一条直线;排整齐;

item:项目;一则，一条(新闻);一件商品(或物品);

  display: flex;

            /* 弹性盒子在侧轴没有尺寸才能拉伸 */

            /* align-items: stretch; */

            /* align-items: center; */

            /* align-items: flex-start; */

            align-items: flex-end;

修改主轴方向

<title>Document</title>
    <style>
        div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.2LN_bFdwF2lhpxv-f_R_fAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2" alt="">
        <span>媒体</span>
    </div>

弹性伸缩比

  <title>Document</title>
    <style>

        .box{
            height: 500px;
            width: 500px;
            border: 1px black solid;
            display: flex;
            flex-direction: column;
        }
        .box div{
            background-color: pink;
        }

        .box div:nth-child(4){
            flex: 1;
            border: 1px black solid;
        }
        .box div:nth-child(3){
            flex: 2;
            border: 1px black solid;
        }
        .box div:nth-child(2){
            flex: 3;
            border: 1px black solid;
        }
        .box div:nth-child(1){
            flex: 4;
            border: 1px black solid;
        }
        div
    </style>
</head>
<body>
    <div class="box">
        <div>4</div>
        <div>3</div>
        <div>2</div>
        <div>1</div>
    </div>
</body>

换行显示和行对齐方式

flex-wrap：wrap

flex-wrap：no-wrap：这个是默认值

行对齐方式

对单行盒子不生效。

space-evenly:没有代码提示。

    <style>
        .box{
            
            
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            height: 300px;
            border: 1px solid #000;
            /* 调整行对其方式 */
            /* align-content: start; */
            /* align-content:flex-end ; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            align-content: space-evenly;
        }
        .box div{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>

青青草原羊村懒大王
关注
  • 18
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 flex布局之快速实现BorderLayout布局
12-13
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的CSS中使用float浮动来进行控制,控制起来相对来说是复杂一些,也需要加入更多的标签和代码. 看完这个界面,我们就可以着手写出标签的代码布局: 复制代码代码如下:.<div class=”parent”> . <header>北</header> . <aside class=”left”>东</aside> .
Css 常用布局方式
m0_73302873的博客
08-16 5931
Css 常用布局方式
Flex布局在小程序的使用
03-29
Flex布局是一种十分灵活方便的布局方式，目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局直接应用于一个Flex容器，布局的对象是容器中的各个项目元素（“item”）。项目元素布局的核心概念在于两条轴：主轴和交叉轴，通过控制项目元素在主轴、交叉轴上的排列方式进
flex布局简单总结
01-08
一、flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 注意 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须加上-webkit-前缀 设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效 二、父元素属性 属性名 属性值 备注 display flex 定义了一个flex容器，它的直接子元素会接受这个flex环境 flex-direction row,row-reverse,column,co
详解flex布局的元素如何分配容器的剩余空间
01-19
自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技淫巧。 不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当多另外的坑：比如浮动的闭合、inline-block 的垂直对齐、position 的定位原点以及 tab
flex布局PPT
03-14
新一代css布局——flex布局，不用再为定位，浮动而烦恼，flex一招即可搞定。
浮动，定位，flex布局
m0_51371862的博客
08-14 1318
最近在弄一个网站页面和后台页面，有好多知识点都生疏了，现在来复习一下吧。 一、浮动 浮动其实也没啥好讲的，就是左右浮动。但是在开发中老师忘记清除浮动导致元素失去对父元素的支撑，兄弟元素会顶上来。讲讲解决办法。 Clear:both; 1.书写位置：可以是下一个非浮动的兄弟节点 2.在下一个位置新增一个兄弟<divclass=”clearboth”></div> Class.clearbothstyle.css 通常都是凡在公共样式里的，实现代码的共享...
标准流.浮动.flex布局
weixin_49351132的博客
07-01 212
【代码】标准流.浮动.flex布局。
Flex布局
pscool的博客
05-11 3906
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录弹性盒简介1、基本概念弹性盒弹性容器弹性元素2、弹性容器的属性主轴属性排列方式：flex-direction自动换行：flext-wrap简写属性：flex-flow空白空间：justify-content辅轴属性辅轴对齐：align-items空白空间：align-content3、弹性元素的属性伸展系数：flex-grow缩减系数：flex-shrink基础长度：flex-basis简写属性：flex排.
浮动布局，定位布局，伸缩盒布局
m0_60502228的博客
08-23 286
布局 默认文档流 1.元素显示的顺序和代码的顺序是一致的 2.块级元素独占一行空间，默认宽度为父元素的100%，高度由内容或者子元素决定 3.行内元素共享一行空间，默认宽高都由内容决定 浮动布局 float（如果一个元素添加float属性，那么这个元素就会成为一个浮动元素） left 向左浮动 right 向右浮动 none 不浮动 inherit 浮动方式继承父元素 浮动元素的特点 1.当一...
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1184
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 924
Nodejs util file getpost web express child_process mogodb
综合性练习-验证码
cj13106811623的博客
05-15 898
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 206
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 216
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
VUE3注册指令的方法
weixin_44072254的博客
05-22 342
【代码】VUE3注册指令的方法。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 421
用vue实现无限滚动
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 783
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
vue3 使用WebAssembly 实战
qq_35374791的博客
05-16 1136
文件已经正确部署，并且可以通过指定的URL访问。此外，根据你的WASM模块实际功能和导出函数，代码中的具体实现细节（如参数传递和返回值处理）可能有所不同。函数来异步加载并实例化WebAssembly模块。首先，你需要一个WebAssembly模块。假设你已经有了一个编译好的。在Vue 3组件中，你可以在。
flex布局脱离了文档流吗
05-30
Flex布局虽然可以改变子元素的排列方式，但并没有脱离文档流。在Flex布局中，Flex容器仍然是文档流中的一个元素，只是Flex子元素的排列方式发生了改变。 在Flex布局中，Flex子元素的排列方式取决于Flex容器的属性设置，而不是取决于文档流中的位置关系。这意味着，Flex子元素可以按照任意顺序排列，而不会影响其他元素的布局。 同时，Flex子元素仍然会占据文档流中的位置，并且在文档流中的位置不会因为Flex布局的改变而发生变化。这也是Flex布局与CSS浮动不同的地方，CSS浮动会将元素脱离文档流并影响其他元素的布局。 因此，虽然Flex布局可以改变子元素的排列方式，但并没有脱离文档流。Flex容器和Flex子元素仍然是文档流中的元素，只是排列方式发生了改变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值