前端自学日记-day7

最新推荐文章于 2024-07-17 08:19:08 发布

隔壁海狸鼠

最新推荐文章于 2024-07-17 08:19:08 发布

阅读量125

点赞数

分类专栏：前端自学日记文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_43065990/article/details/128472072

版权

前端自学日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端自学日记

day7

内容总结：接上一篇，本篇主要总结css常用的高级技巧。

1.学习进度更新

在这里插入图片描述

2.具体内容

2.1 精灵图

作用：为了有效减少服务器的请求-响应次数，提高页面加载速度。
使用场景：主要针对背景图片，不常改的复杂小图标
使用方法：

使用background-psoition移动背景图片位置
移动距离为x,y坐标
一般往左上移动，数值是负

例如获取上方精灵图里的头盔

    <style>
        .box1 {
            width: 58px;
            height: 58px;
            background: url(images/index.png) no-repeat -183px 0px;
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>
</body>

2.2 字体图标

场景：显示网页中通用，常用的图标，这些图标结构样式简单。
核心：这些图标本质上是文字，展示的是图标，所以可以以文字的形式改变样式或其他属性。
优点：轻量级，灵活性，兼容性
使用方式：

下载
icomoon.io
iconfont.cn
字体图标引入
fonts文件夹放入页面根目录
通过css引入到页面中—字体声明

    @font-face {
      font-family: 'iconfont';
      src: url('foot/iconfont.woff2?t=1621044854968') format('woff2'),
        url('foot/iconfont.woff?t=1621044854968') format('woff'),
        url('foot/iconfont.ttf?t=1621044854968') format('truetype');
    }

html标签内添加小图标
css中用font-family声明字体。
字体图标追加
添加新的字体图标到原来的字体文件中，首先打开文件包中的selection.json文件；加入新的下载；替换原来的文件。

2.3 CSS三角

作用：图片中的三角的制作
在这里插入图片描述

    <style>
        .sanjiao {
            /* 2.设置宽高都为0 */
            width: 0;
            height: 0;
            /* 3.设置边框的宽度即为三角的宽度 */
            border: 5px solid transparent;
            /* 4.设置哪边的颜色三角的底部就在哪 */
            border-top-color: pink;
        }
    </style>
</head>

<body>
    <!-- 1.新建一个盒子 -->
    <div class="sanjiao">

    </div>
</body>

2.4 CSS用户界面样式

用户界面样式：可更改的用户操作样式，以便提高更好的用户体验。

2.4.1 鼠标样式cursor

在这里插入图片描述

2.4.2 轮廓线outline

去掉默认轮廓线outline：0/none；

2.5 vertical-align属性应用

（1）用于设置图片或表单和文字垂直对齐
在这里插入图片描述

vertical-align：baseline/top/middle/bottom
注意：此操作只对行内/行内块元素有效
（2）用于解决图片底部默认空白缝隙问题
因为行内块元素会和文字在默认情况下是基线对齐，所以会有空白
解决方式：
* 给图片加vertical-align：middle/top/bottom都可以
* display：block设置元素为块元素

2.6 溢出文字用…显示

（1）单行文本溢出显示省略号
必须满足三个条件:

    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: pink;
            /* 1.先强制一行内显示文本 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字用省略号替代超出部分 */
            text-overflow: ellipsis;

        }
    </style>
</head>

<body>
    <div class="box">
        今天是个好天气，马上就要2023年啦！还有3个月就毕业啦！好开心呀！一定要坚持运动呀，马上就要拍毕业照啦！
    </div>

（2）多行文本溢出显示省略号——存在兼容性问题

    <style>
        .box {
            /* 6.再设置合适行高不显示剩余部分 */
            width: 100px;
            height: 46px;
            background-color: pink;
            /* 1.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 2.文字用省略号替代超出部分 */
            text-overflow: ellipsis;
            /* 3.弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 4.限制在一个块元素显示的文本行数 */
            -webkit-line-clamp: 2;
            /* 5.设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

        }
    </style>
</head>

<body>
    <div class="box">
        今天是个好天气，马上就要2023年啦！还有3个月就毕业啦！好开心呀！一定要坚持运动呀，马上就要拍毕业照啦！
    </div>
</body>

2.7其他布局技巧

1. margin负值的巧妙运用

margin-left：-1px对浮动边框重合的地方变成1+1=1，但是可能存在互相压着的情况。这就要在hover时：
如果盒子无定位，则加相对定位：position：relitive
如果盒子有定位，z-index：1提高层级

2. 文字围绕浮动元素

可以使用浮动元素不会压着文字的特性做环绕文字显示。

3.行内块巧妙运用

在这里插入图片描述
使用行内块元素

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: azure;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .box {
            margin: 0 auto;
            width: 1200px;


        }


        .box ul li a {
            float: left;
            padding: 10px 15px;
            border: 1px solid green;
            margin: 10px 10px;
            color: green;

        }

        .box ul li a:hover {
            background-color: green;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">下一页</a></li>
            <li><a href="#">尾页</a></li>
        </ul>
    </div>
</body>

4. CSS三角强化

CSS除了之前的等腰三角形，还能做出高和宽不同的直角三角形。
原理就是在基础三角形的基础上，对矩形的切割。

    <style>
        .box {
            float: left;
            border-bottom: 0;
            border-left: 0;
            /* 三角形的高 */
            border-top: 100px solid transparent;
            /* 三角形的宽 */
            border-right: 50px solid red;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

5. CSS初始化

从京东上cv下来的初始化：在写css之前重设浏览器样式。

/* 内外边距清零  */
* {
    margin: 0;
    padding: 0
}

/* em和i斜体的文字不倾斜 em, */
i {
    font-style: normal
}

/* 去掉li的小圆点  */
li {
    list-style: none
}

img {
    /* border：0照顾低版本浏览器 如果图片外面包含链接会有边框问题 */
    border: 0;
    /* 取消图片底侧有空白问题 */
    vertical-align: middle
}

/* 当鼠标经过button按钮时变成小手 */
button {
    cursor: pointer
}

/* 链接的颜色下划线初始化 */
a {
    color: #666;
    text-decoration: none
}

/* 鼠标经过链接变为红色 */
a:hover {
    color: #c81623
}

/* 按钮和输入字体初始化 */
button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

/* 所有body文字的初始化 */
body {
    /* 抗锯齿形让文字显示更清晰 */
    /* "\5B8B\4F53"是宋体-这样写兼容性比较好 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

/* 元素隐藏 */
.hide,
.none {
    display: none
}

/* 清除浮动-伪元素清除 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}