• 2024-07-01详细分析css float 属性以及position:absolute 的区别
    CSS中的float属性和position:absolute属性都可以用来定位元素,但它们在布局和行为上有着根本的区别。下面是对这两个属性的详细分析:float属性float属性主要用于让元素围绕文本流动,通常用于图像或文本块的布局。它有四个可能的值:left、right、none(默认值)、以及inherit。布局
  • 2024-06-12CSS 遮罩层
    html<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="basic.css"></head><body><divclass="masked-element"><divclass="content">这里是需要遮罩的内容</div>
  • 2024-06-01html中轮播图的做法及源码
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
  • 2024-05-14绝对定位(absolute)居中问题:transform: translate(-50%);
     transform:translate(-50%); translate(50%)相当于translateX(50%),表示沿X轴方向平移元素自身宽度的50%。 绝对定位是最常见的问题是难以居中,所以可以改变元素的中心,来达到居中的效果position:absolute;left:50%;transform:translate(-50%); exposit
  • 2024-04-22CSS之定位Position
    前言之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。基本信息Name:p
  • 2024-03-17css简直 恐怖如斯!!! css之前端必知属性!!!
    一、css中实现元素隐藏的几种方法1.opsition:0;        通过透明实现元素隐藏,视觉上隐藏但仍然存在2.display:none;        标签消失,不占页面位置,不显示3.display:block;        独占一行,可设置宽高,块显示二、如何进行元素转换1.    行元
  • 2024-03-12罐液位变化组件
    接上篇 <template><divclass="jarBox"><!--罐子整体+盖--><divclass="bar"><!--罐顶--><divclass="barBefore"></div></div><!--里面液体整体-->
  • 2024-03-09Absolute Beauty
    法一:看这篇题解这种几何意义的转化在看到绝对值的时候一定要有肌肉记忆法二:代数法最多交换一次,肯定考虑答案的增量先按\(a\)排序(因为是绝对值,我们先让一维有序之后考虑消掉绝对值符号)枚举\(i\),考虑\(j\)(\(1≤j<i\)),交换\(i,j\)之后增量为\(\delta=b_i-a_j-c_j+|a_i-b_j|-c_i
  • 2024-02-23HTML中的文档流
    https://blog.csdn.net/ld16631069828/article/details/118852570文档流什么是文档流?文档流:页面从上往下一行一行,其中每行从左至右的顺序,这种排列方式成为文档流。什么是脱离了文档流?脱离文档流意味着它的排列顺序不遵循正常情况下文档的排列顺序,已经脱离了文档流,它不占用空间,
  • 2024-01-20CF1898D Absolute Beauty 题解
    Problem-D-Codeforcesemm,怎么说呢?因为想起之前那个直接去掉绝对值取最大时就是答案的影响,这题并没有想到正确做法。(或者说想到了正确做法,但是因为不知道一个性质所以要大分讨)假如原题满足\(a_i<b_i\),则我们把原题抽象成线段\((a_i,b_i)\),考虑两条线段合并时的情况:
  • 2023-12-27hackthebox absolute insane
     信息收集Payattentiontothelastlinessl-date:wehave7hourclockskew,whichshouldkeepinmindifdoinganykeberosauth.SMB-TCP445smbclient-N-L//10.10.11.181#对面拒绝连接crackmapexecsmbabsolute.htb  #对面存在smbcrackmapexec
  • 2023-11-28Python获取远程指定目录下所有文件的绝对路径
    importparamikoimportos#SSH连接信息hostname="your_remote_host"port=22username="your_username"password="your_password"#远程目录路径remote_directory="/data"#建立SSH连接ssh=paramiko.SSHClient()ssh.se
  • 2023-11-21css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di
  • 2023-11-20CF1898D - Absolute Beauty(绝对值)
    题目地址Solution考虑把\(|a_i-b_i|\)转化为数轴上的线段的一条线段,那么\(swap\)操作可以形象转化为下图(借用官方\(Editoral\))考虑最大的增加(第一张图的情况)即可。Summary学到了绝对值转线段,把指定操作形象化,数形结合(雾
  • 2023-11-10vue+css实现的伪3d旋转罐+液位动态变化
    话不多说先看效果:设计思路:罐是做了三个位置(中=>左,左=>右,右=>中)的动画效果,每个罐轮流使用一次,来实现旋转的效果。中间的光亮做了个变形延迟。罐的透明效果是使用了三层,即最底层是粒子不透明图片,中层是液体组件,最上层是罐体png图片。都是用了绝对定位,请务必设置好位置。液体组
  • 2023-10-31css 设置画对角斜线
    /*通过css画div的对角斜线*/background:linear-gradient(totopright,#EEF2F8,#EEF2F848%,#CEDFF8,#EEF2F851%,#EEF2F8);/*element-uitable表头*/.header-column{height:49px;position:relative;&:before{position:absolute;co
  • 2023-10-16设置页面等待效果
    css*{margin:0;padding:0;}.load{position:absolute;z-index:9999!important;width:100%;height:100%;background:#1c1e20bf;}.loadmain{width:200px;height:60px;color:rgb(255,255,255);position
  • 2023-09-28CSS 基础 3 - 定位 Postion 属性
    CSS基础3-定位Postion属性staticposition属性的默认值,元素随HTML流移动top/left/right/bottom属性无效relative和static类似,元素随HTML流移动。区别:比static多了top/left/right/bottom(设定偏移量)【父相子绝】【可以作为父元素,让内部的absolute元素根
  • 2023-08-22获取拼接后的绝对路径
     importoscurrent_path=os.path.dirname(os.path.abspath(__file__))#获得当前的路径relative_path_yaml_path='../data/t'#获得各个接口请求路径的配置文件的相对路径absolute_path=os.path.join(current_path,relative_path_yaml_path)#获得拼接后的绝
  • 2023-08-04十步学习css定位知识
    十步学习css定位知识   http://www.barelyfitz.com/screencast/html-training/css/positioning/ 这个教程解释了css布局中的以下问题:position:static,position:relative,position:absolute,float 作
  • 2023-08-04个人笔记,关于css样式
    /*引入样式<linkhref="https://fonts.font.im/css?family=Open+Sans"rel="stylesheet"type="text/css">*/html{/*px表示“像素(pixels)”:基础字号为10像素*/font-size:20px;/*Googlefonts输出的CSS*/font-family:'Op
  • 2023-07-23CSS常用基础
     #选择id. 选择类名 position:absolute;这是CSS中用于设置元素定位方式的属性之一。absolute表示该元素会脱离文档流,并相对于它的最近的非static(默认值)定位的父元素进行定位。如果没有符合条件的父元素,那么该元素会相对于整个文档进行定位。使用absolute,元素
  • 2023-07-22position为absolute的元素的生成盒的包含块是其position为absolute、relative、fixed的祖先的内容边界而不是内边距边界
     蓝色区域为.parent的contentbox。由此可以看出,规范中所说的,若某元素的position为absolute,其视口应该为其第一个position为absolute、relative或fixed的祖先元素的内容边界,而不是内边距边界。
  • 2023-07-01CSS中几种定位的简单描述与对比
    静态定位(static):position属性的默认值为static,会忽略top,bottom,left,right或者z-index声明。相对定位(relative)与绝对定位(absolute): 相对定位偏移参考元素是元素本身,而绝对定位以父辈元素中最近的定位元素为参考坐标(父辈没有定位元素则参考html),因此常用“子
  • 2023-06-29元素水平垂直居中的方法
     //利用定位+margin:auto    //position:absolute;    //top:0;    //Left:0;    //right:0;    //bottom:0;    //margin:auto;//利用定位+margin:负值    //position:absolute;    //top