css3
关注
分享
扫一扫
冰雪为融
我与我周旋久，宁做我
展开
-
js font 字体引入多个ttf文件
js font 字体引入多个ttf文件原创 2022-06-23 12:33:29 · 997 阅读 · 0 评论 -
css cursor: url 自定义鼠标光标遇到的坑
1、大小不能大于32*32（切记）本人就是在这个上面栽了很久，一直出不来2、最好是 ico，cur格式3、使用绝对路径4、在逗号后面加通用游标，如官网所写示例：map.style.cursor = "url('/img/cursor.ico'), pointer";附：在线修改图片大小网址：在线图片大小修改器，图片尺寸修改，格式转换【免费】png等格式转ico:PNG转ICO - 在线转换图标文件...原创 2022-04-24 13:20:44 · 4172 阅读 · 2 评论 -
字体图标不能实现transform: rotate(180deg) 没生效
想让箭头选装, 但是直接加rorate没用, 则主要添加dispaly: inline-block转载 2020-04-28 10:20:37 · 1597 阅读 · 0 评论 -
css一侧固定，一侧自适应布局的实现
左侧固定，右边自适应这是一个很常用的css布局，尤其是在后台页面当中，使用频繁。同事也是面试当中常常问到的考点。今天，我们就来总结一下。第一种方法：浮动布局准备工作： 先准备2个div 随便放点东西进行填充！<div id="aside"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. La...转载 2018-08-24 19:52:30 · 1308 阅读 · 0 评论 -
CSS性能优化的8个技巧
我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深有体会。笔者认为，为了更多地避免这一情况，首先要重视起性能优化相关的工作，将其贯穿到整个产品设计与开发中。其次，就是...转载 2018-08-04 19:49:03 · 977 阅读 · 0 评论 -
z-index负值深入理解
补充点小知识：CSS3与新时代的层叠上下文：css3之前，可能我们说会影响层叠上下文的也就position属性了，那CSS3时代的到来，对层叠上下文规则带来了新的影响，css3时代会影响层叠上下文的除了定位还有：元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto元素的opacity值不是1元素transform值不是none元素的fi...原创 2018-07-06 21:34:17 · 14154 阅读 · 0 评论 -
css3中的z-index
元素的层叠黄金准则：1）、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个2）】后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素定位元素与传统层叠上下文对于position值为relative/absolute以及firfox/IE浏览器（不包括Chrome浏览器）下含有...原创 2018-07-05 21:46:57 · 9815 阅读 · 0 评论 -
css易掉坑知识点整理之系列（二）
之前也整理过系列（一），有兴趣的请点击：系列一。这是我在学习的过程中遇到的易错的或者易掉坑的css知识点的总结整理，嗯，还是会持续更新的2018/6/19今天遇到了一个base64格式的图片数据，想要作为背景图片，嗯，这种不是直接写url地址即可，先看个小示例<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA...原创 2018-06-19 18:38:21 · 208 阅读 · 0 评论 -
页面布局思路
网页布局是前端中一个基本概念，当一张空白的网页呈现在我们眼前时，如何把文字，图片等网页元素有规则地排列在网页中，就是网页布局要考虑的重要方面。好的网页布局能够让前端开发人员更好地把握网页的整体结构，提高代码的书写效率，复用性，和后期维护。作为初学者，我们应该重视页面布局，而不是简单为了达到页面效果，而不考虑页面的布局，毕竟页面布局和代码的质量是息息相关的。经过学习，我总结了一些自己的理解：1.要有...转载 2018-06-10 20:29:51 · 562 阅读 · 0 评论 -
理解流式布局和响应式布局
流式布局：流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式。流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。这种布局方式在Web前端开发的早期历史上，用来...原创 2018-06-10 20:09:23 · 20865 阅读 · 0 评论 -
css hack
那么在HTML中CSS hack究竟是什么意思呢？CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_w...原创 2018-06-16 21:29:38 · 208 阅读 · 0 评论 -
css3中的content字符编码
content有5中属性content:""; // 为空content:attr(title); // 可以获取标签属性值 也可以获取自定义属性值 比如 css是 div:after{content:attr(gaga)}则可以获取到了123content:"我是谁"; // 填写字符串比如// css是div:after{content:"我是"counter(title)",...转载 2018-07-28 09:39:07 · 1086 阅读 · 0 评论 -
border出现虚边问题解决
当我们只给元素设置了border-top，没有设置其他边框的时候，如果我们使用了border-radius会出现虚边的情况，如下所示：css代码：div{width:100px; height:100px; border-top:2px solid #000; border-radius:50%; }效果图如下：很明显我们可以看到两侧的虚边，这是我们不想要的，解决办法很简单：...原创 2018-08-20 19:16:28 · 8518 阅读 · 0 评论 -
页面添加锚点的三种方式
页面添加锚点的三种方式 HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。 锚点链接对SEO的...转载 2018-08-31 11:10:30 · 16170 阅读 · 0 评论 -
计划列表功能实现
效果图如下：描述：右侧的图标是可以根据你自己的需要换的哦小原点的实现原理：使用伪类，核心css代码 li:first-of-type h2:before,li h2:after{ content:''; position:absolute; width:12px; hei...原创 2018-08-21 20:32:49 · 896 阅读 · 0 评论 -
css3文本相关的实战案例
1、文字排版相关：direction:定义文字排列方式（全兼容）：rtl(从右向左显示) ltr（从左向右显示）注意：要配合unicode-bidi一起使用 <h1>文字排版</h1> h1{ font:40px/60px "微软雅黑"; text-shadow:1px -1px 3px #f...原创 2018-09-06 10:08:09 · 300 阅读 · 0 评论 -
纯css3实现的轮播图效果（表单制作轮播图）
主要是使用css3新增的伪类选择器，利用表单制作的轮播图效果，效果图如下所示完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css实现轮播图效果</title>原创 2018-09-06 11:13:57 · 1874 阅读 · 0 评论 -
纯css3实现无缝轮播图效果
主要就是利用css3中的动画了，看完整实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css实现轮播图效果</title> <style>原创 2018-09-06 12:24:41 · 7444 阅读 · 2 评论 -
我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问，谈谈CSS布局。本来呢我以为布局主要涉及float跟display相关属性，以及他们的包含框、静态位置等等。后来看了大神的一片面试文章，嗯？这里怎么还有个BFC，这是神马东东。待我搜索一下，萨萨萨，不看不知道，越看越糊涂，这到底是个神马东东。。。经过一个周时间的查阅资料和自我思考，在此总结一下我对BFC的认识，愿与各位道友分享，欢迎拍砖！ 对C...转载 2018-09-12 11:29:18 · 175 阅读 · 0 评论 -
CSS控制前端图片HTTP请求的各种情况示例
图片的http请求，有很多种情况，那么究竟什么情况下面不会发生请求呢？下面我用案例一一列举一下，希望对你深入了解http图片请求有所帮助。1. 隐藏图片XML/HTML Code复制内容到剪贴板<img src="haorooms.jpg" style="display: none" /> http请求如下：结论：只有Opera不产生请求。 注意：用visibili...转载 2018-09-13 14:37:40 · 1682 阅读 · 0 评论 -
文本溢出显示省略号
文本溢出隐藏问题：1）、多行文本溢出显示省略号 word-break: break-all; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;2、单行文本...原创 2018-12-01 16:15:26 · 861 阅读 · 0 评论 -
添加自定义字体icon图标
先提供一个比较好的自定义icon图标库阿里图标库所以接下来的使用主要就是以从上面提供的网址下载的icon图标为例（如果不会使用，请参考使用下载完之后是一个压缩包，解压后，只需要根据我们的需要把相应的文件放入我们的项目中即可需要注意的是：我们一般会将我们下载的字体图标放在我们自己建fonts文件夹中，把iconfont.css放在css文件夹中，如果你这样做了，一定要记得修改iconfont中的路径...原创 2018-06-21 18:39:38 · 9855 阅读 · 0 评论 -
CSS3 中的 box-shadow 属性
“box-shadow”属性box-shadow属性是一个CSS3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。语法box-shadow属性接收一个由5个部分组成的值JavaScript12box-shadow: offset-x offset-y blur spread c...转载 2018-06-06 14:18:22 · 8502 阅读 · 0 评论 -
css中background系列详解
研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background...原创 2018-05-29 22:21:04 · 2006 阅读 · 0 评论 -
rem、em、px的区别，详细介绍rem与px的转换
PX：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。EM：em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。注意：em的值是不固定的，em会继承父元素的字体大小REM：rem是相对长度单位，相对于根元素（即html元素）的font-size计算值的倍数。嗯、先看看rem的兼容性，如下图。rem是相对...原创 2018-04-19 20:18:18 · 5849 阅读 · 0 评论 -
深入了解css中的grid布局
只说概念可能理解的慢，我们通过做一个小布局，把Gird相关的知识点总结一下。保证你看完之后，grid布局也就学的差不多了。先看看我们的第一个小例子最终的效果图：下面是我们的HTML代码<div class="wrap"> <header class="title">title</header> <nav class="aside"&am原创 2018-04-19 19:12:28 · 3704 阅读 · 0 评论 -
利用flex制作筛子
如果对flex布局不了解的或是有疑问的请点击https://blog.youkuaiyun.com/lhjuejiang/article/details/80019673核心代码：display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:space-around;displa...原创 2018-04-22 21:13:05 · 642 阅读 · 0 评论 -
css中的counter计数器
作为程序猿，代码比什么都有说服力，嗯，所以废话不多说，直接看吧，认真看完了，就一定有收获（内容有点多，需要一点耐心哦,我是一点一点写的，咱也一点一点看呗）counter:是css计数器，只能跟content属性在一起使用的时候才起作用，而content属性专用在before/after伪元素上counter计数器的属性和方法属性有：counter-reset、counter-increment方法...原创 2018-04-05 15:43:05 · 4829 阅读 · 0 评论 -
css中外边距折叠原理及解决办法
原文章链接点击打开链接晚上没事的时候看看今天白天遗留的问题，果然看的次数再多也不如动动金手，之前也看了很多遍关于外边距折叠的文章，但都没有真正的理解，今天边看边动手，终于理解了，嗯，原作者的文章写得很不错，自己再写估计也是一样只是方式不同，所以就直接转载喽，喜欢的并且英语也不错的可以看原作者的，里面还有英文解释呢在css中两个或多个盒子（可能是兄弟元素也可能是是父子关系）的相邻边界（期间没有任何非...转载 2018-03-28 21:48:52 · 3668 阅读 · 0 评论 -
简单了解伪类和伪元素的区别
使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，这里不怎么写具体的实例，详细的应用后续我会做出详细的总结。伪类的定义：伪元素的定义：CSS伪元素是用来添加一些选择器的特殊效果。伪元素的语法：CSS伪类是用来添加一些选择器的特殊效果。哈哈，除了伪类和伪元素不同，其他的好像都...原创 2018-04-03 20:52:20 · 1855 阅读 · 0 评论 -
使用before和after实现一些有意思的效果实例
主要就是运用before和after在元素前面和后面插入伪元素，实现一些有意思的小效果，嗯、直接上代码了（我展示的都是一些简单的效果，可以在此基础上让效果更炫酷，我觉得只要原理知道了，再去实现其他的效果，就特别简单了，所以此处就不再去修饰了，也方便不太清除原理的同行看代码的时候更简洁）效果一、鼠标移上链接，出现方括号：效果图如下：鼠标移入之前和移入之后的对比图 <sty...原创 2018-04-04 15:16:48 · 2356 阅读 · 0 评论 -
深入学习CSS3中的浮动、清除浮动以及BFC
做测试题的时候遇到了一个关于BFC的题目，what？什么是BFC，然后我赶紧上网查阅了各种文章以及博客，自己又动手实践了。终于把浮动和清除浮动以及BFC的问题搞清楚了，捋一下思路，总结在一起，对浮动问题有疑问的以及不了解BFC是什么的看过来喽！一、float定义float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会...原创 2018-03-28 14:33:02 · 640 阅读 · 0 评论 -
css3盒模型、弹性盒模型、怪异盒模型
一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。（marg...原创 2018-03-27 09:19:13 · 13716 阅读 · 0 评论 -
响应式和自适应布局的区别
自适应：自己根据屏幕宽度的改变而改变（典型的写法不需要media判断，直接让每个元素通过相对的宽度，比如百分比、vh、em 、rem等来改变容器的大小，文字的大小）响应式：根据设备的不同而展示不同的效果（典型的写法就是通过media判断，在不同的设备、分辨率下展示不同的页面效果）下面再从直观一点的来看,响应式和自适应的区别: 首先两种方式解决问题的是不一样的。 自适应是为了解决如何才能在不同大小的...原创 2018-05-01 23:08:41 · 2822 阅读 · 1 评论 -
CSS中的Flex布局详解
转载：阮一峰大神的http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.bo...转载 2018-04-20 16:04:57 · 1212 阅读 · 0 评论 -
导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）
上代码前先说一下一个需要注意的点我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，（但是IE6下不生效）实现法一：HTML代码：&...原创 2018-05-24 23:00:31 · 2767 阅读 · 0 评论 -
CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现，变形和转换更适合做元素的交互，而自定义动画除了做交互外还能使到网页具...转载 2018-06-12 11:04:31 · 12451 阅读 · 0 评论 -
css中易掉坑的知识点总结系列（一）
今天在写css代码的时候，忽然发现很多看起来挺简单的，但是却忽略了它们的小知识点，小细节，所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起，方便自己以后查阅，也希望同时能够帮助到您(主要是针对我个人，有的可能重要，但我自己掌握的比较好，可能不会写在上面哦)本博会持续更新，不会特意整理，遇到了就会往这里面加，就当是记笔记了2018/6/11：遇到的css易错知识点整理1、选择器优先级：单个...原创 2018-06-11 21:26:32 · 289 阅读 · 0 评论 -
详解css3中的:nth-of-type(n)
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯:nth-of-type() CSS 伪类 匹配同类型中的第n个同级兄弟元素。先来看个简单的例子理解一下上面的意思：HTML代码如下<div id="wrap"> <p>one</p> <div>我是div</div> ...原创 2018-06-04 21:12:40 · 36219 阅读 · 1 评论 -
弹性盒模型新旧版本对比总结
因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击新版本弹性盒模型：https://blog.youkuaiyun.com/lhjuejiang/article/details/80019673旧版本弹性盒模型：https://blog.youkuaiyun.com/lhjuejiang/article/details/804713...原创 2018-05-27 20:23:01 · 1449 阅读 · 0 评论