CSS高级技巧导读

这篇具有很好参考价值的文章主要介绍了CSS高级技巧导读。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,精灵图

1.1 为什么需要精灵图?

目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了

1.2 精灵图的使用

使用精灵图核心:

1,精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中

2,这个大图片也称为sprites   精灵图  或者  雪碧图

3,移动背景图片位置,此时可以使用 background-position

4,移动的距离就是这个目标图片的 x 和 y 坐标。(x轴往右走是正值,y轴往下走是正值)

5,因为一般情况下都是往上往左移动,所以数值是负值

6,使用精灵图的时候需要精确测量,每个小背景图片的大小和位置

2,字体图标

2.1 字体图标的产生

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

精灵图有很多优点,但是缺点很明显:

1,图片文件还是比较大的

2,图片本身放大和缩小会失真

3,一旦图片制作完毕想要更换非常复杂

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

2.2 字体图标的优点

 1,轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求

2,灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等

3,兼容性:几乎支持所有的浏览器,请放心使用

注意:字体图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化

总结:

1.如果遇到一些结构和样式比较简单的小图标,就用字体图标

2,如果遇到一些结构和样式复杂一点的小图片,就用精灵图

字体图标是一些网页常见的小图标,我们直接网上下载即可。因此使用可以分为:

1,字体图标的下载

2,字体图标的引入(引入到我们html页面中)

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

2.3 字体图标的下载

推荐下载网站:

icomoon字库:                http://icomoon.io

阿里iconfont字库:          http://www.iconfont.cn/

3,CSS三角 

网页中常见的一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标

div{
    width:0;
    height:0;
    /*为了照顾兼容性*/
    line-height:0;
    font-size:0;
    border:50px solid transparents;
    border-left-color:pink;
}

4,CSS用户界面样式

4.1 什么是界面样式 

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

4.2 更改用户的鼠标样式 cursor

li { cursor:pointer;}

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

default                小白 默认

pointer                小手

move                  移动

 text                    文本

not-allowed        禁止

4.3 表单轮廓线 outline

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

input { outline:none;}

input {outline:0;}

<input style="outline: none;" type="text">

4.4 防止表单域拖拽 resize

textarea { resize:none;}

<textarea style="resize: none;" name="" id="" cols="30" rows="10"></textarea>

5,vertical-align 属性应用

5.1 图片、表单和文字对齐

 CSS的  vertical-align 属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐

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

语法:

vertical-align: baseline  |  top  |  middle  |  bottom

baseline(基线)                        默认,元素放置在父元素的基线上

top (顶线)                               把元素的顶端与行中最高元素的顶端对齐

middle(中线)                           把此元素放置在父元素的中部

bottom(底线)                          把元素的顶端与行中最低的元素的顶端对齐 

CSS高级技巧导读,css,前端 

img{
   /* 图片与文字底线对齐 */
   vertical-align: bottom;
}

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

bug:为图片添加边框时,图片底侧会有一个空白缝隙,(原因是行内块元素会和文字的基线对齐)

 主要解决方式有两种:

① 给图片添加 vertical-align:middle | top | bottom等。(提倡)

② 把图片转换为块级元素 display:block;

6,溢出的文字省略号显示

1,单行文本溢出显示省略号

1,先强制一行内显示文本

white-space:nowrap;(默认normal 自动换行)

2,超出部分隐藏

overflow:hidden;

3,文字用省略号替代超出的部分

text-overflow:ellipsis;

2,多行文本溢出显示省略号(了解)

多好文本溢出显示省略号,有较大兼容性问题,适合于 webKit浏览器 或 移动端

overflow:hidden;

text-overflow:ellipsis;

/*弹性伸缩盒子模型显示*/

display:-webkit-box;

/*限制在一个块元素显示的文本的行数*/

-webkit-line-clamp:2;

/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient:vertical;

7,常见布局技巧

7.1,margin负值的运用

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

li{
        list-style: none;
        float: left;
        width: 150px;
        height: 200px;
        border: 1px solid pink;
        margin-left: -1px;
      }

CSS高级技巧导读,css,前端

CSS高级技巧导读,css,前端 2,鼠标经过某个盒子的时候,提高当前盒子的层级

如果没有定位,则加相对定位(保留位置)

如果有定位,则添加z-index

7.2,文字围绕浮动元素

CSS高级技巧导读,css,前端

7.3,行内块的巧妙运用

CSS高级技巧导读,css,前端

7.4,CSS三角强化

CSS制作直角三角形

底部删除,上部边框加大,左边透明文章来源地址https://www.toymoban.com/news/detail-821867.html

.box{
        width: 0;
        height: 0;
        border-top: 200px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid red;
        border-bottom: 0 solid gold;
      }

到了这里,关于CSS高级技巧导读的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端技巧】CSS常用知识碎片(八)

    CSS常用知识碎片(八) background-blend-mode 属性用于混合元素背景图案、渐变和颜色; mix-blend-mode 属性用于元素与元素之间的混合; isolation 属性用在祖先元素上,限制 mix-blend-mode 属性设置的混合模式的应用范围。 mix-blend-mode:multiply 值multiply的混合效果是正片叠底,最终效果表

    2024年02月15日
    浏览(34)
  • 【前端技巧】CSS常用知识碎片(四)

    CSS常用知识碎片(四) shape-margin属性:控制文字环绕图形时文字与元素边界的距离。 使用CSS Shapes布局实现圆形内排版效果示意

    2024年02月15日
    浏览(55)
  • 前端小技巧:学会通过CSS Hover和JS实现图片放大镜效果

    数据来源: ChatGPT 今天,我们来看一个鼠标悬停出现图片放大镜效果,这是一个比较实用且炫酷的纯CSS和JS实现的页面效果。 HTML HTML代码非常简单,我们只需要一个div容器,内部嵌入一张图片,再添加一个用来显示放大镜的div元素。 CSS CSS代码是实现放大镜效果的重要部分,

    2024年02月02日
    浏览(67)
  • CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透

    一、什么是scoped 在vue文件中的style标签上,有一个特殊的属性:scoped。 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识,给组件中的每个标签对应的d

    2024年04月10日
    浏览(50)
  • 【css技巧】css实现边框渐变

    海鲸AI-ChatGPT4.0国内站点,支持设计稿转代码:https://www.atalk-ai.com 在CSS中实现边框渐变效果,你不能直接应用渐变到 border 属性上,因为CSS标准不支持这样的操作。但是,你可以使用一些技巧来模拟边框渐变的效果。以下是一些常用的方法: 方法1:使用伪元素和 background-ima

    2024年01月23日
    浏览(48)
  • 3-css高级特效-1

    简介 作用:为元素添加动态效果,一般与过渡配合使用 概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜) 平面转换也叫 2D 转换,属性是 transform 平移 取值 像素单位数值 百分比(参照 盒子自身尺寸 计算结果) 正负 均可 技巧 translate() 只写一个值 ,表示沿着 X

    2024年02月11日
    浏览(26)
  • 3-css高级特效-2

    空间转换简介 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性:transform 平移 取值与平面转换相同 默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果 视距 作用

    2024年02月11日
    浏览(30)
  • CSS高级特性

    CSS复合选择器:复合选择器是由两个或多个基础选择器通过不同的方式组合而成的 1.1 标签指定式选择器:又称交集选择器,由两个选择器构成,其中第一个选择器为标记选择器,第二个为class选择器或id选择器。两个选择器之间不能有空格。 1.2 后代选择器:后代选择器用来

    2024年02月16日
    浏览(39)
  • 第二章:CSS基础进阶-part1:CSS高级选择器

    后代选择器:E F 子元素选择器: EF 相邻兄弟选择器:E+F 群组选择器:多个选择器以逗号隔开(selector1,selector2,…) 属性选择器:E[attr],E[attr=“value”], E[attr~=“value”] CSS 属性选择器通过已经存在的属性名或属性值匹配元素 伪类选择器(简称:伪类)通过冒号来定义,它定义了

    2024年02月13日
    浏览(36)
  • html&CSS-----高级选择器

      目录 前言 伪类选择器 状态类 结构类  伪元素选择器 属性选择器          前面我们学习了CSS中的相关选择器(链接htmlCSS-----CSS选择器(上)_灰勒塔德的博客-CSDN博客    htmlCSS-----CSS选择器(下)_灰勒塔德的博客-CSDN博客)今天我们接着学习比较高级的选择器,下面就一

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包