浮动+flex布局

一.浮动

1.介绍

2.效果

<style>

        .one{

            width: 100px;

            height: 100px;

            background-color: red;

            float: left;

        }

        .two{

            width: 200px;

            height: 200px;

            background-color: blue;

            float: right;

        }

    </style>

</head>

<body>

    <div class="one">爱</div>

    <div class="two">keadasf</div>

</body>

如果两个都是left,则效果为:

!!!如果只给一个div加float属性的话,会导致两个盒子重叠!!!

例如将.two中的float属性去掉,事实上只有.one才被系统承认

3.特点

顶对齐

具备行内块特点

脱离标准流

父级宽度不够,子级会浮动换行

4.案例

产品区域布局

4.1.效果

4.2代码

<style>

        *{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        .product{

            margin: 50px auto;

            width: 1229px;

            height: 628px;

            background-color: pink;

        }

        .left{

            width: 234px;

            height: 628px;

            background-color: red;

            float: left;

        }

        .right{

            width: 978px;

            height: 628px;

            background-color: blue;

            float: left;

        }

        .right li{

            margin-bottom: 14px;

            margin-right: 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>

4.3总结

(1)父级宽度不够,浮动的盒子会掉下来

(2)可以利用无序列表的:nth-child()取消部分盒子的内外边框

(3)版心居中 margin:上下 auto   (左右设置为auto即可)

二.清除浮动

1.介绍

<style>

        *{

            margin: 0;

            padding: 0;

        }

        .product{

            margin: 20px auto;

            width: 900px;

            height: 600px;

            background-color: pink;

        }

        .left{

            width: 200px;

            height: 600px;

            background-color: red;

            float: right;

        }

        .right{

            width: 700px;

            height: 600px;

            background-color: blue;

            float: left;

        }

        .box{

            height: 100px;

            background-color: black;

        }

    </style>

</head>

<body>

    <div class="product">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="box"></div>

正常情况

当父级product没设置高度时:

product高度化为0,底下的box直接上移,影响布局

2.清除浮动方法

2.1额外标签法

在父元素内容的最后添加一个块元素,并设置CSS属性   clear:both   (其中除了both还有left,right指去除xx方向的浮动影响)

 .clearfex{

            clear: both;

        }

   ........

    <div class="product">

        <div class="left"></div>

        <div class="right"></div>

        <div class="clearfex"></div>

    </div>

    <div class="box"></div>

2.2单伪元素法

.clearfex::after{

            content: "";                            /*伪元素法必须要有content属性,否则无法生效*/

            display: block;

            clear: both;

        }

   ..........

<div class="product clearfex">                     /*top要调用clearfex*/

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="box"></div>

2.3双伪元素法(推荐)

/*其中before是为了解决外边距塌陷问题,子级设置的外边距可能会将父级下拉)*/

.clearfex::before,

        .clearfex::after{

            content: "";

            display: table;

        }

        .clearfex::after{

            clear: both;

        }

............

<div class="product clearfex">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="box"></div>

2.4 overflow属性

剪掉超出父级的选项

overflow:hidden

2.5效果

自动撑开高度,高度为子级中最大的高度。

三.flex布局(常用)

1.介绍

2.创建flex容器(display:flex)

.box{

            /* 将盒子变为弹性布局 */

            display: flex;

            justify-content: space-between;

            /* 如果去掉height,高度根据内容浮动,不会脱标 */

            height: 300px;

            border: 1px solid black;

        }

关于拉伸和挤压:如果子级设置了宽高,由于较多子级,则自动挤压子级的原有宽度。如果子级没有设置高度,则自动将子级拉伸为与父级盒子同高。

3.主轴对齐 (justify-content)

常用后四个属性值

4.侧轴对齐方式

!!!注意:一个是全部,一个是单独处理

!!!stretch必须不设置弹性盒子的高度才能实现拉伸

!!!控制单个盒子使用伪类选择器:

.box div:nth-child(2){

            align-self: center;

        }

5.修改主轴方向(flex-direction)

!!!重点记住column,如果主轴方向变化,则侧轴也会跟着变主侧两轴始终垂直

6.弹性伸缩比(flex)

.box div:nth-child(2){

            flex: 1;

        }

弹性盒子2占父级除13外的尺寸一大份。

.box div:nth-child(2){

            flex: 1;

        }

        .box div:nth-child(3){

            flex: 3;

        }

除去盒子1,弹性盒子23分别占剩余父级尺寸的1/4和3/4。

7.弹性换行(flex-wrap)

8.弹性行对齐(align-content)

!!!和主轴对齐的属性值相同

!!!弹性行对齐对单行弹性盒子不生效,所以记得换行flex-wrap

四.案例

抖音解决方案

1.效果

2.代码

大体思路为:

1.清除格式

2.大盒子嵌套四个小盒子,四个小盒子可使用无序列表(无序列表属于行标签,记得转换为弹性盒子)

3.设置大盒子:盒子大小,盒子版心位置,边框线,是否圆角等性质。

4.无序列表转弹性盒子,调整各盒子在主轴对齐方式,换行,行对齐方式,内外边距等性质。

5.四个小盒子设置宽高,里面分两个小盒子,一个图片一个文本,转为弹性两个小盒子。

6.设置两个弹性小盒子在主侧轴的分布方式,盒子背景颜色等。

7.单独设置两盒子里面的图片格式和文字大小等性质。

<title>抖音解决方案</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        li{

            list-style: none;

        }

        /*以上为清除格式*/

        .box{

            margin: 200px auto;

            border-radius:20px;

            width: 800px;

            height: 400px;

            border: 2px solid black;

        }

        .box ul{

            display: flex;

            justify-content: space-between;  /*调整主轴方向对齐方式*/

            flex-wrap: wrap;  /*弹性盒子换行*/

            align-content: space-around;      /*行对齐*/

            padding: 30px 20px 30px 20px;

            height: 400px;

        }

        .box li{

            width: 360px;

            height: 150px;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: white;

        }

        .box .pic1{

            margin-right: 15px;

        }

        .box .text1 h4{

            font-size: 18px;

            line-height: 30px;

        }

        .box .text1 p{

            font-size: 15px;

            color: #666;

        }

       

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>

                <div class="pic1">

                    <img src="./抖音解决方案1.png" alt="">

                </div>

                <div class="text1">

                    <h4>一键发布多域</h4>

                    <p>发布头条i需要官网确认,比如新闻</p>

                </div>

            </li>

            <li>

                <div class="pic1">

                   <img src="./抖音解决方案2.png" alt="">

                </div>

                <div class="text1">

                   <h4>一键发布多域</h4>

                   <p>发布头条i需要官网确认,比如新闻</p>

                </div>

            </li>

            <li>

                <div class="pic1">

                   <img src="./抖音解决方案3.png" alt="">

                </div>

                <div class="text1">

                    <h4>一键发布多域</h4>

                    <p>发布头条i需要官网确认,比如新闻</p>

                </div>

            </li>

            <li>

                <div class="pic1">

                    <img src="./抖音解决方案4.png" alt="">

                </div>

                <div class="text1">

                    <h4>一键发布多域</h4>

                    <p>发布头条i需要官网确认,比如新闻</p>

                </div>

            </li>

        </ul>

    </div>

</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/58608.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安全日志记录的重要性

1024程序员节不仅是对技术的庆祝&#xff0c;也是我们审视自己工作中责任的重要时刻。在现代信息安全体系中&#xff0c;安全日志记录是最关键的环节之一。它不仅能帮助企业或开发者及时发现安全威胁&#xff0c;还能在事后追踪攻击源、分析事件并采取补救措施。因此&#xff0…

架构师备考-系统分析与设计(结构化方法)

定义 1978年&#xff0c;E.Yourdon 和 L.L.Constantine 提出了结构化方法&#xff0c;即 SASD 方法&#xff0c;也可称为面向功能的软件开发方法或面向数据流的软件开发方法。Yourdon 方法是20世纪80年代使用最广泛的软件开发方法。 结构化方法提出了一组提高软件结构合…

正点原子阿尔法ARM开发板-IMX6ULL(十二)——驱动开发的简单介绍

文章目录 一、前言二、Linux驱动开发思维三、驱动开发分类四、应用程序和驱动的交互原理五、字符设备驱动开发流程 一、前言 也终于是到了这个最是激动人心的时刻了&#xff0c;那个也是从本科&#xff0c;就听说过的词汇&#xff0c;非常的让人神往&#xff0c;这个词对我而言…

人工智能原理实验二:搜索方法

一、实验目的 本实验课程是计算机、智能、物联网等专业学生的一门专业课程&#xff0c;通过实验&#xff0c;帮助学生更好地掌握人工智能相关概念、技术、原理、应用等&#xff1b;通过实验提高学生编写实验报告、总结实验结果的能力&#xff1b;使学生对智能程序、智能算法等…

Chromium 中chrome.fontSettings扩展接口定义c++

一、chrome.fontSettings 使用 chrome.fontSettings API 管理 Chrome 的字体设置。 权限 fontSettings 要使用 Font Settings API&#xff0c;您必须在扩展程序中声明 "fontSettings" 权限 清单。例如&#xff1a; {"name": "My Font Settings E…

npm install | npm ERR! Incorrect or missing password.

前端项目更新&#xff0c;执行npm install 安装依赖的时候&#xff0c;经常会出现一些莫名奇妙的问题&#xff0c;其中由于开发在本地编写的时候&#xff0c;可能会引用一些私有包&#xff0c;部署到服务器时就会出现问题&#xff0c;下面是排查过程。 npm ERR! code E401 npm …

C++——写一函数,将一个3x3的整型矩阵转置。用指针或引用方法处理。

没注释的源代码 #include <iostream> using namespace std; void move(int *p); int main() { int a[3][3],*p; cout<<"please input matrix:"<<endl; for(int i0;i<3;i) { for(int j0;j<3;j) { …

React + SpreadJS 开发时常见问题

在使用React与SpreadJS进行开发时&#xff0c;可能会遇到各种各样的问题。以下是一些常见的问题及其解决建议&#xff1a; 1. SpreadJS初始化失败 问题描述&#xff1a; 有时候SpreadJS的初始化可能会失败&#xff0c;特别是在React组件的生命周期内不当的初始化时机。 解决…

【AI应用】大模型工具如何助力文字创意工作(提示词Prompt+谷歌NotebookLM)

出发点&#xff1a;身处信息碎片和过载的时代&#xff0c;如何在日常工作学习中汇总并高效梳理知识&#xff1f;普通用户又如何激发AI大模型产出高质量的结果呢&#xff1f;本文将给出这两个问题的一些解决思路。 0、提纲&#xff1a; 提示词工程应知应会NotebookLM惊艳登场总…

springboot 使用 weixin-java-pay 支付demo

springboot引入依赖 <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-pay</artifactId><version>4.6.0</version></dependency>配置 wx:pay:appId: *********mchId: ********apiV3Key: ******…

数据安全-接口数据混合加密笔记

接口数据传输安全设计方案 采用非对称加密对称加密混合方式&#xff0c;接口混合加、解密过程梳理&#xff1a; 后端准备sm2公钥和私钥后端将SM2公钥传输到前端前端生成SM4密钥前端使用SM2公钥加密SM4秘钥&#xff0c;获得密文使用SM4秘钥加密数据将密文和加密数据传输至后端…

深入 Prometheus 监控生态 - 第六篇:与 Grafana 实现系统全面监控(健康状态和任务状态看板)

文章目录 前言部署 Grafana 和连接 Prometheus 数据源简单部署 Grafana 构建系统监控看板1. 监控信息查看2. 看板制作&#xff08;表格图&#xff09;配置表格图&#xff08;Line Chart&#xff09; 配置告警规则与通知1. Prometheus 中的告警规则2. Grafana 告警配置&#xff…

剧本杀门店预约小程序,在线一键预约体验

剧本杀作为集社交、角色扮演、休闲娱乐为一体的游戏&#xff0c;吸引了年轻人的目光。当下&#xff0c;随着市场的发展&#xff0c;剧本杀行业正面临挑战&#xff0c;对于门店来说&#xff0c;如何找到新的发展方向&#xff0c;在市场中脱颖而出是重中之重&#xff01; 线上线…

Python自动化数据备份与同步

在日常运维工作中&#xff0c;定期备份重要数据是确保业务连续性和数据安全的关键步骤。本文将介绍如何使用Python的shutil库来复制文件和目录&#xff0c;并结合schedule库实现定时执行备份任务的功能。 1. 环境准备 首先&#xff0c;我们需要安装schedule库&#xff0c;这个…

使用Html5基本标签实现“时空电影网”案例步骤及详细代码

根据您的需求&#xff0c;我为您实现了对“时空电影网”电影节页面的美化。以下是详细的步骤&#xff1a; 设置一级标题“电影节”文字的颜色&#xff1a;将一级标题的颜色设置为深蓝色&#xff08;#0000FF&#xff09;。 <h1><font color"darkblue">电…

SpringBoot技术:闲一品交易的新机遇

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;闲一品交易平台当然也不能排除在外。闲一品交易平台是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&…

柔性数组的使用

1.只有一个malloc的情况 //柔性数组的使用 #include<stdio.h> #include<stdlib.h> #include<errno.h> struct s {int i;int a[]; }; int main() {struct s* ps (struct s*)malloc(sizeof(struct s) 20 * sizeof(int));if (ps NULL){perror("malloc&…

gradio RuntimeError: async generator raised StopAsyncIteration

主要是return和yield混用导致的&#xff0c;yield是可以流式回复&#xff0c;return一次性回答&#xff1b;需要通义&#xff0c;都改成yield&#xff0c;但不是流式的内容需要最后再加个return 移除了所有的 return 语句&#xff0c;改为 yield 加 return。在生成器函数中&…

SpringAI你知道吗???

目前AI的浪潮已经居高不下了&#xff0c;因此我最近也开始了有关AI的项目&#xff0c;再开始AI的项目之前&#xff0c;我们也要先熟知AI的开发文档和知识&#xff0c;才能更好的开发项目&#xff0c;因此特地从官网查看了有关SpringAI的使用。 Spring AI 官方说明文档&#xf…

从0到1,用Rust轻松制作电子书

我之前简单提到过用 Rust 做电子书&#xff0c;今天分享下如何用Rust做电子书。制作电子书其实用途广泛&#xff0c;不仅可以用于技术文档&#xff08;对技术人来说非常方便&#xff09;&#xff0c;也可以制作用户手册、笔记、教程等&#xff0c;还可以应用于文学创作。 如果…