CSS
文章平均质量分 77
CSS
麦田里的POLO桔
爱好:搬砖
梦想:造轮子
展开
-
Less 复习
1. 安装、配置插件1)安装插件easy-less2)点击扩展配置3)点击在settings.json中编辑4)做一些配置"less.compile": { "compress": false, "sourceMap": false, "out": "index", "outExt": ".css"},5)重启到这里就完成了,我们手动创建一个less文件,然后Ctrl+S就可以自动生成更新其对应的css文件了。2. 注释...原创 2021-07-11 18:17:32 · 133 阅读 · 1 评论 -
CSS 规则树创建以及检索实质
首先,先回答一下自己的一个许久以来的疑惑,CSS Rules tree 和 CSSOM 的关系:CSSOM 是 CSS Rules tree 的一个节点,CSS Rules tree 和 CSSOM tree 是完全相等的。也就是同一个概念的不同名字。这个是目前许多文章提及 CSSOM 的一个最接近的解释了。翻了几十篇文章,唯独一篇的说法比较奇特,那篇文章说 CSSOM 是一个函数,作用是将 CSS Rules tree 的的节点映射到 Dom tree 上,以形成 Render tree 的节点,原创 2021-05-30 18:07:38 · 973 阅读 · 0 评论 -
前端面试题 - 如何用 CSS 画一个三角形
这是我在牛客上的回答,实现思路很简单:还像往常一样,回答完面试官实现思路过后,面试官又接着问:用的哪个属性?思路确实很容易理解,曾经也是想当然地就觉得很简单,也就没有自己动手去实现,所以被问到用的哪个属性时,也是一脸懵,来看一下,相信你看一眼过后,就不会再忘了:<div class="outer"> <div class="inner"></div></div>.outer{ width: 200px; height: 20原创 2021-05-08 11:40:43 · 604 阅读 · 0 评论 -
前端笔试题总结(三) - CSS篇
1. 颜色的表示方法:blue; #FF0000; rgb(255, 0, 0); rgba(255, 0, 0, 0.5),第四个值取值范围为0-1,0是完全透明,1是完全不透明; hsl(360, 100%, 50%),色相、饱和度、亮度; hsla(360, 100%, 50%, 0.5),多了个透明度。2. 文档样式化的四种技术:Inline Style:<h1 style="color: red">Intrenal Style:就是在<head>原创 2021-04-23 09:32:43 · 112 阅读 · 0 评论 -
CSS3 calc() 用法
CSS3 的calc()函数允许我们在属性值中执行四则运算这样的数学计算操作。例如,我们可以使用calc(100px + 50px)指定一个元素宽的固定像素值为多个数值的和。需要先说明一点,我看好多文章都会说一点:calc()函数内符号的两侧需要加个空格。亲测:calc()函数两侧的空格是可有可无的,只是建议两侧有个空格,不加也不会有任何问题!calc()函数的特点:1. calc()函数能够组合不同的单元。特别是,我们可以混合计算绝对单元(比如百分比、视口单元)与相...原创 2021-04-11 17:52:36 · 4030 阅读 · 0 评论 -
CSS3新增属性
这绝对是一篇适合长期收藏回看复习的文章,罗列了基本上所有的C3新增属性,可以一句话说明白的,就一句话再加个例子给大家讲明白,可以深挖的就已经给大家找好了很好文章。原创 2021-04-10 23:36:28 · 1090 阅读 · 0 评论 -
opacity: 0、visibility: hidden、display: none 优劣和适用场景,以及隐藏元素的几种方法
声明:转发本文只为方便下次阅读,如有侵权,请立即联系本人,定立即删除。建议参考原文:掘金_opacity: 0、visibility: hidden、display: none 优劣和适用场景,以及隐藏元素的几种方法1. display: noneDOM 结构:浏览器不会渲染 display 属性为 none 的元素,会让元素完全从渲染树中消失,渲染的时候不占据任何空间; 事件监听:无法进行 DOM 事件监听,不能点击; 性能:修改元素会造成文档重绘重排(repaint与reflo...转载 2021-04-10 17:10:20 · 1860 阅读 · 0 评论 -
让HTML img垂直居中的三种办法:
声明:原文来自DIVCSS5,其次原文代码存在一些引起误解的地方,已经进行修改和测试,下文会注明引起误解的地方。主要收藏为方便下次阅读,故进行转发,如有侵权,请私聊本人,定立即删除。 原文连接:DIVCSS5_让html img垂直居中的三种办法让HTML img垂直居中的三种办法:一、使用flex完成垂直居中操纵cssflex实现垂直居中。flex或许不是完成垂直居中最好的选择,由于IE8,9其实不赞成它。那时,为了用flex实现垂直居中,我们起首要竖立一个包裹着图片的d...转载 2021-04-10 10:18:57 · 24856 阅读 · 1 评论 -
三栏布局的七种实现方式
目录1、利用浮动2、利用绝对定位3、利用 flex 布局4、圣杯布局:5、双飞翼布局:三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局。大致写了五种方式实现,前三种无法达到重要内容优先显示的效果,而后面两个可以:最左侧一栏 left 宽度为300px,最右侧一栏 right 宽度为200px1、利用浮动原理:浮动元素脱离文档流HTML 结构<div class="wrapper"> <div ...原创 2021-03-24 09:26:45 · 1497 阅读 · 6 评论