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

本文主要是介绍前端三剑客 —— 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>

这篇关于前端三剑客 —— CSS ( 坐标问题 、定位问题和图片居中 )的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/877991

相关文章

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法:数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高;分治法高效但实现复杂;位图法可读性差,但存储空间受限... 目录三种方法:方法概要数据库排序(http://www.chinasem.cn对数据库设备要求较高)分治法(常

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

关于@MapperScan和@ComponentScan的使用问题

《关于@MapperScan和@ComponentScan的使用问题》文章介绍了在使用`@MapperScan`和`@ComponentScan`时可能会遇到的包扫描冲突问题,并提供了解决方法,同时,... 目录@MapperScan和@ComponentScan的使用问题报错如下原因解决办法课外拓展总结@

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J