前端三剑客 —— 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

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统