随笔分类 - 1_css（布局、z-index等）
摘要：z-index总结 一、总结 一句话总结： 1、子元素无论z-index高低，都是在父元素子上 2、如果想让某元素显示在某元素之下，设置为同级，上面的z-index高 1、如果想让某元素显示在某元素之下，z-index如何设置？ a、【同级】：设置为同级 b、【上面的z-index高】：把上面的元素
阅读全文
摘要：svg图标爽使用 一、总结 一句话总结： 【网站】：https://iconpark.oceanengine.com/official： 在这个网站可以选择好颜色和样式直接下载下来 【使用】：使用就是选好样式，直接复制粘贴代码即可，异常方便 二、svg图标爽使用 1、相关知识 在这个网站可以选择好颜
阅读全文
摘要：css3的z-index问题 一、总结 一句话总结： 因为【下拉层是当前层的孩子（html结构上）】，所以无论怎么调z-index孩子都会在父亲上面 所以想要把孩子放在某结构下面，就【将孩子对应的兄弟的z-index设置的比孩子大】就好，那么孩子就在兄弟之下了 【每一级html结构】中的【z-ind
阅读全文
摘要：fixed布局居中 一、总结 一句话总结： 设置好【宽高】，然后设置【margin为auto】，位置的上下左右都设置为0就是上下左右居中了 /*如果文档宽度小于 800 像素则修改:*/ @media screen and (max-width: 800px) { #question_backend
阅读全文
摘要：CSS函数贝塞尔曲线(cubic-bezier) 一、总结 一句话总结： cubic-bezier可以放在css中实现更多动画：transition:all 2s cubic-bezier(.17, .86, .73, .14); 二、CSS函数贝塞尔曲线(cubic-bezier) 转自或参考：实
阅读全文
摘要：CSS属性选择器 一、总结 一句话总结： CSS属性选择器是中括号，比如[love="you"] {color: red;}，也比如vue中解决插值表达式的[v-cloak] [love] { color: green; } [love="me"] { color: red; } 二、CSS属性选择
阅读全文
摘要：FontAwesome动态旋转图标类（fa-spin&fa-pulse） 一、总结 一句话总结： fa-spin类：将"fa-spinner"这个图标旋转起来，形成一个连续流畅的旋转动画效果。 fa-pulse类：将"fa-spinner"这个图标以八步为周期旋转起来，形成一个不太流畅的旋转动画效果
阅读全文
摘要：重绘（redraw或repaint）和重排（reflow） 一、总结 一句话总结： 重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。 重排（重构/回流/reflow）：当渲染树中
阅读全文
摘要：前端性能优化之重排和重绘 一、总结 一句话总结： 重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。 重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺
阅读全文
摘要：CSS3疑难问题 7、实现元素水平垂直居中 一、总结 一句话总结： 方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto 方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（lef
阅读全文
摘要：CSS3疑难问题 8、纯css实现三角形 一、总结 一句话总结： 纯css实现三角形：原理是通过边框来实现三角形：将内容区的宽高设置为0，然后将需要的部分设置为真实的颜色，不需要的部分设置为透明色transparent .box{ width: 0; height: 0; border: 200px
阅读全文
摘要：css参考 纯css实现三角形 一、总结 一句话总结： 内容区的宽高设置为0，需要的部分设置是真实的颜色，不需要的部分设置成透明色transparent .box{ width: 0; height: 0; border: 100px solid; border-left-color:red ; b
阅读全文
摘要：css参考 实现元素水平垂直居中 一、总结 一句话总结： 方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto 方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（t
阅读全文
摘要：sass与less的区别？Stylus又是啥？ 一、总结 一句话总结： Less、Sass 和 Stylus是比较流行的CSS预处理器，功能都差不多，写法相差也不大（但是也有差别），使用都非常简单，stylus是没有大括号({})和分号(;) 1、比较流行的CSS预处理器？ Less、Sass 和
阅读全文
摘要：范仁义css3课程 49、媒体查询小实例 一、总结 一句话总结： 媒体查询小实例 中用媒体查询实现了不同屏幕不同尺寸的响应式布局，这也是bootstrap栅格系统做响应式布局的核心。 二、媒体查询小实例 博客对应课程的视频位置：49、媒体查询小实例https://www.fanrenyi.com/v
阅读全文
摘要：范仁义css3课程 48、媒体查询逻辑连接符 一、总结 一句话总结： 媒体查询中的逻辑操作符有not（取反）、and（并且）、only（仅仅匹配成功时应用样式）和逗号(,)（或者） 1、为什么在写媒体查询时，only最好不要忽略？ only操作符表示仅在媒体查询匹配成功时应用指定样式，可以通过它让选
阅读全文
摘要：范仁义css3课程 47、媒体查询属性 一、总结 一句话总结： 媒体查询常用的属性有width（宽）、height（高）、orientation（方向：手机的横屏还是竖屏）、device-width（设备宽度）等 二、媒体查询属性 博客对应课程的视频位置：47、媒体查询属性https://www.f
阅读全文
摘要：范仁义css3课程 46、媒体查询语法 一、总结 一句话总结： 媒体查询语法：@media not|only mediatype and (expressions) { CSS 代码...;} @media screen and (max-width: 699px) and (min-width:
阅读全文
摘要：范仁义css3课程 45、媒体查询介绍 一、总结 一句话总结： 媒体查询可以根据不同设备（比如屏幕、打印机等）、不同属性（比如视图的宽高、手机的横屏竖屏、屏幕的分辨率等）来自动的调整元素显示的样式，可以用作响应式布局。 1、媒体查询中的@media screen and (width: 600px)
阅读全文
摘要：范仁义css3课程 44、弹性盒子（flex）实例 一、总结 一句话总结： 弹性盒子小实例中主要是给弹性盒子容器设置了display: flex;和justify-content: space-around;属性。弹性盒子可以用来做响应式布局，弹性盒子对不同设备不同屏幕尺寸有很好的适应性。 二、弹性
阅读全文
