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

前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）

news 2025/9/14 19:26:40

前期内容回顾：

1.常见样式

        text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色

        box-shadow

        border-radio 实现圆角

        margin 内边距

        padding 外边距

        background

2.特殊样式

        媒体查询：@media

        自定义字体：@font-face {

                                font-family:自定义名称；

                                src：url（“字体的路径”）；

                                }

                                选择{

                                        font-family：自定义名称；

                                        }

        转换：transform

        移动：translate（）

        旋转：rotate（）

        缩放：scale（）

        翻转：skew（）

        综合：matrix（）

        过渡：transition   属性  时间  效果（默认值：ease）  延迟（默认值：0）

        动画：@keyframes      animate

          @keyframes  自定义动画名称{

        帧名称1{

                        属性名：值

                        }

        帧名称2{

                        属性名：值

                        }

                        …..

                }

        选择器{

                        animate：自定义动画名称；

                        }

                属性有：动画名称（animate-name）、动画时长（animate-duration）、延迟、次数（默认值：1）、方向、状态

                渐变：background-image：linear-gradient（direction，color-stop1，color-stop2，…）

                        background-image：radius-gradient（direction，color-stop1，color-stop2，…）

                多列：column-count

                字体图标：

                变量：定义变量使用 --名称：值；    使用变量：   属性名：var（--名称）；

                倒影： -webkit-box-reflect   了解

3.页面布局

                table 布局     了解

                div+css  盒子模型    左外边距  左边线  左内边距   内容 右内边距 右边线  右外边距

                box-sizing：border-box；

坐标问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>坐标问题</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 130px;

            height: 50px;

            text-align: left;

            padding-left: 10px;

        }

        div:nth-child(1) {

            background: #DAE8FC;

            position: absolute;

            left: 100px;

            top: 100px;

        }

        div:nth-child(2) {

            background: #D5E8D4;

            position: absolute;

            top: 100px;

            right: 100px;

        }

        div:nth-child(3) {

            background: #FFE6CC;

            position: absolute;

            left: 100px;

            bottom: 100px;

        }

        div:nth-child(4) {

            background: #FFF2CC;

            position: absolute;

            right: 100px;

            bottom: 100px;

        }

    </style>

</head>

<body>

<div>left: 100px;<br>top: 100px;</div>

<div>right: 100px;<br>top: 100px;</div>

<div>left: 100px;<br>bottom: 100px;</div>

<div>right: 100px;<br>bottom: 100px;</div>

</body>

</html>

定位问题

在CSS中定位有以下几种：

1.相对定位

相对定位的参考位置：如果是第一个元素，那么它相对的就是 body（父元素） 的位置；如果是第二个元素开始，它相对的就是前一个元素的位置。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>相对定位</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .container {

            width: 100%;

            height: 400px;

            background-color: #cccccc;

            position: relative;

            left: 30px;

            top: 30px;

        }

        .box {

            width: 100px;

            height: 100px;

            background-color: #317FE5;

            position: relative; /* 相对定位 */

            left: 10px;

            top: 10px;

        }

        .haha {

            width: 100px;

            height: 100px;

            background-color: #8B0000;

            position: relative;

            left: 10px;

            top: 10px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="box"></div>

    <div class="haha"></div>

</div>

</body>

</html>

2.绝对定位

绝对定位就已经脱离了文档流，我们只需要给它固定 x轴坐标（left 或 right 值）以及 y 轴坐标（top 或 bottom 值）就可以了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绝对定位</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .container {

            width: 800px;

            height: 500px;

            background-color: #eeeeee;

            position: relative;

        }

        .box {

            width: 150px;

            height: 150px;

            background-color: #317FE5;

            position: absolute; /* 绝对定位 */

            /*left: 500px;*/

            /*top: 300px;*/

            left: 500px;

            bottom: 50px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="box"></div>

</div>

</body>

</html>

3.固定定位

固定定位固名思意就是它的位置不会随滚动条的变化而发生变化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>固定定位</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            height: 3000px;

        }

        .box {

            width: 100%;

            height: 60px;

            background-color: #317FE5;

            box-shadow: 5px 5px 10px #999999;

            position: fixed;

            left: 0;

            top: 0;

        }

        .aside {

            width: 60px;

            height: 300px;

            background: #8B0000;

            position: fixed;

            left: 0;

            top: 100px;

        }

        .footer {

            width: 100%;

            height: 80px;

            background: #eeeeee;

            position: fixed;

            left: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

<div class="box"></div>

<div class="aside"></div>

<div class="footer"></div>

</body>

</html>

图片居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片居中问题</title>

    <style>

        .box {

            width: 200px;

            height: 200px;

            border: 1px solid #8B0000;

            position: relative;

        }

        img {

            width: 100px;

            height: 100px;

            position: absolute;

            /*left: 25%;*/

            /*top: 25%;*/

            left: 50px;

            top: 50px;

        }

    </style>

</head>

<body>

<div class="box">

    <img src="image/logo.png">

</div>

</body>

</html>

相关文章：

前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）

前期内容回顾&#xff1a; 1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色 box-shadow border-radio 实现圆角 margin 内边距 padding 外边距 background 2.特殊样式 媒体查询&#xff1a;media 自定义字体&#xff1a;font-face { font-family:自定义名称&#…...

编程日记 2024/4/5 15:32:47

向量数据库 | AI时代的航道灯塔

向量数据库 | AI时代的航道灯塔 什么是向量检索服务拍照搜商品 你使用过向量数据库吗&#xff1f;使用体验&#xff1f;为什么向量数据库能借由大模型引起众多关注向量数据库在当前AI热潮中是昙花一现&#xff0c;还是未来AI时代的航道灯塔&#xff1f; 今天的话题主要是讨论向…...

编程日记 2024/4/5 15:27:42

Linux中的conntrack命令深入解析

在Linux网络管理和监控领域&#xff0c;conntrack命令是一个强大的工具&#xff0c;它提供了对netfilter连接跟踪系统的直接访问&#x1f50d;。这篇文章将深入探讨conntrack的由来、底层原理、参数意义&#xff0c;以及其常见用法&#xff0c;并对返回结果的每个字段进行详细解…...

编程日记 2024/4/5 15:19:33

反截屏控制技术如何防止信息通过手机拍照泄漏？

反截屏控制技术为企业数据安全提供了重要的防护措施。通过以下几点&#xff0c;有效阻止了信息通过拍照等方式的泄漏&#xff1a; 反截屏控制开启&#xff0c;用户启动截屏操作时&#xff0c;允许非涉密内容截屏操作&#xff0c;但所有涉密内容窗口会自动隐藏&#xff0c;防止涉…...

编程日记 2024/4/5 15:18:32

0.k8s简介

目录 k8s是什么 k8s不是什么 云原生 微服务 整体式架构与微服务架构 微服务的特性 微服务的优势 k8s是什么 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快…...

编程日记 2024/4/5 15:16:30

VScode 集成终端设置默认打开当前文件夹 mac系统

一.快捷键设置 搜索 openInIntegratedTerminal 如图&#xff1a; 二.设置cmd 默认打开位置 点击设置 搜索 ntegrated:cwd 如下图&#xff1a; 三.查看ip 快捷指令&#xff1a; ipconfig getifaddr en0...

编程日记 2024/4/5 15:13:26

HDLbits 刷题 -- Alwaysblock2

学习&#xff1a; For hardware synthesis, there are two types of always blocks that are relevant: Combinational: always (*)Clocked: always (posedge clk) Clocked always blocks create a blob of combinational logic just like combinational always blocks, but…...

编程日记 2024/4/5 15:12:25

一、Docker部署GitLab（详细步骤）

Docker部署GitLab&#xff08;详细步骤&#xff09; 一、拉取镜像二、启动容器三、修改配置四、修改密码五、浏览器访问 一、拉取镜像 docker安装教程&#xff1a;https://qingsi.blog.csdn.net/article/details/131270071 docker pull gitlab/gitlab-ce:latest二、启动容器 …...

编程日记 2024/4/5 15:11:24

Vue3 Ajax(axios)

Vue 版本推荐使用 axios 来完成 ajax 请求。 安装方法 使用 cdn: <script src"https://unpkg.com/axios/dist/axios.min.js"></script> 使用 npm: $ npm install axios GET 方法 我们可以简单的读取 JSON 数据&#xff1a; const app {data() {r…...

编程日记 2024/4/5 15:09:22

正则表达式引擎库汇合

1.总览表格 一些正则表达式库的对比 index库名编程语言说明代码示例编译指令1Posix正则C语言是C标准库中用于编译POSIX风格的正则表达式库 posix-re.cgcc posix-re.c 2PCRE库C语言提供类似Perl语言的一个正则表达式引擎库。 一般系统上对应/usr/lib64/libpcre.so这个库文件&am…...

编程日记 2024/4/5 15:04:18

eBay买家号注册下单容易死号？是什么原因导致？

随着电子商务的迅猛发展&#xff0c;跨境电商平台eBay日益成为众多消费者和商家的首选。然而&#xff0c;自去年下半年以来&#xff0c;eBay推出的新规则给买家号的注册带来了前所未有的挑战。许多新用户反映&#xff0c;在注册eBay买家号后&#xff0c;往往遭遇刚注册就被冻结…...

编程日记 2024/4/5 15:01:15

【Linux】-进程知识铺垫①计算机硬件的组织：冯诺依曼体系结构详细解读②关于操作系统对软硬件及用户的意义

目录 ​编辑 1.关于计算机的体系结构 1.1 冯诺依曼体系结构的诞生 2.冯诺依曼体系结构 2.1 cpu:运算器&#xff1a;更多的是让cpu具有特殊的数据计算功能&#xff1a; 2.2 控制器 2.3输入设备 2.4输出设备 3.计算机各个硬件设备之间的关系 4.内存与计算机效率 5.关于为什么总说…...

编程日记 2024/4/5 15:00:14

让ECC升级S/4HANA一步到位的“全面升级方案包”

SAP最新一代商务套件S/4HANA比ECC系统拥有更高性能的存储数据库HANA、更个性化的Fiori用户界面设计系统&#xff0c;能够大大提升系统效率&#xff0c;带来便捷、高效、良好的用户体验。但企业原先使用的ECC系统里面保存了积累多年的关键流程和数据&#xff0c;让企业面对系统升…...

编程日记 2024/4/5 14:51:04

AutoGluon

官网 amazon (base) PS C:\Users\gg葱> conda env list # conda environments: # pytorch1 C:\Users\gg葱\.conda\envs\pytorch1 base * D:\ANCDD:\Documents\LMm\env\pytorch2(base) PS C:\Users\gg葱> conda create --prefixD:/Doc…...

编程日记 2024/4/5 14:50:03

【网站项目】少儿编程管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

编程日记 2024/4/5 14:48:00

基于C语言的数据结构--顺序表讲解及代码函数实现展示

本篇文章是数据结构的开篇&#xff0c;所以我们先来了解一下什么是数据结构。 什么是数据结构 数据结构是由“数据”和“结构”两个词组合而来&#xff0c;自然要以两个词分别去阐述。 首先&#xff0c;什么是数据&#xff1f;数据(data)是事实或观察的结果&#xff0c;是对客…...

编程日记 2024/4/5 14:46:59

（学习日记）2024.03.31：UCOSIII第二十八节：消息队列常用函数

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…...

编程日记 2024/4/5 14:43:56

DLC原理解析及其优化思考

1. 引言 Discreet Log Contract (DLC) 是由麻省理工学院的Tadge Dryja在2018年提出的一套基于预言机的合约执行方案。DLC 允许两方根据预定义的条件进行有条件付款。各方确定可能的结果并进行预签名&#xff0c;并在预言机签署结果时使用这些预签名来执行支付。 因此&#xff…...

编程日记 2024/4/5 14:40:53

tigramite教程（七）使用TIGRAMITE 进行条件独立性测试

文章目录 概述1 连续数值变量1.1 ParCorr 偏相关&#xff08;ParCorr类&#xff09;1.2 鲁棒偏相关&#xff08;RobustParCorr&#xff09;非线性检验1.3 GPDC1.4 CMIknn 2a. 分类/符号时间序列2b. 混合分类/连续时间序列多变量X和Y的测试 概述 这个表格概述了 X ⊥ Y ∣ Z X\…...

编程日记 2024/4/5 14:38:51

【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录（SSO）设置

【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录（SSO）设置 目录 【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录（SSO）设置Ansible 基础知识部署 Keycloak创建 OIDC-客户端创建 oauth2proxy 部署顶级 Ansible PlaybookHost.iniplayboo…...

编程日记 2024/4/5 14:36:49

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/9/13 15:47:16

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/9/14 9:54:13

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/9/13 17:47:36

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

dify打造数据可视化图表

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

编程新知 2025/9/12 0:21:24

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/9/13 17:41:17

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/9/2 21:03:39