vue任意关系组件通信与跨组件监听状态 vue-communication

大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! ... »

CSS精灵图与字体图标

CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的 ... »

轻轻松松学CSS:Grid布局

网页布局总的来说经历了以下四个阶段: 1、古老的table表格布局,现在基本已被淘汰。 2、float浮动布局(或者position定位布局),借助float、position 等属性等进行布局,这种方法很成熟,兼容性非常好,现在使用的比较多,但比较繁琐。 3、flex弹性布局,革命性的突破,解决传 ... »

css浮动属性

1、为什么需要浮动 HTML中的标签元素大致分为三类:块状元素、内联元素、内联块元素。 每种元素都有其各自的特点,其中块状元素会独占一行,而内联元素和内联块元素则会在一行内显示。如果我们想让两个甚至多个块状元素在同一行显示,这就需要用到css的浮动属性。 2、什么是浮动(float) 浮动(floa ... »

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

关于本教程 通过一个PC端和一个移动端网上书城案例,穿插讲解CSS3中重要的知识点。 每个页面子模块均采用手把手一步一步的方式进行代码编写。 本教程不覆盖所有的CSS知识点,对于知识点的讲解秉承宁缺毋滥的原则。 大家都知道有一个二八原则,即平时工作中80%最常用的知识点占全部知识点总量的20%。笔者... ... »

CSS之选择器权重等级(不一样的权重操作)

众所周知我们的css选择器权重最高为!important往下依次为:!important,行内样式,ID选择器,类,属性选择器和伪类选择器元素和伪元素 那么我这里讲一点不一样的东西。 在某些修改某些组件样式的时候也都有头痛过权重等级。(只要不是放在行内或用!imprtant 你的选择器怎么放都无法盖 ... »

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

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

HTML&CSS面试高频考点(三)

11. CSS隐藏元素的方式 /*占据空间,无法点击*/ visibility: hidden; position: relative; top: -999em; /* 不占据空间,无法点击 */ position: absolute; top: -999em; display: none; pos ... »

HTML&CSS面试高频考点(二)

HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + border + padding) + margin,即真实大小。 *参考标准模式与兼容模式的区别,兼容模式下为怪异盒模型 ... »

CSS——文本超出隐藏显示省略号

文本超出隐藏显示省略号 1、单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflow 属性规定当内容溢出元素框时发生的事情,可能值为visible(默认)、hidden、scroll ... »

从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

我们使用原生JS+CSS3,来开发一个集趣味性与技术性于一体的H5小游戏。我们会就地讲解项目中用到的css,js基础知识点,先举一些小的示例,来阐明知识点的用法,再说明如何在本项目中应用,应用在哪块功能的实现上。比如标准文档流,定位,浮动,盒子模型,CSS3弹性盒子,CSS3高级选择器,背景图片,j... ... »

CSS优先级的两种理解方式

方式一:值相加 我们先去MDN看看官方的解释: 优先级是如何计算的? 优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。 当同一个元素有 ... »

css3中的@font-face你真的了解吗

以前我们在做页面得时候遇到设计师用特殊字体设计得特效文本效果我们得处理办法是做成固定得图片,然后应用到网站中,使用图片文字只能是固定不变的,这并不是我们期望的。 随着浏览器得更新迭代,现在的浏览器已经基本支持我们引入外部字体库,并且应用到网站,同时我们可以随时更改文本内容 ... »

vue甘特图gantt

vue做甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等)(3)任务之间显示父子层级关系;(4)左侧列表信息,右侧时间轴表示任务;(5)每个任务可以订制样式,并且可以动态修改样式;(6)自定义时间粒度显示(小时、天、星期、月、年);(7)支持大批量数据渲 ... »

【百度前端技术学院 Day7/8】布局

1. 定位 1.1 文档流 单个元素: 块级元素:内容宽度是其父元素的宽度的100%,并且与其内容一样高。 内联(行内)元素:高宽与他们的内容高宽一样。(所以不能为他们设置宽高) 元素之间的交互: 块级元素:在视口中垂直布局——每个都将显示在上一个元素下面的新行上。 内联元素:它们互相之间以及任何相 ... »

CSS3弹性布局内容对齐(justify-content)属性使用详解

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。 注意:弹性布局中有两个基本术语main axis和cross ... »

前端国际化的实现(5种情景的中英文)

最近做国外项目,需要实现项目的的国际化,这里大致捋一下思路、实现方式。项目技术栈是 vue + antd + java,我大致将需要翻译的内容划分为如下5个部分,接下来会一个一个的说明为何这么区分、如何实现翻译。这里强调一下,很负责的说,目前国际化,就是开发者写对象,一个key关联若干语种的翻译,纯 ... »

前端开发页面设计风格优化指南

从Ant Design + element风格谈起 1、Ant Design提出的原则:【足不出户】 能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完 ... »

css实现朋友圈照片排列布局

纯css实现朋友圈不同数量图片不同布局 首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例; 可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列; 假设有如下HTML代码,这里imgList是一个图片地址数组; <ul> <li v-for="(item, ind ... »

vscode 修改标签栏样式为换行全部展示

目前vscode的标签栏是滚动式的,选择查看都不是很方便,于是想要搞成andriod studio那种换行全部展示的标签栏。 因为vscode是electron写的,因此修改css就可以实现。 修改方法 1. 安装Custom CSS and JS Loader插件 2. 添加文件/Users/zm ... »