![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS效果
喵_美
这个作者很懒,什么都没留下…
展开
-
固定定位的盒子靠近版心右侧对齐案例
小盒子left 50% 然后 margin-left 版心宽度一半。原创 2024-07-08 11:29:28 · 265 阅读 · 0 评论 -
解决行内元素、行内块元素产生水平空隙
问题:行内元素和行内块元素之间换行的话,即使除去内外边距,他们之间还是会有距离,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .s...原创 2019-05-16 14:52:13 · 1361 阅读 · 2 评论 -
CSS兼容处理
建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器(主要指window7系统的浏览器),转而支持 edge(window10以上系统)这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅降级, 渐进增强) 和两种 技巧(前缀兼容与HACK兼容)原创 2024-07-08 10:58:26 · 786 阅读 · 0 评论 -
字体图标的使用
7kkyc2');important;原创 2024-07-08 10:41:45 · 928 阅读 · 0 评论 -
在一行中实现每个盒子间隔相等
缺点:苹果的兼容性不好,推荐以下方法。原创 2024-07-08 10:32:58 · 306 阅读 · 1 评论 -
清除浮动的方法
靡不有初,鲜克有终。既然搭建了高架桥和空轨 自然也要有个终点站,不然跑着跑着脱轨了就很尴尬。原创 2024-07-08 10:21:36 · 579 阅读 · 0 评论 -
绝对定位实现横线增长方向小技巧
使用绝对定位脱标后,用left和top设置横线增长方向。如果是left: 0;从左向右过渡长,如果是right: 0;原创 2024-07-07 01:24:24 · 172 阅读 · 0 评论 -
行内元素、块级元素居中
盒子宽高已知, position: absolute;left: 50%;margin-left:-自身一半宽度;盒子宽高已知, position: absolute;margin-top:-自身一半高度;这种方法不推荐,因为当盒子宽高不是偶数的时候,一般会出现小数点,推荐使用以下方式,比较省事,让浏览器自己去计算。原创 2024-07-07 01:13:44 · 278 阅读 · 0 评论 -
制作精灵图
图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。原创 2024-07-06 00:58:32 · 332 阅读 · 0 评论 -
伪元素content追加文字使用小技巧
当用js渲染的一些值,可以加到自定义属性中,然后用content将自定义属性的值渲染出来。E::before和E::after本身的作用是追加字,直接在文字后面追加链接。原创 2024-07-06 00:54:03 · 240 阅读 · 0 评论 -
外边距合并(外边距塌陷)
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。解决方案: 避免...原创 2019-05-15 23:56:42 · 195 阅读 · 0 评论 -
利用border绘制三角技巧
绘制三角形的效果如图。原创 2024-07-06 00:48:45 · 235 阅读 · 0 评论 -
去除图片img下间隙的方法
在一个容器放入图片时,容器大小会比图片大,因为有的文字可能会出于基线,撑开盒子。解决方案:(1)body{ font-size: 0px; }(2)img{display: block; }(3)img{ vertical-align: middle; }...原创 2019-04-25 11:41:38 · 2219 阅读 · 0 评论 -
单行(多行)文本多余部分展示省略号
更方便的是改变webkit-line-clamp的值还可以实现3、4、5等等多行文字显示多余隐藏的效果~原创 2019-06-26 16:30:47 · 9293 阅读 · 1 评论 -
隐藏的h1写法(以图换字)
所谓以图换字,即直接使用一张图片或背景,没有文字。我们知道,蜘蛛爬取时是不会获取图片上的内容的,但是如果是添加上文字,即便使用一些字体,也可能达不到图片的显示效果。如何将用户体验与SEO优化相兼容呢,我们可以使用text-indent属性来操作。原创 2024-07-06 00:39:05 · 163 阅读 · 0 评论