【CSS高级技巧】

于 2022-11-01 17:11:16 发布
阅读量904 收藏 5
点赞数 5
分类专栏： CSS3 文章标签： 前端 css3 html5 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_64875217/article/details/127619608
版权

CSS高级技巧

1 本节目标

  • 使用精灵图
  • 使用字体图标
  • 写出CSS三角
  • 写出常见的CSS用户界面样式
  • 说出常见的布局技巧

2 精灵图

2.1 为什么需要精灵图？

  • 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
  • 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

2.2 精灵图(sprites)的使用

  • 使用精灵图核心：
    1>精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
    2>这个大图片也称为sprites精灵图或者雪碧图。
    3>移动背景图片位置，此时可以使用background-position。
    4>移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
    5>因为一般情况下都是往上往左移动，所以数值是负值。
    6>使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
    在这里插入图片描述

3 字体图标

3.1 字体图标的产生

  • 字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
  • 精灵图是有诸多优点的，但是缺点很明显：
    1>图片文件还是比较大的。
    2>图片本身放大和缩小会失真。
    3>一旦图片制作完毕想要更换非常复杂。
    此时，字体图标iconfont的出现解决了以上问题。
  • 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

3.2 字体图标的优点

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
  • 灵活性：本质其实是文字，可以很随意地改变颜色、产生阴影、透明效果、旋转等。
  • 兼容性：几乎支持所有的浏览器，可放心使用。
  • 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
  • 总结：
    如果遇到一些结构和样式比较简单的小图标，就用字体图标。
    如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

3.3 字体图标的使用

3.3.1 字体图标的下载

3.3.2 字体图标的引入(引入我们的html)

以阿里iconfont字库为例：

  • 选择需要的图标，添加至购物车
  • 将购物车中的图标添加到一个项目中
  • 点击font-class，下载至本地，解压
    在这里插入图片描述
  • 挑出.css、ttf、woff、woff2四个文件夹单独打包到一个文件夹，可命名为fonts
    在这里插入图片描述
  • 把打包好的fonts文件夹放在我们项目的根目录下
    在这里插入图片描述
  • 接下来，在CSS样式中全局声明字体，简单理解就是把这些字体文件通过css引入到我们页面中：找到iconfont.css文件中下面两段代码复制，并粘贴在css中
    在这里插入图片描述
  • 再引入iconfont.css文件
    在这里插入图片描述
  • 最后打开下载包里面的demo_index.html，查看不同图标的unicode，并在html中使用字体图标，如下所示：
    在这里插入图片描述
  • 最终可得到我们想添加的图标：
    在这里插入图片描述

3.3.3 字体图标的追加(以后添加新的小图标)

  • 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
  • 选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

4 CSS三角

  • 网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
  • 语法：
div {
	width: 0;
	height: 0;
	/* 以下两行可不写，写只是为了照顾低版本浏览器兼容性问题 */
	/* line-height: 0;
	font-size: 0; */
	border: 50px solid transparent;
	border-left-color: pink;
}

在这里插入图片描述
在这里插入图片描述

5 CSS用户界面样式

  • 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

5.1 更改用户的鼠标样式cursor

  • li { cursor: pointer; }
  • 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
    在这里插入图片描述
    在这里插入图片描述

5.2 表单轮廓线outline

  • 给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。
  • 语法：
input { outline: none; }

5.3 防止拖拽文本域resize

  • 实际开发过程中，我们文本域右下角是不可拖拽的。
  • 语法：
textareal{ resize: none; }

在这里插入图片描述

6 vertical-align属性应用

6.1 图片、表单和文字垂直对齐

  • CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
  • 官方解释：用于设置一个元素的垂直对齐方式，但是他只针对于行内元素或者行内块元素有效。
  • 语法：
vertical-align: baseline | top | middle | bottom

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.2 解决图片底部默认空白缝隙问题

  • bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
  • 主要解决方法有两种:
    1>给图片添加vertical-align: middle | top | bottom等。(提倡使用)
    2>把图片转换为块级元素display: block;
    在这里插入图片描述

7 溢出的文字省略号显示

7.1 单行文本溢出显示省略号

  • 单行文本溢出显示省略号，必须满足三个条件：
1>先强制一行内显示文本
white-space: nowrap; (默认是normal自动换行)
2>超出的部分隐藏
overflow: hidden;
3>文字用省略号替代超出的部分
text-overflow: ellipsis;

在这里插入图片描述

7.2 多行文本溢出显示省略号

  • 多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端(移动端大部分是webkit内核)
  • 多行文本溢出显示省略号需满足以下条件：
	overflow: hidden;
	text-overflow: ellipsis;
	/* 弹性伸缩盒子模型显示 */
	display: -webkit-box;
	/* 限制在一个块元素显示的文本的行数 */
	-webkit-line-clamp: 2;
	/* 设置或检索伸缩盒对象的子元素的排列方式 */
	-webkit-box-orient: vertical;

在这里插入图片描述

8 常见的布局技巧

8.1 margin负值的运用

  • 当浏览器缩放大小在100%时，使用margin负值，会使相接处的边框宽度正常显示。
    在这里插入图片描述
    在这里插入图片描述
  • 当鼠标经过时，会出现以下情况：
    在这里插入图片描述
  • 要解决上面这种情况，就需要当鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位<保留位置>；如果有定位，则加z-index)。
    在这里插入图片描述

8.2 文字围绕浮动元素

在这里插入图片描述
在这里插入图片描述

8.3 行内块的巧妙运动

在这里插入图片描述
在这里插入图片描述

8.4 css三角强化

在这里插入图片描述

  • 语法：
	width: 0;
	height: 0;
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 22px 8px 0 0;
  • 代码：
<!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>CSS三角强化的巧妙运用</title>
    <style>
        /* 最初写法:
        .box1 {
            width: 0;
            height: 0;
            把上边框宽度调大 且变透明色
            border-top: 100px solid transparent;
            border-right: 50px solid skyblue;
            左边和下边的边框宽度设置为0
            border-bottom: 0 solid blue;
            border-left: 0 solid green;
        } */
        /* 简写写法: */
        .box1 {
            width: 0;
            height: 0;
            /* 只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 样式都是solid */
            border-style: solid;
            /* 上边框宽度要大,右边框宽度稍小,其余边框为0 */
            border-width: 22px 8px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 12px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            /* 删除线 */
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <!-- i标签里面放小三角 -->
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>
</html>

在这里插入图片描述

9 CSS初始化

  • 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
  • CSS初始化是指重设浏览器的样式。(也称CSS reset)
  • 每个网页都必须首先进行CSS初始化。
  • 京东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 {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -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
}
CSS高级技巧
cjhxydream的博客
07-02 1447
使用精灵图核心: 显示效果 当浏览器第一次请求相关的图标时，服务器会将相关的文件一次性发送给浏览器，当再需要其他图标时就能够直接从ttf文件中获取图标，减轻服务器的压力，减少请求次数，缩短用户的等待时间。 5. vertical-align属性应用 下图蓝色标注缝隙所在，图片默认与文字是基线对齐，因此会留有部分区域用于对齐问题下部分区域......
CSS高级技巧篇
weixin_44908855的博客
06-22 533
1. 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 属性 属性值 作用 cursor: default 白箭头
12 个 CSS 高级技巧汇总
JKxiaoxing的博客
10-13 527
下面这些CSS高级技巧，一般人我可不告诉他哦。 使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG优化显示文本对纯CSS滑块使用 max-height继承 box-sizing表格单元格等宽用Flexbox摆脱外边距的各种hack使用属性选择器用于空链接 使用 :not() 在菜单上应用
CSS中的一些高级技巧
Matcha_ice_cream的博客
03-18 1284
css中的高级技巧1、使用css制作三角形2、用户的界面样式1. 鼠标样式2. 轮廓线 outline3、禁止拖拽文本框 resize3、vertical-align属性：4、溢出文本省略号显示：1.单行文本溢出省略号显示2.多行文本溢出省略号显示： 1、使用css制作三角形 在css可以直接制作三角形： /*html代码*/ <body> <div class="box"></div> hello </body> /*css样式*/ .box {
css高级技巧
fjd7474的博客
02-22 994
css高级技巧1 元素隐藏与显示1.1 display: none 1 元素隐藏与显示 1.1 display: none display: none 元素隐藏 display: block 除了转化为块级元素外，还有显示元素的意思 特点：隐藏之后不再保留位置
12个CSS高级技巧汇总
12-11
【CSS高级技巧汇总】 1. **使用`:not()`去除菜单边框** 在创建菜单时，我们可以使用`:not()`伪类来简洁地为除最后一个元素之外的所有菜单项添加边框。例如： ```css .nav li:not(:last-child) { border-right: ...
CSS 高级技巧总结(必看)
09-24
掌握CSS高级技巧可以显著提升网页开发的效率和性能，同时使代码更为简洁高效。本文将分享一系列CSS高级技巧，帮助开发者提升开发能力。 首先，利用:not()伪类可以简化边框的应用。传统方法是在每个菜单项添加边框，...
CSS高级技巧:圆角矩形
09-27
【CSS高级技巧:圆角矩形】 在网页设计中，CSS是用于控制页面样式和布局的重要工具。随着技术的发展，CSS不再局限于简单的方形元素，而是提供了丰富的功能来满足设计师的创意需求。圆角矩形就是其中之一，它为网页...
CSS高级教程 页面布局
溺水的鱼 - Later equals never.
04-28 1139
用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。定位定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。static值是元素的默认值，它
CSS高级操作
ITshenming的博客
06-16 224
CSS高级操作 min-width：最小宽度 max-width：最大宽度 ?hidden：该属性会把溢出盒子的内容进行隐藏 scroll：该属性会在盒子上添加一个滚动条，这样用户可以查看其余内容。 border-top-width: 调节上边框大小 border-right-width：调节右边框大小 border-bottom-width：调节下边框大小 border-left-width：调...
css 高级技巧
qq_37550440的博客
02-08 740
1.元素的显示与隐藏元素 1.display:none/block 不占有位置 2.visibility: hidden/visible 隐藏但占有位置 3.overflow: hidder/visible 超出盒子的部分隐藏 <div class="one"></div> <div class="two"></div> <div class="there"> 你好你好你好你好你好123 </div> <.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小王小王几点了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值