CSS-3

定位

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

相对定位

    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="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>