CSS 显示、定位、布局、浮动
一、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 |
| clip | 剪辑一个绝对定位的元素 | shape |
| cursor | 显示光标移动到指定的类型 | url |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto |
| position | 指定元素的定位类型 | absolute |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto |
| z-index | 设置元素的堆叠顺序 | number |
三、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 显示: CSS display属性设置元素应如何显示;CSS visibility属性指定元素应可见还是隐藏。隐藏元素可以通过display属性设置为“none”,也可以通过visibility属性设置为“hidden”。两者的区别:visibility:hidden可以隐藏某…...
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…...
项目实战:优化Servlet,把所有围绕Fruit操作的Servlet封装成一个Servlet
1、FruitServlet 这些Servlet都是围绕着Fruit进行的把所有对水果增删改查的Servlet放到一个Servlet里面,让tomcat实例化一个Servlet对象 package com.csdn.fruit.servlet; import com.csdn.fruit.dto.PageInfo; import com.csdn.fruit.dto.PageQueryParam; import c…...
Go语言函数参数
文章目录 Go语言函数参数1. **函数参数的定义**:2. **参数的数量**:3. **参数的数据类型**:4. **参数的命名**:5. **参数的传递**:6. **参数的传递方式**:7. **空白标识符**: Go语言函数参数 在…...
【遍历二叉树的非递归算法,二叉树的层次遍历】
文章目录 遍历二叉树的非递归算法二叉树的层次遍历 遍历二叉树的非递归算法 先序遍历序列建立二叉树的二叉链表 中序遍历非递归算法 二叉树中序遍历的非递归算法的关键:在中序遍历过某个结点的整个左子树后,如何找到该结点的根以及右子树。 基本思想&a…...
数模之线性规划
线性规划 优化类问题:有限的资源,最大的收益 例子: 华强去水果摊找茬,水果摊上共3个瓜,华强总共有40点体力值,每劈一个瓜能带来40点挑衅值,每挑一个瓜问“你这瓜保熟吗”能带来30点挑衅值,劈瓜消耗20点体力值,问话消耗…...
【C++】AVL树的4中旋转调整
文章目录 前提一、AVL树的结构定义二、AVL的插入(重点)1. 插入的结点在较高左子树的左侧(右单旋)2. 新节点插入较高右子树的右侧(左单旋)3.新结点插入较高右子树的左侧(先右单旋再左单旋&#x…...
【MATLAB源码-第69期】基于matlab的LDPC码,turbo码,卷积码误码率对比,码率均为1/3,BPSK调制。
操作环境: MATLAB 2022a 1、算法描述 本文章介绍了卷积码、Turbo码和LDPC码。以相同的码率仿真这三种编码,并对比其误码率性能 信源输出的数据符号(二进制)是相互独立和等概率的; 信道是加性白高斯噪声信道&#…...
Java获取时间戳、字符串和Date对象的相互转换、日期时间格式化、获取年月日
获取时间戳(自1970年1月1日经历的毫秒数值) 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…...
用c语言实现矩阵转置
下面是在 C 语言中实现矩阵转置的示例代码: #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]…...
蓝桥杯官网练习题(移动距离)
题目描述 X 星球居民小区的楼房全是一样的,并且按矩阵样式排列。其楼房的编号为 1,2,3, 当排满一行时,从下一行相邻的楼往反方向排号。 比如:当小区排号宽度为 6 时,开始情形如下: 1 2 3 4 5 6 12 …...
不止于“初见成效”,阿斯利康要让数据流转,以 AI 带动决策智能
“阿斯利康数字化成果在进博会上引人注目,令我感到非常高兴。”这是阿斯利康代表的感慨。 数字化建设目标是利用先进技术来提高企业运营效率,降低成本。在第六届进博会的7.2 B2-01展区,阿斯利康不仅展示了全球领先的生物医药和医疗器械成果&a…...
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. 核心思想是在机器人前方的路径上找到一个点,并找到一个合适的线速度和角速度,以驱…...
安装RabbitMQ
安装RabbitMQ 下载需要的两个包 # 这直接就可以安装了,下面 ‘上传对应的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…...
Spring基础(1):两个概念
最近看了点Spring的源码,于是来稍微扯一扯,希望能帮一部分培训班出身的朋友撕开一道口子,透透气。 广义上的Spring指的是Spring整个项目,包含SpringBoot、SpringCloud、SpringFramework、SpringData等等, 本系列文章…...
国产化精密划片机已得到国内更多厂家青睐
国产化精密划片机在近年来得到了国内许多厂家的青睐,这是因为精密划片机在工业生产中有着重要作用。这种设备主要用于高精密切割加工,适用于多种材料,包括硅、石英、氧化铝、氧化铁等。 以精密晶圆划片机为例,这种设备采用了自主研…...
Voice Control for ChatGPT简单高效的与ChatGPT进行交流学习。
快捷又不失灵活性 日常生活中,我们与亲人朋友沟通交流一般都是喜欢语音的形式来完成的,毕竟相对于文字来说语音就不会显的那么的苍白无力,同时最大的好处就是能解放我们的双手吧,能更快实现两者间的对话,沟通便更高效…...
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 中文开发者网站 …...
计算机基础知识49
三板斧的使用(views.py) 三个方法:HttpResponse: 返回的是字符串render : 返回html文件redirect : 返回加载HTML页面的 def html(request):print(from html)# return HttpResponse(request) # 它返回的是字符串return render(request,html.html) # 返回html# ret…...
el-table给某一行加背景色
数据列表中总价大于100的一行背景色为红色,效果图如下: 代码示例: <template><div id"app"><!-- 测试区域!!!!!!!!&am…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
