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

前期内容回顾:

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/793520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScript:泛型

TypeScript:泛型 一、单个泛型二、多个泛型:泛型可以同时指定多三、接口加泛型 在定义函数或者类型时&#xff0c;如果类型不确定就可以使用 泛型。 一、单个泛型 //T 表示任意类型,具体只有在函数执行时才可以确定。 function fn<T>(a:T):T{return T; }// 可以直接调用…

欧拉角及其旋转矩阵,旋转顺序与内旋/外旋及其代码

目录 欧拉角介绍 旋转矩阵公式推导 旋转顺序 内旋/外旋 欧拉角介绍 欧拉角&#xff1a; 横滚&#xff1a;roll&#xff08;绕X轴旋转&#xff09;&#xff1b; 俯仰&#xff1a;pitch&#xff08;绕Y轴旋转&#xff09;&#xff1b; 偏航&#xff08;也称航向角&#x…

小组分享内容第一部分:总览+HttpClients

目录 1.网络爬虫的作用&#xff08;人话&#xff09;&#xff1a; 2.使用的工具 3.不使用程序进行网页信息的获取的操作步骤 4.如何使用程序来进行上述操作 1.打开浏览器 2.输入网址 3.发送请求 4.获取响应 5.判断响应是否成功 6.获取响应里需要的内容 7.记得最后关…

深度学习模型--注意力机制(Attention Mechanism)

AI大模型学习 方向一&#xff1a;AI大模型学习的理论基础 提示&#xff1a;探讨AI大模型学习的数学基础、算法原理以及模型架构设计等。可以深入分析各种经典的深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#xff09;以…

【linux】重定向|缓冲区

read函数 将文件标识符为fd的文件内容读到buf中去&#xff0c;读count个&#xff0c;read的返回值是实际读到的个数&#xff0c;有可能文件中没有count个&#xff0c;但是read返回的还是实际读到的个数 stat函数 调用这个函数可以查到对应文件的属性&#xff0c;比方说文件大小…

Ceph分布式存储系统以及高可用原理

Ceph分布式存储系统以及高可用原理 1. Ceph原理和架构1.1 分布式存储系统抽象1.2 Ceph基本组件 2 Ceph中的策略层2.1 CRUSH进行数据分发和定位2.2 PG(Placement Group): 集群管理的基本单元2.3 PG的代理primary OSD2.4 轻量级的集群元数据ClusterMap2.5 对PG的罗辑分组&#xf…

谷粒商城——通过接口幂等性防止重复提交订单

如果用户向后端服务提交多次相同订单的提交服务&#xff0c;那么后端应该只生成一条订单记录。 有一些操作天然是幂等的&#xff0c;如查询操作和删除操作等。 幂等性实现 1.token机制&#xff08;仅这个方法适用于订单的重复提交&#xff09; 后端先生成1个令牌将其记录在R…

通用开发技能系列:SQL基础学习

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 通用开发技能系列 文章&#xff0c;主要对编程通用技能 SQL基础 进行学习 1.数据库简介 1.1.数据库中的一些名称 DataBase&#xff1a;数据库 程序员只负责怎么维护存取数据&#xff0c;不管数据库是什么 DBA…

python项目练习——14.学生管理系统

这个项目可以让用户管理学生的信息&#xff0c;包括学生的姓名、年龄、成绩等&#xff0c;并提供添加、编辑、删除、查询等功能。这个项目涉及到数据库操作、用户界面设计、数据验证等方面的技术。 代码示例&#xff1a; import tkinter as tk # 导入 Tkinter 库 import sqli…

Django之关系模型的序列化

一、关系模型的序列化-多查1 1.1、模型准备 from django.db import models# Create your models here. class Classes(models.Model):name = models.CharField(max_length=20, verbose_name=班级)class Student(models.Model):SEX_CHOICES = ((1,男)), (2, 女)name = models.C…

【HTML】制作一个简单的三角形动态图形

目录 前言 开始 HTML部分 CSS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML和CSS代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建两个文本文档&#xff0c;其中HTML的文件名改为[index.html]&#xff0c;CSS的文件名…

【Python的第三方库】flask

1. Flask是什么&#xff1f; 基于python的web后端开发轻量级框架&#xff1b; 基于MVT设计模式即Models,Views,Templates(html模板语言) 2.中文文档&#xff1a; https://dormousehole.readthedocs.io/en/2.1.2/index.html 3.依赖3个库&#xff1a; Jinja2 模版&#xff1…

集成swagger2的时候swagger-ui.html页面的v2/api-docs接口报404

集成swagger2的时候swagger-ui.html页面的v2/api-docs接口报404 尝试网上说的权限、包版本不一致、资源路径映射问题&#xff0c;发现都没有问题。 单独访问v2/api-docs接口的时候报 Swagger2Controller Unable to find specification for group 查看相关代码&#xff1a; …

【Unity灶台】食品加工系统模型搭建

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

pwn学习笔记(7)--堆相关源码

相关源码&#xff1a; 1. chunk 相关源码&#xff1a; ​ 对于用户来说&#xff0c;只需要确保malloc()函数返回的内存不会发生溢出&#xff0c;并且在不用的时候使用free() 函数将其释放&#xff0c;以后也不再做任何操作即可。而对于glibc来说’它要在用户第一次调用malloc…

【接口】HTTP(3) |GET和POST两种基本请求方法有什么区别

在我面试时&#xff0c;在我招人面试别人时&#xff0c;10次能遇到7次这个问题&#xff0c;我听过我也说回答过&#xff1a; Get&#xff1a; 一般对于从服务器取数据的请求可以设置为get方式 Get方式在传递参数的时候&#xff0c;一般都会把参数直接拼接在url上 Get请求方法…

4.4总结

这两天学习了线段树和树状数组&#xff0c;今晚上学长还在进行JDBC和MYSQL的教学&#xff0c;也收获到了一些东西 树状数组与完全二叉数结构上大致相同&#xff0c;但是完全二叉树每个节点只能存储单个数&#xff0c;而树状数组存储的是数组的范围。 从头结点开始为一整个数组…

Linux之实现Apache服务器监控、数据库定时备份及通过使用Shell脚本发送邮件

目录 一、Apache服务器监控 为什么要用到服务监控&#xff1f; 实现Apache服务器监控 二、数据库备份 为什么要用到数据库备份&#xff1f; 实现数据库备份 三、Shell脚本发送邮件 为什么要用使用Shell脚本发送邮件&#xff1f; 实现Shell脚本发送邮件 一、Apache服务器…

file 文件

1. File表示什么? File对象表示路径&#xff0c;可以是文件、也可以是文件夹。这个路径可以是存在的&#xff0c;也可以是不存在的 2&#xff0e;绝对路径和相对路径是什么意思? 绝对路径是带盘符的。 相对路径是不带盘符的&#xff0c;默认到当前项目下去找。 3.File三种构…

计算机中英文术语对照表

计算机中英文术语对照表 分类 编程技术 win: Windows 操作系统&#xff1b;mac: macOS&#xff08;操作系统&#xff09;。 英文&#xff08;English&#xff09;中文一&#xff08;港台地区&#xff09;中文二Abstract摘要&#xff1b;抽象的摘要&#xff1b;抽象的Abstract…