css高阶技巧

三角形的应用

这个小技巧的使用在京东淘宝之类的平台都会使用到哦。

css用户界面样式

鼠标样式(cursor)

1.常用的4个鼠标样式:


文本框轮廓线去除

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

禁止拖拽文本域(resize)

vertical-align属性应用

常见属性:


语法:vertical- align:baseline|top|middle|bottom

图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直剧中对齐了。



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



如何让溢出的文字以省略号的形式显示

满足条件:

  1. 强制一行内显示文本(white-space:nowarp;)默认的是normal自动换行

  2. 超出部分隐藏(overflow:hidden;)

  3. 文字用省略号代替超出的部分(text-overflow:ellipsis;)

这样就可以以省略号的形式展现出来了。
注:多行文本溢出(多数适用于webkit浏览器或者是移动端浏览器,ie浏览器无效)
需要严格控制盒子的大小。
<style>
    div{text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示 */
        display:-webkit-box;
        /*限制在一个块元素显示的文本的行数*/
        -webkit-line-clamp:2;
        /*设置或检索伸缩盒对象的子元素的排列方式 ↓垂直居中的怕列方式*/
        -webkit-box-orient: vertical ;
}
</style>

常见的布局技巧

  1. margin负值的运用

  2. 文字围绕浮动元素

  3. 行内块的巧妙运用

  4. css三角强化

css3 calc函数:


css3 不常用的图片的模糊处理:


学会这些你肯定会在职场上变得如鱼得水的🐂

https://v.kuaishou.com/oi9DZV 给大家推荐一个轻松小视频(手动@星有野)
原创不 易,还希望各位大佬支持一下
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🐟牛客🐂的个人主页:https://www.nowcoder.com/users/335664988





















#前端基础知识点总结#
全部评论
如何让溢出的文字以省略号的形式显示,这个我正好用到
点赞 回复 分享
发布于 2022-08-24 20:18 陕西

相关推荐

06-13 17:33
门头沟学院 Java
顺序不记了,大致顺序是这样的,有的相同知识点写分开了1.基本数据类型2.基本数据类型和包装类型的区别3.==和equals区别4.ArrayList与LinkedList区别5.hashmap底层原理,put操作时会发生什么6.说出几种树型数据结构7.B树和B+树区别8.jvm加载类机制9.线程池核心参数10.创建线程池的几种方式11.callable与runnable区别12.线程池怎么回收线程13.redis三剑客14.布隆过滤器原理,不要背八股,说说真正使用时遇到了问题没有(我说没有,不知道该怎么回答了)15.堆的内存结构16.自己在写项目时有没有遇见过oom,如何处理,不要背八股,根据真实经验,我说不会17.redis死锁怎么办,watchdog机制如何发现是否锁过期18.如何避免redis红锁19.一个表性别与年龄如何加索引20.自己的项目的QPS怎么测的,有没有真正遇到大数量表21.说一说泛型22.springboot自动装配原理23.springmvc与springboot区别24.aop使用过嘛?动态代理与静态代理区别25.spring循环依赖怎么解决26.你说用过es,es如何分片,怎么存的数据,1000万条数据怎么写入库中27.你说用limit,那么在数据量大之后,如何优化28.rabbitmq如何批次发送,批量读取,答了延迟队列和线程池,都不对29.计网知不知道smtp协议,不知道写了对不对,完全听懵了30.springcloud知道嘛?只是了解反问1.做什么的?短信服务,信息量能到千万级2.对我的建议,基础不错,但是不要只背八股,多去实际开发中理解。面试官人不错,虽然没露脸,但是中间会引导我回答问题,不会的也只是说对我要求没那么高。面完问我在济宁生活有没有困难,最快什么时候到,让人事给我聊薪资了。下午人事打电话,问我27届的会不会跑路,还在想办法如何使我不跑路,不想扣我薪资等。之后我再联系吧,还挺想去的😭,我真不跑路哥😢附一张河科大幽默大专图,科大就是大专罢了
查看30道真题和解析
点赞 评论 收藏
分享
评论
5
2
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务