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

CSS 显示、定位、布局、浮动

news 2026/2/10 17:40:24

一、CSS 显示：

        CSS display属性设置元素应如何显示；CSS visibility属性指定元素应可见还是隐藏。隐藏元素可以通过display属性设置为“none”，也可以通过visibility属性设置为“hidden”。两者的区别：visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，即该元素虽然被隐藏，但仍然会影响布局；display：none可以隐藏某个元素，且隐藏的元素不占用任何空间。

        CSS display-块和内联元素：块元素是一个元素，占用全部宽度，在前后都是换行符；内联元素只需必要的宽度，不强制换行。示例：

<style>

p {display:inline;}

</style>

<style>

span

{

display:block;

}

</style>

<style>

table, th, td {

    border: 1px solid black;

}

tr.collapse {

    visibility: collapse;

}

</style>

二、CSS 定位：

        CSS position（定位）属性指定元素的定位类型。position竖向的五个值：static、relative、fixed、absolute、sticky。元素可以使用顶部、底部、左侧、右侧属性定位，但需先设定position属性。

1）、static定位：

HTML元素的默认值是没有定位，遵循正常的文档流对象。静态定位的元素不会受到top、bottom、left、right影响。示例：

<style>

div.static {

    position: static;

    border: 3px solid #73AD21;

}

</style>

2）、fixed定位：

Fixed定位：元素的位置相对于浏览器窗口是固定位置，即窗口是滚动的，元素是不会移动的。示例：

<style>

p.pos_fixed

{

position:fixed;

top:30px;

right:5px;

}

</style>

3）、relative定位：

relative定位元素的定位是相对其正常的位置。移动相对定位元素，但他原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。示例：

<style>

h2.pos_left

{

position:relative;

left:-20px;

}

h2.pos_right

{

position:relative;

left:20px;

}

</style>

4）、absolute定位：

absolute定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那它的位置相对于<html>。示例：

<style>

h2

{

position:absolute;

left:100px;

top:150px;

}

</style>

absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。

5）、sticky定位：

sticky定位未粘性定位，基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。示例：

<style>

div.sticky {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  padding: 5px;

  background-color: #cae8ca;

  border: 2px solid #4CAF50;

}

</style>

所有CSS定位属性：

属性

说明

值

bottom

定义了定位元素下外边距边界与其包含块下边界之间的偏移。

auto
length
%
inherit

clip

剪辑一个绝对定位的元素

shape
auto
inherit

cursor

显示光标移动到指定的类型

url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

left

定义了定位元素左外边距边界与其包含块左边界之间的偏移。

auto
length
%
inherit

overflow

设置当元素的内容溢出其区域时发生的事情。

auto
hidden
scroll
visible
inherit

overflow-y

指定如何处理顶部/底部边缘的内容溢出元素的内容区域

auto
hidden
scroll
visible
no-display
no-content

overflow-x

指定如何处理右边/左边边缘的内容溢出元素的内容区域

auto
hidden
scroll
visible
no-display
no-content

position

指定元素的定位类型

absolute
fixed
relative
static
inherit

right

定义了定位元素右外边距边界与其包含块右边界之间的偏移。

auto
length
%
inherit

top

定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

auto
length
%
inherit

z-index

设置元素的堆叠顺序

number
auto
inherit

三、CSS 布局：

        CSS布局（overflow）属性用于控制内容溢出元素框时显示的方式。CSS overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性只工作于指定高度的块元素上。overflow属性有以下值：

四、CSS 浮动：

CSS 的float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动）往往用于图像。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边边缘碰到包含框或者另一个浮动框的边框为止。

如果把几个浮动的元素放在一起，如果有空间的话，他们将彼此相邻，示例：

<style>

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

</style>

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。Clear属性指定元素两侧不能出现浮动元素。

CSS中所有的浮动属性：

相关文章：

CSS 显示、定位、布局、浮动

一、CSS 显示&#xff1a; CSS display属性设置元素应如何显示&#xff1b;CSS visibility属性指定元素应可见还是隐藏。隐藏元素可以通过display属性设置为“none”&#xff0c;也可以通过visibility属性设置为“hidden”。两者的区别&#xff1a;visibility:hidden可以隐藏某…...

编程日记 2023/11/10 1:21:16

Java 学习笔记

文章目录 一、集合1.1 List1.1.1 ArrayList1.1.2 Vector1.1.3 LinkedList 1.2 Deque1.3 Set1.4 Map1.4.1 HashMap1.4.2 LinkedHashMap 1.5 注意事项 二、函数式接口和 Lambda 表达式三、方法引用3.1 静态方法引用3.2 实例方法引用3.2 特定类型的方法引用3.4 构造器引用 四、Str…...

编程日记 2023/11/10 1:20:15

项目实战：优化Servlet，把所有围绕Fruit操作的Servlet封装成一个Servlet

1、FruitServlet 这些Servlet都是围绕着Fruit进行的把所有对水果增删改查的Servlet放到一个Servlet里面&#xff0c;让tomcat实例化一个Servlet对象 package com.csdn.fruit.servlet; import com.csdn.fruit.dto.PageInfo; import com.csdn.fruit.dto.PageQueryParam; import c…...

编程日记 2023/11/10 1:19:14

Go语言函数参数

文章目录 Go语言函数参数1. **函数参数的定义**&#xff1a;2. **参数的数量**&#xff1a;3. **参数的数据类型**&#xff1a;4. **参数的命名**&#xff1a;5. **参数的传递**&#xff1a;6. **参数的传递方式**&#xff1a;7. **空白标识符**&#xff1a; Go语言函数参数 在…...

编程日记 2023/11/10 1:17:12

【遍历二叉树的非递归算法,二叉树的层次遍历】

文章目录 遍历二叉树的非递归算法二叉树的层次遍历 遍历二叉树的非递归算法 先序遍历序列建立二叉树的二叉链表 中序遍历非递归算法 二叉树中序遍历的非递归算法的关键&#xff1a;在中序遍历过某个结点的整个左子树后&#xff0c;如何找到该结点的根以及右子树。 基本思想&a…...

编程日记 2023/11/10 1:16:11

数模之线性规划

线性规划 优化类问题&#xff1a;有限的资源&#xff0c;最大的收益 例子: 华强去水果摊找茬&#xff0c;水果摊上共3个瓜&#xff0c;华强总共有40点体力值,每劈一个瓜能带来40点挑衅值,每挑一个瓜问“你这瓜保熟吗”能带来30点挑衅值,劈瓜消耗20点体力值&#xff0c;问话消耗…...

编程日记 2023/11/10 1:15:10

【C++】AVL树的4中旋转调整

文章目录 前提一、AVL树的结构定义二、AVL的插入&#xff08;重点&#xff09;1. 插入的结点在较高左子树的左侧&#xff08;右单旋&#xff09;2. 新节点插入较高右子树的右侧&#xff08;左单旋&#xff09;3.新结点插入较高右子树的左侧&#xff08;先右单旋再左单旋&#x…...

编程日记 2023/11/10 1:14:09

【MATLAB源码-第69期】基于matlab的LDPC码，turbo码，卷积码误码率对比，码率均为1/3，BPSK调制。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 本文章介绍了卷积码、Turbo码和LDPC码。以相同的码率仿真这三种编码&#xff0c;并对比其误码率性能 信源输出的数据符号&#xff08;二进制&#xff09;是相互独立和等概率的&#xff1b; 信道是加性白高斯噪声信道&#…...

编程日记 2023/11/10 1:13:08

Java获取时间戳、字符串和Date对象的相互转换、日期时间格式化、获取年月日

获取时间戳&#xff08;自1970年1月1日经历的毫秒数值&#xff09; package org.example;import java.util.Date;public class Main {public static void main(String[] args) {Date date1 new Date(1699540662210L);System.out.println(date1.getTime());Date date2 new Dat…...

编程日记 2023/11/10 1:12:07

用c语言实现矩阵转置

下面是在 C 语言中实现矩阵转置的示例代码&#xff1a; #include <stdio.h> #define ROWS 3 #define COLS 3 void transpose(int matrix[ROWS][COLS]) { int temp; for(int i0; i<ROWS; i) { for(int j0; j<i; j) { temp matrix[i][j]; matrix[i][j] matrix[j]…...

编程日记 2023/11/10 1:10:05

蓝桥杯官网练习题（移动距离）

题目描述 X 星球居民小区的楼房全是一样的&#xff0c;并且按矩阵样式排列。其楼房的编号为 1,2,3, 当排满一行时&#xff0c;从下一行相邻的楼往反方向排号。 比如&#xff1a;当小区排号宽度为 6 时&#xff0c;开始情形如下&#xff1a; 1 2 3 4 5 6 12 …...

编程日记 2023/11/10 1:09:03

不止于“初见成效”，阿斯利康要让数据流转，以 AI 带动决策智能

“阿斯利康数字化成果在进博会上引人注目&#xff0c;令我感到非常高兴。”这是阿斯利康代表的感慨。 数字化建设目标是利用先进技术来提高企业运营效率&#xff0c;降低成本。在第六届进博会的7.2 B2-01展区&#xff0c;阿斯利康不仅展示了全球领先的生物医药和医疗器械成果&a…...

编程日记 2023/11/10 1:08:02

nav2 调节纯追踪算法

纯追踪算法 纯追踪基础 The core idea is to find a point on the path in front of the robot and find the linear and angular velocity to help drive towards it. 核心思想是在机器人前方的路径上找到一个点&#xff0c;并找到一个合适的线速度和角速度&#xff0c;以驱…...

编程日记 2023/11/10 1:07:02

安装RabbitMQ

安装RabbitMQ 下载需要的两个包 # 这直接就可以安装了&#xff0c;下面 ‘上传对应的rmp包’ 操作 [rootrabbitmq-1 ~]# curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash [rootrabbitmq-1 ~]# yum install erlang-21.3.8.2…...

编程日记 2023/11/10 1:06:00

Spring基础(1)：两个概念

最近看了点Spring的源码&#xff0c;于是来稍微扯一扯&#xff0c;希望能帮一部分培训班出身的朋友撕开一道口子&#xff0c;透透气。 广义上的Spring指的是Spring整个项目&#xff0c;包含SpringBoot、SpringCloud、SpringFramework、SpringData等等&#xff0c; 本系列文章…...

编程日记 2023/11/10 1:05:00

国产化精密划片机已得到国内更多厂家青睐

国产化精密划片机在近年来得到了国内许多厂家的青睐&#xff0c;这是因为精密划片机在工业生产中有着重要作用。这种设备主要用于高精密切割加工&#xff0c;适用于多种材料&#xff0c;包括硅、石英、氧化铝、氧化铁等。 以精密晶圆划片机为例&#xff0c;这种设备采用了自主研…...

编程日记 2023/11/10 1:03:59

Voice Control for ChatGPT简单高效的与ChatGPT进行交流学习。

快捷又不失灵活性 日常生活中&#xff0c;我们与亲人朋友沟通交流一般都是喜欢语音的形式来完成的&#xff0c;毕竟相对于文字来说语音就不会显的那么的苍白无力&#xff0c;同时最大的好处就是能解放我们的双手吧&#xff0c;能更快实现两者间的对话&#xff0c;沟通便更高效…...

编程日记 2023/11/10 1:02:57

flutter生态一统甜夏 @Android @ios @windowse @macos @linux @Web

(愿景)G o o g l e 中 国flutter生态一统天下(IT) Web Android ios Windowse Macos Linux Google中国https://space.bilibili.com/64169458 https://pub-web.flutter-io.cn 构建 Flutter Web 应用 构建 Flutter Web 应用 - Flutter 中文文档 - Flutter 中文开发者网站 …...

编程日记 2023/11/10 1:01:56

计算机基础知识49

三板斧的使用(views.py) 三个方法&#xff1a;HttpResponse: 返回的是字符串render : 返回html文件redirect : 返回加载HTML页面的 def html(request):print(from html)# return HttpResponse(request) # 它返回的是字符串return render(request,html.html) # 返回html# ret…...

编程日记 2023/11/10 1:00:55

el-table给某一行加背景色

数据列表中总价大于100的一行背景色为红色&#xff0c;效果图如下&#xff1a; 代码示例&#xff1a; <template><div id"app"><!-- 测试区域&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…...

编程日记 2023/11/10 0:59:54

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03