CSS - 分享生活和学习中的点点滴滴

前端技术 2023/09/03 CSS

关于Link标签，相信接触的人都知道相关用法，但是我经常忘记rel的实际作用，这次专门查找了下，记录，以作备用。 Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表。下面是链接外部样式表复制代码代码如下: <head> &...

前端技术 2023/09/03 CSS

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet <（内部样式）Internal style sheet...

前端技术 2023/09/03 CSS

即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。如：使用方式 CSS Code复制内容到剪贴板 /** 数据格式 **/ data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAA...

前端技术 2023/09/03 CSS

PNG图片在IE6下的透明问题算是个老生常谈了，只能怪那坑爹的IE6了，哈哈，这里小编汇总了一下几种解决方案，推荐给大家。 1、滤镜filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEn...

CSS默认可继承样式详解

前端技术 2023/09/03 CSS

一直想总结出一份可继承样式的列表。常听说，颜色和字体是可继承的，盒模型样式是不可继承的，但其他样式呢？本文内容包括所有可继承的样式常用可继承样式 CSS Code复制内容到剪贴板 color cursor direction font letter-sp...

初探CSS3中的calc()功能

前端技术 2023/09/03 CSS

之前，我们想要实现一个完美的宽度自适应的输入框好麻烦，曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况，我们不得不分外小心，因为各个浏览器的表现可能不一致。现在，firefox和webkit相继支持calc()功能了，我们也可以学习下...

前端技术 2023/09/03 CSS

当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以...

前端技术 2023/09/03 CSS

通常，我们要让某元素居中，会这样做：复制代码代码如下:#element{ margin:0 auto; }如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下：复制代码代码如下: #element{ position:fixed; ...

前端技术 2023/09/03 CSS

当一个链接得到焦点时，默认会有个虚线框。如图：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：复制代码代码如下:a:focus { outline:none; -moz-out...

前端技术 2023/09/03 CSS

折纸效果是最近触摸屏幕最流行的一个3D效果，工作原理很简单，只需要轻轻触摸屏幕，它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮！在我们的网站上，曾经共享过几篇关于折叠效果的设计文章，有兴趣的朋友可以阅读一下。今天我们带来了更多关于折叠特效的...

关闭

我的博客