css
曦曦湘涟
web前端
展开
-
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...原创 2020-02-20 23:00:33 · 5474 阅读 · 0 评论 -
使用css3制作一个简易的环形进度条
css: section { width: 2rem; height: 2rem; position: relative; margin: 2rem; } .wrap, .circle, .percent { ...转载 2020-02-18 17:27:39 · 283 阅读 · 0 评论 -
CSS水平居中+垂直居中+水平/垂直居中总结
目录 水平居中 行内元素 块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素 块级元素 方案一:使用定位 方案二:使用flexbox布局实现(高度定不定都可以) 水平...转载 2020-01-18 15:08:29 · 176 阅读 · 0 评论 -
BFC原理
一、常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTM...转载 2020-01-18 15:27:50 · 165 阅读 · 0 评论 -
px、em、rem的区别
px px是英文pixel的缩写,意思是像素,为相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 特点 IE无法调整那些使用px作为单位的字体大小; 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 em em是相对长度单位,相对于父级元素的字体大小,所以em的值...原创 2020-01-09 12:48:17 · 468 阅读 · 0 评论 -
W3C标准盒模型与IE盒模型区别
今天被这两个盒模型搞得有点晕。。。。。。 最初的时候是看菜鸟教程学习的,菜鸟上的盒模型解释是这样的 刷面试题的时候牛客网上的盒模型的面试题答案是这样的 what?怎么同样是说盒模型的宽度,却是不同样的解释?接着我去MDN上搜,MDN上好像没IE盒子模型的解释,不知道是不是我没看清楚还是怎么的,但是我终于知道这是为什么了 接着,问题又来了,我太难了,这个IE模型究竟是怎么回事呢?然后我去看大神...原创 2020-01-08 00:14:59 · 205 阅读 · 1 评论