页面修饰与精灵图

最新推荐文章于 2024-09-11 20:12:18 发布

amzon1222

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量83

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/amzon1222/article/details/127640753

版权

基线

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

文字对齐问题

场景:解决行内/行内块元素垂直对齐问题

问题:当图片和文字在一行中显示时，其实底部不是对齐的

垂直对齐方式

浏览器把行内和行内块元素当作文字处理，默认基线对齐

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

解决行内块和文字、行内块和行内块之间的对齐都是vertical-align取值为middle

父元素div包裹img(行内块标签)img的基线与父元素的基线对齐，就会导致父元素底部会空出一块区域

ps：图片的基线就在图片的底部边缘

解决方法：

        img{
            /* 第一种方法vertical-align: middle; */
            /* 第二种方法 */
            display: block;
        }

居中图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: pink;
            line-height: 600px;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./images/1.jpg" alt="">
    </div>
</body>
</html>

图片是行内块标签，所以要垂直居中需要line-height=height，同时现在居中是基线居中，图片有自己的高度所以需要采用middle来居中。

光标类型

场景:设置鼠标光标在元素上时显示的样式

属性名: cursor

常见属性值:

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角

场景:让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名: border-radius

常见取值:数字+px、百分比

赋值规则:从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

            border-radius: 10px;

常用圆角形式

画一个正圆

盒子必须是正方形（长方形变不了）
设置边框圆角为盒子宽高的一半→border-radius:50%

胶囊按钮

盒子要求是长方形
设置→border-radius:盒子高度的一半

溢出部分显示效果

溢出部分:指的是盒子内容部分所超出盒子范围的区域

场景:控制内容溢出部分的显示效果，如:显示、隐藏、滚动条……

属性名: overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏

常见属性:

visibility: hidden(占位隐藏)
display: none(不占位隐藏)

元素整体透明度

场景:让某元素整体(包括内容)一起变透明

属性名:opacity

属性值：0~1之间的数字

1:表示完全不透明
0:表示完全透明

注意点：opacity会让元素整体透明，包括里面的内容，如:文字、子元素等…

精灵图

介绍

场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤

创建一个盒子,设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置

分别取负值设置给盒子的background-position: xy

取负值原因：图片左上角已在盒子左上角，显示图片内容只需要将背景图向左或向上移动即可，水平取负值就是向左，垂直取负值就是向上。

精灵图的标签用行内标签span，b，i……

            /* 背景图位置属性:改变背景图的位置 */
            /* 属性值：水平方向位置(left) 垂直方向的位置(top) */
            background-position: -3px 0;

背景图缩放

作用:设置背景图片的大小,

语法: background-size:宽度高度;

取值:

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

    <style>
        .box{
            width: 400px;
            height: 300px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-size: 300px; */
            /* 如果图的宽或高与盒子的尺寸相同了，另一个方向停止缩放导致盒子可能有留白 */
            /* background-size: contain; */
            /* 保证宽或高和盒子尺寸完全相同,导致图片显示不全 */
            background-size: cover;
        }
    </style>

文字阴影

作用︰给文字添加阴影效果，吸引用户注意

属性名:text-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
color	可选，阴影颜色

盒子阴影

作用:给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名: box-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            box-shadow: 5px 10px 10px 10px skyblue;
        }
    </style>