CSS知识点详解:display+float

server/2024/9/23 10:18:55/

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.ppmy.cn/server/102540.html

相关文章

基础到实践:深入了解HTML和CSS

目录 1. HTML入门 示例:HTML基本结构 2. CSS基础 示例:基本CSS样式 3. 结合HTML和CSS 示例:使用CSS调整HTML结构 4. CSS布局技巧 示例:使用Flexbox进行布局 总结 HTML和CSS的综合应用 项目概览 1. 创建项目结构 2. 编…

leetcode-416. 分割等和子集

题目描述 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集,使得两个子集的元素和相等。 示例 1: 输入:nums [1,5,11,5] 输出:true 解释:数组可以分割成 [1, 5, 5] 和 [11] 。…

WPF中XAML相对路径表示方法

在WPF XAML中,相对路径是一种非常实用的方式来引用资源文件,如图像、样式表和其他XAML文件。相对路径可以帮助您构建更加灵活和可移植的应用程序,因为它允许资源文件的位置相对于XAML文件的位置进行定位。 相对路径的表示方法 在XAML中&…

linux开通端口命令

这块需要开通8088 8083 端口限制 查看已开放端口:sudo firewall-cmd --list-ports 开放8083端口:sudo firewall-cmd --add-port8088/tcp --permanent 开放8088端口:sudo firewall-cmd --add-port8083/tcp --permanent 移除端…

人类是怎样提取特征并学习和表达复杂的模式的?

人类提取特征、学习和表达复杂模式的过程涉及多方面的认知和神经机制。一些关键步骤和机制涉及: 感知是人类获取外部信息的过程。通过感官(视觉、听觉、触觉等),人类可以接触到各种数据。注意力机制帮助我们从大量信息中筛选出重要…

HTTP范围放大攻击简记

HTTP范围放大攻击中的放大效应是通过滥用HTTP协议中的Range头字段来实现的。 HTTP Range请求的正常用途 HTTP Range头字段允许客户端请求特定字节范围的资源片段。这种功能主要用于以下场景: 断点续传:客户端可以在下载中断后只请求未完成部分&#x…

基于JAVA的社团管理系统的设计与实现

TOC springboot270基于JAVA的社团管理系统的设计与实现 第1章 绪论 1.1 课题背景 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供…

XSS-过滤特殊符号的正则绕过

靶场网址:https://xss.pwnfunction.com/ 题目源码: mafia (new URL(location).searchParams.get(mafia) || 11)mafia mafia.slice(0, 50)mafia mafia.replace(/[\\\"\\-\!\\\[\]]/gi, _)mafia mafia.replace(/alert/g, _)eval(mafia) 分析代码…