CSS知识点详解:display+float

news2024/11/24 16:35:25

display:浮动

1.block:使元素呈现为块级元素,可设置宽高

display: block;

特点:使元素呈现为块级元素,即该元素会以新行开始,占据整行的宽度,即使其宽度未满。

例子

2.inline:使元素呈现为内联元素,不可设置宽高

display:inline:用这个就会变行内元素,宽高都不可调整,而且变小

display: inline;

特点:使元素呈现为内联元素,即该元素与其他元素在同一行内显示,仅占据内容所需的宽度。

例子span, a 等元素默认是内联元素。

3.inline-block:控制块元素排到一行

inline-block:用这个就会变成块级元素,但是两个相同的中间有间距,并且不能去掉间距,很少人使用

xx{display: inline-block;}

特点:使元素同时具有内联元素和块级元素的特性。元素会与其他内联元素同在一个行内显示,同时可以设置宽度和高度。

例子:此设置常用于按钮或图片等需要设置尺寸但又希望与文本同行显示的场景。

4.none:控制元素的显示和隐藏

xx{
  display: none;
}

特点:使元素及其子元素完全不显示,且不占据任何空间,就像不存在一样。

例子:常用于完全隐藏元素的场景,比如通过CSS或JavaScript进行动态显示和隐藏。让div元素隐藏

float:

left:元素向左浮动
right:元素向右浮动
none:默认值。元素不浮动,并会显示在其文本中出现的位置

 

 

拓展:悬浮菜单

使用diaplay:none进行隐藏

使用diaplay:block或者inline,让其重新显现,

如果是块元素就选diaplay:block被隐藏的部分就会以块元素的形式出现

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

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

相关文章

队列(笔记)

文章目录 1. 概念2. 实现方式3. 复杂度其他 4. 实际应用5. 内容出处 1. 概念 队列:其实就是排队。像我们在银行窗口取钱、车站买车票等都可以叫队列。 特点:队列只允许在后端(rear)进行插入操作,在前端(front)进行删除操作(即先进先出…

算法刷题记录 八十五【图论的广度优先搜索理论基础】

前言 图论章节第2篇。 第1篇:记录 八十二【图论理论基础及深度优先搜索算法】; 本文:记录 八十五【图论的广度优先搜索理论基础】 一、广度优先搜索理论基础 广度优先搜索理论基础 参考链接 1.1 知识点框架 1.2 模拟广度搜索的过程 在有向…

Llama 3.1深度解析:405B、70B及8B模型的多语言与长上下文处理能力

Llama 3.1 发布了!今天我们迎来了 Llama 家族的新成员 Llama 3.1 进入 Hugging Face 平台。我们很高兴与 Meta 合作,确保在 Hugging Face 生态系统中实现最佳集成。Hub 上现有八个开源权重模型 (3 个基础模型和 5 个微调模型)。 Llama 3.1 有三种规格: …

字符串拼接和反转

定义一个方法,把int数组中的数据按照指定的格式拼接成一个字符串 调用该方法,并在控制台输出结果 例如: 数组为 int[] arr [1,2,3]; 执行方法后的输出结果为:[1,2,3] package stringdemo;public class StringDemo3 {public static void…

洋牡丹:多彩花语与深邃寓意

一、洋牡丹概述 洋牡丹,学名为花毛茛,其名称的由来颇为有趣。因花型酷似牡丹花,且从国外引入栽培,故得 “洋牡丹” 这一亲切的称呼。 洋牡丹的常见品种繁多,有单瓣和重瓣之分。单瓣的洋牡丹清新雅致,花瓣舒…

docker 最新可用镜像源地址

无论是docker桌布版本,还是linux版本通用 直接更换镜像源地址即可:亲测目前可用 { "registry-mirrors": ["https://0c105db5188026850f80c001def654a0.mirror.swr.myhuaweicloud.com","https://5tqw56kt.mirror.aliyuncs.com&…

大模型基于指令的知识编辑:InstructEdit技术

人工智能咨询培训老师叶梓 转载标明出处 在知识更新和编辑方面,大模型在特定任务上表现出色,但在面对不同任务时往往力不从心,需要为每个任务单独设计编辑器,这在一定程度上限制了其应用范围。为了解决这一问题,浙江大…

二十二、状态模式

文章目录 1 基本介绍2 案例2.1 Season 接口2.2 Spring 类2.3 Summer 类2.4 Autumn 类2.5 Winter 类2.6 Person 类2.7 Client 类2.8 Client 类的运行结果2.9 总结 3 各角色之间的关系3.1 角色3.1.1 State ( 状态 )3.1.2 ConcreteState ( 具体的状态 )3.1.3 Context ( 上下文 )3.…

【ARM+Codesys 客户案例 】 基于RK3568/A40i/STM32+CODESYS开发AGV运动控制器,支持国产定制

在过去,步科更多的是为AGV客户提供单一、高性能的低压伺服核心部件产品,而现在,步科基于 CODESYS 开发了一款面向AGV机器人的特种控制器 - 青龙1号,开始提供以步科AGV运动控制器FD1X4S系列低压伺服Green系列HMI等为核心的AGV总线控…

keepalived理论--实验

一 . 高可用集群 1.1 集群类型 LB : Load Balance 负载均衡 LVS/HAProxy/nginx ( http/upstream, stream/upstream ) HA : High Availability 高可用集群 数据库、 Redis SPoF: Single Point of Failure ,解决…

2004-2023华为杯数学建模优秀参考论文

笔者整理了2004-2023年华为杯研究生数学建模全部优秀论文和赛题,内容齐全,适合将要参加建模比赛的朋友学习使用。 免费优秀论文获取联系: 建模忠哥小师妹 2004-2023历届华为杯研究生数学建模优秀论文合集:

【数学分析笔记】第2章第1节实数系的连续性(2)

2. 数列极限 2.1 实数系的连续性 2.1.3 确界存在定理 【定理2.1.1】(确界存在定理——实数系连续性定理)非空有上界的数集必有上确界,非空有下界的数集必有下确界。 【证】(写了一些我自己的理解,欢迎数院大神批评指…

Linux基础知识学习(二)

一. 常用基本命令 1. 目录管理 1> 绝对路径、相对路径 绝对路径路径的全称:C:\ProgramData\360safe\xxx.xx 比如说 360safe 目录下,那这个 xxx.xx 文件,对应我们的相对配置就 /xxx.xx cd : 切换目录命令! ./ &…

【html+css 绚丽Loading】-000001 双极乾坤盘

前言:哈喽,大家好,今天给大家分享htmlcss 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 &#x1f495…

【信创】麒麟打包工具初体验

往期好文:关于信创系统(麒麟、统信、中科方德)的10个问题与答复(二) Hello,大家好啊!今天给大家带来一篇关于麒麟桌面操作系统上麒麟打包工具的介绍与使用的文章。麒麟打包工具是一款专门为麒麟…

C/C++ 不定参函数

C语言不定参函数 函数用法总结 Va_list 作用:类型定义,生命一个变量,该变量被用来访问传递给不定参函数的可变参数列表用法:供后续函数进调用,通过该变量访问参数列表 typedefchar* va_list; va_start 作用&#xff…

解决MSPM0G3507芯片锁住的问题

编译环境:Windows 开发软件:Keil 开发主控:立创的MSPM0G3507 我们在MSPM0G3507时,常为芯片锁住烦恼,常见的锁死是因为使用了ST-Link,这里展示的是使用ST-Link后芯片锁死的解决步骤。 现象&a…

MySQL数据库入门,pycharm连接数据库—详细讲解

一.安装MySQL 1.常用MySQL5.7,首先安装MySQL, (一) (二) (三) (四) (五) 2.配置环境变量 打开MySQL安装路径,在其中找到…

python:画函数积分图

《高等数学》同济大学版 P209 编写 test_diff_area.py 如下 # -*- coding: utf-8 -*- """ 函数积分图 y x^3 -x^2 -x1 """ import numpy as np import matplotlib.pyplot as plt from matplotlib.patches import Polygondef func(x):return …

人工智能的普及造成了一场能源危机,但并不是无法解决。

人工智能的普及造成了一场能源危机,但并不是无法解决。 原文链接: 点击访问我的技术博客https://ai.weoknow.comhttps://ai.weoknow.com 人工智能(AI)的爆炸式增长促使科技巨头(包括 Google、Meta、亚马逊和微软等&…