当前位置: 首页 > news >正文

CSS知识点详解:display+float

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被隐藏的部分就会以块元素的形式出现

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • AWS CDK测试初探:掌握Assertion测试模式
  • 如何配置服务单元文件(nginx.service)
  • 深入理解 `@DateTimeFormat` 和 `@JsonFormat` 注解
  • CTF密码学小结
  • 达梦数据库的系统视图v$reserved_words
  • NGINX的源码安装
  • Polars简明基础教程十一:可视化(一)
  • NTP时间服务器的工作原理解析
  • SSH端口转发
  • 12、springboot3 vue3开发平台-前端-记住我功能实现
  • Python向IP地址发送字符串
  • HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)
  • 【Redis】如何从单机架构演化为分布式系统
  • 【JAVA入门】Day20 - 正则表达式
  • XSS之xss game
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • 【Leetcode】104. 二叉树的最大深度
  • 【node学习】协程
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • Asm.js的简单介绍
  • echarts花样作死的坑
  • express.js的介绍及使用
  • express如何解决request entity too large问题
  • gf框架之分页模块(五) - 自定义分页
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • JS函数式编程 数组部分风格 ES6版
  • leetcode讲解--894. All Possible Full Binary Trees
  • Meteor的表单提交:Form
  • nginx 负载服务器优化
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • Python打包系统简单入门
  • Unix命令
  • 前端_面试
  • 时间复杂度与空间复杂度分析
  • 使用Gradle第一次构建Java程序
  • ![CDATA[ ]] 是什么东东
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #1014 : Trie树
  • #pragma预处理命令
  • (11)MATLAB PCA+SVM 人脸识别
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (HAL库版)freeRTOS移植STMF103
  • (ibm)Java 语言的 XPath API
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (分布式缓存)Redis分片集群
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (四)【Jmeter】 JMeter的界面布局与组件概述
  • (四)模仿学习-完成后台管理页面查询
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil