02- html && css - 技术栈

1. 定位

1.1 相对定位

position: relative

改变位置的参照物：自己原来的位置

不脱标，占位

标签显示模式特点：不改变，即：块级还是块级

html 复制代码

img{
    position: relative;
    top: 100px;
    left:200px;
}

1.2 绝对定位

子绝父相：子组件绝对定位，父组件相对定位

脱标，不占为

参照物：找到最近的已经定位的祖先元素，如果祖先元素没有定位，参照物浏览器可视区该位置

显示模式改变，宽高生效具备了行内块的特点

html 复制代码

div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0  auto;
        }
        img{
            position: absolute;
            top: 0px;
            right:0px;
        }

1.3 居中定位

浏览器的居中直接设置绝对定位：absolute

html 复制代码

img{
            position: absolute;
            top: 50%;
            left:50%;
            /*自己宽高的一半*/
            transform: translate(-50%,-50%);
        }

1.4 固定定位

即：元素的位置在网页滚时不会发生改变，fixed

脱标，不占位

参照物：浏览器

显示模式特点，具备行内块特点

html 复制代码

img{
            position: fixed;
            top: 20px;
            right: 0px;
        }

1.5 堆叠顺序

遵循：后来者居上

可以使用z-index:取值是整数，默认是0，取值越大显示顺序越靠上

html 复制代码

div{
            width: 200px;
            height: 200px;
        position: absolute;
        }
        .pink{
            background-color: pink;
            z-index: 1;
        }
        .blue{
            background-color: blue;
            top: 50px;
            left: 50px;
        }

2. css精灵

也叫CSS Cprites 是网页图片应用处理方式，把网页一些背景图片整合到一张图片文件中，再background-position的精确定位出背景图片的位置

可以减少服务器被请求数量，减轻服务器压力，提高页面加载速度

3. 字体图标

展示的图标本质是字体

在网页添加简单的、颜色单子的小图标

特点

灵活性：灵活的修改样式，尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：先下载再使用
使用：

阿里巴巴图标矢量库

素材库 -> 官方图标库 -> 选择素材库加入到购物车 - > 打开购物车新建项目-> 下载到本地

将下载的文件放入到项目中进行引用

icon-yanziwancheng点击下载的html文件找到相关icon名称

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont{
            font-size: 100px;
            color: pink;
        }
    </style>
</head>
<body>
    <div class="iconfont icon-yanziwancheng">

    </div>
</body>
</html>

4. 垂直对齐方式

vertical-align：谁占的位置高属性放在谁的身上

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

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <style>
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div >
        <img src="imgs/藏獒.png">
        <span>123143212341234</span>
    </div>
</body>

5. 过度transition

作用：可以作为一个元素再不同状态之间切换的时候添加的过渡效果，比如按钮hover

属性名：transition

属性值：过渡属性花费时间（s）

提示

过渡的属性可以是具体的css属性

也可以是all(两个状态属性值不同的所有属性都产生过渡效果)

transition 设置给元素本身

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        div{
            border: 1px solid pink;
        }
        img{
            width: 200px;
            height: auto;
            transition: all 1s;
        }
        img:hover{
            width: 400px;
            height: auto;
        }
    </style>
</head>
<body>
    <div >
        <img src="imgs/藏獒.png">
    </div>
</body>

6. 透明度opacity

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

属性名：opacity

属性值：0-1

0：完全透明

1：不透明
0-1之间小数：半透明

html 复制代码

button{
            width: 100px;
            height: 25px;
            opacity: 0.3;
            transition: all 0.5s;
        }
        button:hover{
            width: 150px;
            height: 50px;
            font-size: 32px;
            opacity: 1;
            border-radius: 20px;
        }

7. 光标类型cursor

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

属性名：cursor

属性值

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

html 复制代码

div{
            border: 1px solid pink;
            cursor: text;
        }
        img{
            width: 200px;
            height: auto;
            transition: all 1s;
            cursor: move;
        }
        img:hover{
            width: 400px;
            height: auto;
        }
        button{
            width: 100px;
            height: 25px;
            opacity: 0.3;
            transition: all 0.5s;
            cursor: pointer;
        }
        button:hover{
            width: 150px;
            height: 50px;
            font-size: 32px;
            opacity: 1;
            border-radius: 20px;
        }

小经验

1.1 input框

html 复制代码

.header .search input{
    /*浏览器优先生效默认宽，这里重置css属性*/
    flex: 1;
    width: 0;
    border: none;        /* 去掉边框 */
    outline: none;       /* 去掉焦点时的蓝色外框 */
    background: transparent; /* 如果不需要背景 */
}

/*选中提示框的样式*/
.header .search input::placeholder{
    font-size: 16px;
    color: #cccccc;
}