day9 CSS布局5

杰瘦瘦

已于 2022-09-25 19:37:43 修改

阅读量103

点赞数

分类专栏：前端基础笔记文章标签：前端 css

于 2022-06-26 23:39:03 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/125436132

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、字体图标

1、什么是字体图标？

字体图标展示的是图标，本质是字体。
字体图标展示的是图标，本质是字体。

例如京东网站上的：

2、字体图标的优点

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：

3、下载字体包

图标库Iconfont官网：iconfont-阿里巴巴矢量图标库

4、使用字体图标

使用字体图标–类名：

（1）引入字体图标样式表

（2）调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

编辑

二、平面转换

1、平面转换概念

平面转换就是改变盒子在平面内的形态（位移、旋转、缩放），是一种2D转换

平面转换属性：transform

2、位移

使用translate实现元素位移效果

语法：

transform: translate(水平移动距离,垂直移动距离);

取值（正负均可）：

像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下

技巧：

translate()如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

（1）位移，绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

代码示例：

展示效果：

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

3、旋转

语法：

transform:rotata(角度); 角度单位是deg

取值：正负都可以

取值为正，则顺时针旋转
取值为负，则逆时针旋转

（1）转换原点

语法：

默认原点是盒子中心点
transform-origin:原点水平位置原点垂直位置；

取值：

方位名词（left、top、right、bottom、center）
像素单位数值
百分比（盒子参照自身尺寸计算）

4、多重转换（旋转+位移）

语法：

transform:translate() rotate();

5、缩放

语法：

transform:scale(x轴缩放倍数,y轴缩放倍数);

技巧：一般情况下，职位scale设置一个值，表示x轴和y轴等比例缩放

transform:scale(缩放倍数)；
scale值大于1表示放大，scale值小于1表示缩小

三、渐变

渐变：渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

语法：

代码示例：

<!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>
        .jianbian{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            background-image: linear-gradient(
                /* 从蓝色渐变到绿色 */
                skyblue,
                green
            );
        }
    </style>
</head>
<body>
    <div class="jianbian">渐变效果测试</div>
</body>
</html>

展示效果：