1
element-ui 表单校验 Rules 配置 常用黑科技

type 指示type要使用的验证器。可识别的类型值为: string:类型必须为string。type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] <el-form-item l ...

妖色调 @ 2020/07/11

4
CSS基础面试题,快来查漏补缺

本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经。 我对问题进行了分类整理,并给了自己的回答。大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺。虽作为一个面试资料,但感觉也能帮助前端新手梳理CSS的知识点。 开胃餐-两道常见考题 盒子模型 样式与选 ...

Adagio- @ 2020/07/10

6
CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好。 CSS Backgrounds and Borders Module Level 3 CSS魔法堂:重拾Border之——解构Border CSS魔法堂:重拾Border之——不仅仅是圆角 CSS魔法 ...

Adagio- @ 2020/07/09

7
(转自MDN)CSS基础一定要看的包含块(containing block)

之前在写《个人常用的水平居中方法》这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念。 今天刷面试题的时候,又看到了containing block这个词,之前计算百分比考虑了几种情况(如那些属性值根据哪个元素计算的),但不知道所谓的‘哪个元素’就是包含块。系统的看 ...

Adagio- @ 2020/07/09

11
我:CSS垂直居中还有什么另类方法?求职者:不太了解了

今天面试了一个前端实习生,我问了一个比较简单的问题,就是css如何实现元素垂直居中的问题,但是要说出多种方案。其实他说的不错,基本上说到了flex布局,grid布局等下面提到的布局。还不错,但是这几种都是已经经常用的,老生常谈,但是我想听到他说一种用的比较少的解决方案,了解一下他学习的深度和广度。但 ...

前端-发际线还在 @ 2020/07/08

12
很多人css数值(百分比|负值)基准分不清,今天给你讲讲

今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。 width height 百分比 当元素的height、width设置为百分比时,分别基于包含它的块级对象的高度、 ...

前端-发际线还在 @ 2020/07/08

13
块元素,行内块元素,行内元素(水平垂直居中)

1.块级元素水平垂直居中 方法1 1 <!--(该方法兼容ie8以上浏览器)--> 2 position: absolute/fixed; 3 left:0; 4 top:0; 5 right: 0; 6 bottom: 0; 7 margin:auto; 方法2: 1 <!--前提条件:必需知道该 ...

西门-吹发 @ 2020/07/06

14
奇妙的 CSS MASK

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常少,本文将罗 ...

ChokCoco @ 2020/07/06

16
给徒弟说一下前端开发工程师的19个救生工具

今天看见徒弟写个css属性这么慢,是在是看不下去了,就问了他有没有用过一些辅助工具,他说没有,额。。。我也是很无语,没办法,谁叫我是他师傅呢。还是要尽到一个师傅的责任。所以就利用休息时间给他讲了19个辅助工具,满满的干货呀。我这也是第一次给别人说这么多,这么详细,想想还不错,教给别人东西的感觉是不一 ...

前端-发际线还在 @ 2020/07/06

17
同事帮我用css做出炫酷的卡券效果,深感崇拜啊

前言 前几天,我接到了一个项目,模块中要写一个卡券效果,当时没有图片,也就是要用css来实现,当时我是懵逼的,也没有写过这样的,一时间不知道怎么写,毕竟要写的像UI设计的一样美观。我就只好求救我的大神级别的同事了。不仅css玩的溜,人家JavaScript玩的更溜,阁下实在是佩服。 常见的卡券样式如 ...

前端-发际线还在 @ 2020/07/06

18
老婆竟然只知道几个css伪类,不行得惩罚她了

最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用。我也拗不过她,而且其实我也挺佩服的。所以就教她了。最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类是什么? 她说css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。 ...

前端-发际线还在 @ 2020/07/06

19
三大标签table、ul、from

新的一天又开始了,今天学习了三个内容 一、表格标签 table 在各个网页中我们会发现许多商品页面,展示是用什么来展示的呢,表格无疑是一种不错的选择看下图。 一张常见的简历就是有表格标签来编写的 创建表格: <!-- 表格由基本标签table tr td组成其中tr代表表格的行 td代表表格的列,行 ...

一生的风景 @ 2020/07/04

20
css:精灵图和字体图标(精灵图和icomoom字体图标的使用)

1、精灵图 (1)为什么需要精灵图 一个网页中往往会应用到很多小的背景图片,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器的压力过大,这将大大降低页面的加载速度,精灵图是将图片放到一张里面,这样的话只要请求一次就可以了 精灵图的出现降低了服务器的压力,提高了图片的加载速度 (2 ...

怀梦想,致远方 @ 2020/07/04