尚硅谷html5+css3(4)浮动

1.浮动的概念

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*通过浮动可以使一个元素向其父元素的左侧或右侧移动
                使用float属性设置子资源的浮动
                可选值:
                    none默认值,元素不浮动
                    left向左浮动
                    right向右浮动
                注意,元素设置浮动以后,水平布局的等式不用必须满足
                    且从文档流中脱离,不再占用文档流的内容
                    所以box2(在文档流中)会向上移动
                */
            float: left;
        }
    /*浮动的特点:
        1.浮动元素会完全脱离文档流,不再占据文档流的位置
        2.设置浮动以后元素会向父元素的左侧或右侧移动,
        3.浮动元素默认不会从父元素中移出
        4.浮动元素向左或向右移动时,不会超过它前面的其他浮动元素
        5.如果浮动元素的上面是不浮动的块元素,则浮动元素无法上移
        6.浮动元素不会超过它上面浮动的兄弟元素

    简单总结:浮动目前来讲它的主要作用是让元素可以水平排列
        可以制作一些水平布局
        */
        .box2 {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            /*或者box2也设置浮动,这样可以横向排列*/
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

2.浮动的特点

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*脱离文档流的特点
            块元素:
                1.块元素不会独占页面的一行
                2.脱离文档流以后,块元素的宽度和高度默认都被内容撑开
            行内元素:
                行内元素脱离文档流后会变成块元素,特点和块元素一样
            脱离文档流后,不再区分块和行内*/
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /*浮动元素不会盖住文字,文字会自动环绕在浮动元素周围
          所以可以用浮动设置文字环绕效果*/
            float: left;
        }

        .box2 {
            background-color: yellowgreen;
            /*设置浮动后,背景不会占满一行,而是只占文字的部分*/
            float: left;
        }

        .box3 {
            background-color: orange;
            /*设置浮动后,背景不会占满一行,而是只占文字的部分*/
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。
    <div class="box2">hello2</div>
    <div class="box3">hello3</div>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VSCode中vue的packag.json报错:unable to load schema from‘ http://json.schema‘...问题解决

package.json有这个报错&#xff0c;类似于这种问题一般是网络连接有问题&#xff0c;无法加载重启一下就好。 但是如果是没有网络或者云桌面等环境不能连接外网&#xff0c;就在设置中把这个设置一下&#xff0c;这样就不报错了&#xff0c;根据需要选择处理。

系统开发实训小组作业week7 —— 优化系统开发计划

目录 1. 建立规则&#xff0c;仪式&#xff0c;流程&#xff0c;模式 2. 给好行为正面的反馈 3. 明确指出不合适的行为&#xff0c;必要时调整人员 在 “系统开发实训课程” 中&#xff0c;我们小组的项目是 “电影院会员管理系统” 。在项目的开发过程中&#xff0c;我们遇…

云原生:企业数字化转型的引擎与未来

一&#xff0c;引言 随着信息技术的飞速发展&#xff0c;企业数字化转型已成为时代的必然趋势。在这场深刻的变革中&#xff0c;云原生技术以其独特的优势&#xff0c;逐渐成为推动企业数字化转型的核心动力。本文将详细探讨云原生技术的内涵、发展历程&#xff0c;以及在企业数…

ASP.NET MVC企业级程序设计 (EF+三层架构+MVP实现查询数据)

目录 效果图 实现过程 1创建数据库 2创建项目文件 3创建控制器&#xff0c;右键添加&#xff0c;控制器 ​编辑 注意这里要写Home​编辑 创建成功 数据模型创建过程之前作品有具体过程​编辑 4创建DAL 5创建BLL 6创建视图&#xff0c;右键添加视图 ​编辑 7HomeContr…

ArcGIS Server 10.8.1安装

目录 单机部署 ArcGIS Web Adaptor 优点 缺点 ArcGIS Server 使用的端口 ArcGIS GeoAnalytics Server 使用的端口 官方安装文档&#xff1a; ArcGIS Server 系统要求—ArcGIS Enterprise | ArcGIS Enterprise 文档 单机部署 ArcGIS Web Adaptor 在此示例中&#xff0c…

【Unity】RPG小游戏创建游戏中的交互

RPG小游戏创建游戏中的交互 创建可交互的物体的公共的父类&#xff08;Interactable&#xff09;InteractableObject 类NPCObject 类PickableObject 类 创建可交互的物体的公共的父类&#xff08;Interactable&#xff09; InteractableObject 类 using System.Collections; u…

【深入理解Java IO流0x0A】NIO实战-网络聊天室

本篇博客将进行NIO编程实战&#xff0c;实现一个简单聊天室。 我们来通过 SocketChannel 和 ServerSocketChannel 实现一个 0.1 版的聊天室&#xff0c;先说一下需求&#xff0c;比较简单&#xff0c;服务端启动监听客户端请求&#xff0c;当客户端向服务器端发送信息后&#x…

Unity Shader 流光 边缘光

前言 Unity2021.3.23 一、实现原理 Time控制UV的变化,再采样一张流光贴图.即可实现流光效果。 二、效果及源码展示 1.流光效果 效果描述: 1.边缘光(菲尼尔), 2.从上到下扫描光. 效果图如下: 代码如下&#xff1a; Shader "Unlit/ScanCode" {Properties{_MainTe…

SpringBoot集成EasyExcel 3.x:高效实现Excel数据的优雅导入与导出

目录 介绍 快速开始 引入依赖 简单导出 定义实体类 自定义转换器 定义接口 测试接口 复杂导出 自定义注解 定义实体类 数据映射与平铺 自定义单元格合并策略 定义接口 测试接口 一对多导出 自定义单元格合并策略 测试数据 简单导入 定义接口 测试接口 参…

解读MongoDB官方文档获取mongo7.0版本的安装步骤与基本使用

mongo式一款NOSQL数据库&#xff0c;用于存储非结构化数据&#xff0c;mongo是一种用于存储json的数据数据&#xff0c;可以通过mongo提供的命令解析json获取想要的值。 数据模型 了解关系数据库会很熟悉database,table,row,column的概念&#xff0c;分别是数据库&#xff0c…

【SpringBoot】返回参数

返回参数 返回页面返回数据返回 html 代码返回 json 数据两数相加用户登录 返回页面 首先在 static 文件夹中创建 index.html 文件&#xff1a; 代码&#xff1a; <html> <body><h1>hello word!!!</h1><p>this is a html page</p> <…

聚类能代替分类吗?

聚类和分类是两种不同的机器学习方法&#xff0c;它们在处理数据时有着不同的目的和应用场景。 分类&#xff1a;分类是一种监督学习方法&#xff0c;它需要已标记的训练数据集。在分类中&#xff0c;算法会学习如何将输入数据映射到预定义的类别中。例如&#xff0c;给定一组包…

如何判断超级充电测试负载是否合格?

超级充电测试负载是电动汽车充电设备的重要组成部分&#xff0c;其性能直接影响到电动汽车的充电效率和安全性。因此&#xff0c;判断超级充电测试负载是否合格是非常重要的。以下是一些判断标准&#xff1a; 超级充电测试负载的充电效率是衡量其性能的重要指标&#xff0c;合格…

leetcode代码记录(Z 字形变换

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xff1a;…

验证ElasticSearch 分词的BUG

验证ElasticSearch 分词的BUG 环境介绍 ElasticSearch 版本号: 6.7.0 BUG 重现 创建测试案例索引 PUT test_2022 {"settings": {"analysis": {"filter": {"pinyin_filter": {"type": "pinyin"}},"analy…

kafka(六)——存储策略

存储机制 kafka通过topic作为主题缓存数据&#xff0c;一个topic主题可以包括多个partition&#xff0c;每个partition是一个有序的队列&#xff0c;同一个topic的不同partiton可以分配在不同的broker&#xff08;kafka服务器&#xff09;。 关系图 partition分布图 名称为t…

互联网元搜索引擎SearXNG

最近有个很火的项目叫 FreeAskInternet&#xff0c;其工作原理是&#xff1a; 第一步、用户提出问题第二步、用 SearXNG&#xff08;本地运行&#xff09;在多个搜索引擎上进行搜索第三步、将搜索结果传入 LLM 生成答案 所有进程都在本地运行&#xff0c;适用于需要快速获取信…

【深度学习】AI修图——DragGAN原理解析

1、前言 上一篇&#xff0c;我们讲述了StyleGAN2。这一篇&#xff0c;我们就来讲一个把StyleGAN2作为基底架构的DragGAN。DragGAN的作用主要是对图片进行编辑&#xff0c;说厉害点&#xff0c;可能和AI修图差不多。这篇论文比较新&#xff0c;发表自2023年 原论文&#xff1a…

vscode中调试C++程序,解读debug步骤

下面对几个调试的按键进行解释&#xff1a; 按钮1&#xff1a;运行/继续 F5&#xff0c;真正的一步一步运行。当有断点的时候&#xff0c;只会执行断点所在行语句和开头结尾两行语句。 按钮2&#xff1a;单步跳过(又叫逐过程) F10&#xff0c;按语句单步执行。当有函数时&#…

制作适用于openstack平台的win10镜像

1. 安装准备 从MSDN下载windows 10的镜像虚拟机开启CPU虚拟化的功能。从Fedora 网站下载已签名的 VirtIO 驱动程序 ISO 。 创建15 GB 的 qcow2 镜像&#xff1a;qemu-img create -f qcow2 win10.qcow2 15G 安装必要的软件 yum install qemu-kvm qemu-img virt-manager libvir…