CSS-3

code_stream

已于 2024-03-06 10:13:49 修改

阅读量409

点赞数 9

分类专栏： # CSS 文章标签： css

于 2024-01-01 11:33:51 首次发布

本文链接：https://blog.csdn.net/code_stream/article/details/135323472

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

定位

作用：灵活的改变盒子在网页中位置

详细教程

教程链接：https://juejin.cn/post/7136463825318248478

相对定位

    div {
        position: relative;
        top: 200px;
        left: 200px;
    }

特点：
1. 改变位置的参照物是"自己原来的位置"
2. 不脱标（不脱离标准），占据原来的位置
3. 标签显示模式的特点不会改变

绝对定位

    div {
        position: absolute;
        bottom: 0;
        right: 0;
    }

使用场景：
子级绝对定位，父级相对定位（子绝父相）

特点：
1. 脱标（脱离标准），不会占据原来的位置
2. 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变：宽高生效（具备了行内块的特点）

固定定位

    div {
        position: fixed;
        top: 0;
        right: 0;
    }

使用场景：
元素的位置在网页滚动时不会改变

特点：
1. 脱标（脱离标准），不会占据原来的位置
2. 参照物：浏览器窗口
3. 显示模式特点：具备行内块特点

定位居中

方式一：
    img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -213px;
        margin-top: -241px;
    }
    
方式二：
	    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

子级的水平、垂直两个方向都偏移父级的50%
然后，子级向左、向上移动自身尺寸的一半（有两种实现方式）

	方式一：使用 margin，手动计算
		margin-top: -100px;
		margin-left: -100px;
		
	方式二：（自动计算，推荐使用）
		transform: translate(-50%, -50%);

堆叠层级

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
    }

    .box1 {
        background-color: pink;
        /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
        z-index: 1;
    }

    .box2 {
        background-color: skyblue;
        left: 100px;
        top: 100px;

        z-index: 2;
    }


</style>

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

默认效果：
按照标签书写顺序，后来者居上

作用：
设置定位元素的层级顺序，改变定位元素的显示顺序

CSS 精灵

    div {
        width: 112px;
        height: 110px;
        background-color: pink;
        background-image: url(./images/img0.png);
        background-position: -256px -276px;
    }

作用：
将所有的小图片集合到一个大图里面，将大图发给用户，需要显示小图的时候，就定位到大图中的小图位置即可，这样可以减少多个小图片向服务器申请，从而减少服务器的压力

步骤：
1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置
	3.1 使用 PxCook 测量
	3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

<style>
    .iconfont {
        font-size: 200px;
        color: pink;
    }
</style>

<body>
    <span class="iconfont icon-dianzan"></span>
</body>

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

作用：
在网页中添加简单的、颜色单一的小图标

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

垂直对齐方式

<style>
    div {
        border: 1px solid #000;
    }
    
    img {
        /* 垂直居中 */
        /* vertical-align: middle; */

        /* 顶对齐：最高内容的顶部 */
        /* vertical-align: top; */

        /* 底对齐：最高内容的底部 */
        vertical-align: bottom;
    }
</style>

<body>
    <div>
        <img src="./images/img1.png" alt="">
        Hello World!
    </div>
</body>

属性名：vertical-align

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

过渡效果

<style>
    img {
        width: 100px;
        height: 100px;
        transition: all 2s;
    }
    
    img:hover {
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <img src="./images/img2.png" alt="">
</body>

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）
属性值：过渡的属性 花费的时间（s）

提示：
    过渡的属性可以是具体的 CSS 属性，如 width、height......
    也可以设置为 all （所有属性都产生过渡效果）

透明度

    img {
        opacity: 0.1;
    }

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity
属性值：0 ~ 1

光标类型

    div {
        width: 200px;
        height: 200px;
        background-color: pink;

        cursor: pointer;
    }

作用：鼠标悬停在元素上时指针显示样式

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

提升网站排名

SEO：搜索引擎优化，提升网站搜索排名

网页头部 SEO 标签：

title：网页标题标签
description：网页描述
keywords：网页关键词

<meta charset="utf8" version='1'>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>