CSS高级技巧

飞仔快乐水

已于 2023-03-29 20:59:06 修改

阅读量42

点赞数

分类专栏： html-css 文章标签： css html 前端

于 2023-03-16 09:43:19 首次发布

本文链接：https://blog.csdn.net/qq_43714708/article/details/129579681

版权

html-css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS高级技巧

精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称css Sprites、CSS雪碧）。

精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片也称为sprites精灵图或者雪碧图
移动背景图片位置，此时可以使用background-position.
移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同（向右x/向下y）

总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现—background-position。
一般情况下精灵图都是负值。(千万注意网页中的坐标︰x轴右边走是正值，左边走是负值，y轴同理。)

字体图标

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显。

图片文件还是比较大的
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂

字体图标iconfont 的出现很好的解决了以上问题，

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

操作步骤：

字体图标的下载（https://icomoon.io/#home）

注意：下载完毕之后，注意原先的文件不要删除，后面会用。

把下载包里面的fonts文件夹放入页面根目录下
字体图标的引入（引入到我们html页面中)
- 在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题。
```
@font-face {
   font-family: 'icomoon';
   src: url('fonts/icomoon.eot?p4ssmb');
   src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
		url('fonts/icomoon.woff?p4ssmb') format('woff'),
		url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
  }
```
- html标签内添加小图标。
  
  在网站(https://icomoon.io/app/#/select/font)中找到所需的图标
  
  复制图标下方数字后方对应的小方框，粘贴到对应位置
- 设置字体图标的字体（font-family: ‘icomoon’;）
字体图标的追加（添加新的小图标)
- 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
- 把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

CSS三角

设置宽高为零，给予透明颜色内边框（border），最后根据所需设置对应位置边框颜色（border-left-color）

div {
    width: 0;
    height: 0;
    line-height : 0;
    font-size : 0;
    border: 50px solid transparent;
    border-left-color: pink;
}

鼠标样式（ pointer）

cursor: pointer; 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性	描述
cursor: default;	小白默认
cursor: pointer;	小手
cursor: move;	移动
cursor: text;	文本
cursor: not-allowed;	禁止

<ul>
    <li style="cursor: default;">我是默认的小白鼠标样式</li>
    <li style="cursor: pointer;">我是鼠标小手样式</li>
    <li style="cursor: move;">我是鼠标移动样式</li>
    <li style="cursor: text;">我是鼠标文本样式</li>
    <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>

轮廓线（outline）/文本域拖拽

给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框

给文本域添加resizeL none;样式之后，就可以防止拖拽文本域

input, textarea {
    /* 取消表单轮廓 */
    outline: none;

}

textarea {
    /* 防止拖拽文本域 */
    resize: none;
}

图片文字对其方式

vertical-align：用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

vertical-align：baseline l top l middle | bottom

属性值	描述
baseline	默认、元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的低端对齐

图片底侧空白缝隙解决方案

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种︰

给图片添加vertical-align:middle | topl bottom等。（提倡使用的)
把图片转换为块级元素display: block;（只有行内元素、行内块元素有对齐方式，块级元素无对齐方式）

溢出文本省略号显示

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

/* 1.文字显示不开也必须强制一行内显示（默认normal文字显示不开自动换行） */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)

overflow : hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp : 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

常见布局技巧

margin负值的运用

(1) 让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框

(2) 标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置)，如果有定位，则加z-index )
文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性
行内块的巧妙运用

(1) 行内块元素可以设置大小，本身默认有外边距

(2) 通过给行内块元素的父亲设置text-align: center; 则所有下级的行内元素、行内块元素都会居中对齐。

css三角强化

获取直角三角形两种方式

第一种方式：

/* 把上内框宽度调大，保留右侧内边框 */
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 左边和下边的边框宽度设置为0 */
border-bottom: 0 solid blue;
border-left: 0 solid green;

第二种方式（简写）：

/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0;