p==q的个人专栏

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主
阅读更多

理解JavaScript的var, let和const使用与作用域

在JavaScript里,var,let和const都可以用来声明变量的。var username= '张三'; let gender = 'Male'; const age = 20;let,var和const的使用let和var可以在声明后更改它们的值,并且在声明时不赋值,JavaScript会自动以默认值对它们做初始化。const声明的变量不能改变,也即是常量,声明变量时必须赋值。var u
阅读更多

CSS去除和修改input[type=search]后面的小x样式

默认情况下input[type=search],当有输入时,在输入框后会有一个”x“,用于快速清除输入的内容。但有时样式和页面不搭配,需要删除或者修改样式。删除webkit-search-cancel-buttoninput[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }修改webkit-
阅读更多

原生JavaScript检测元素是否获得焦点

要检测元素是否在 JavaScript 中有焦点,可以使用document对象的只读属性 activeElement。const elem = document.activeElement;activeElement 返回document当前获得焦点的元素。示例:使用 activeElement 属性检查class为.user 的 <input> 元素是否有焦点:const elem
阅读更多

微前端架构【译】

作者:Muhammad Anser来自🇵🇰的软件工程师,作家,演讲者和喜欢编写技术的技术极客。 在深入研究微前端技术之前,我们必须了解什么是微服务架构,因为微前端的概念隐约受到微服务的启发并以微服务命名。根据官方文档,微服务(也称为微服务架构)是一种架构风格,它将应用程序构建为一组服务,这些服务是:高度可维护和可测试松散耦合可独立部署围绕业务能力进行组织小团队微服务架构支持快速、频繁
阅读更多

移动端头部meta大全

移动端head的meata大全:<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 -->
阅读更多

JavaScript定义使用类和对象Object的方法

在JavaScript里定义Object有三种方式:对象常量,使用object的构造器定义,以及使用class定义。方式一、对象常量使用对象常量的方式是很直接的,直接在定义对象的属性及方法即可,如下:const bird = { name: 'Joe', numWings: 2, numLegs: 2, numHeads: 1, fly(){}, chirp(){}, eat(){}
阅读更多

一段简单的css debugger代码

在做前端开发常常需要给元素添加一些轮廓来debug页面元素的布局,在github上看到一段很简单的js代码,它结合了css,给元素添加轮廓,以便对css,html页面观察dom元素的布局。完整代码如下:/* debug.css | MIT License | zaydek.github.com/debug.css */if (!("is_debugging" in window)) { is
阅读更多

JavaScript查找第一个内容为空的html元素

使用jQuery的:empty选择器很简单就实现:$("p:empty:first").text("hello world");也可以写成:$("p:empty").first().text('hello world');
阅读更多

Chrome编程式卸载注册的Service Worker

if(window.navigator && navigator.serviceWorker) { navigator.serviceWorker.getRegistrations() .then(function(registrations) { for(let registration of registrations) { registration.unr
阅读更多

CSS3使用transition属性实现过渡效果

属性详解transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:transition-property:设置应用过渡的CSS属性,如background。transition-duration:设置过渡效果花费的时间。默认是 0。transition-timing-function:设置过渡效果的时间曲线。默认是
阅读更多

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 
阅读更多

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 
阅读更多

Html5使用localStorage存储对象数据

Html5可使用localStorage存储数据,其方法为storage.setItem(keyName, keyValue); 其中:keyName:键,字符串类型keyValue:值,字符串类型关于setItem,可以参考:Storage.setItem()。如果需要存储对象数据,那么需要把对象数据使用JSON.stringify转换为字符串。localStorage.setItem
阅读更多

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si
阅读更多

webpack编译打包scss

依赖webpack编译scss需要用到这几个loader:style-loader,css-loader,postcss-loader,sass-loader以及插件:extract-text-webpack-plugin安装相关loader和插件:npm install style-loader css-loader postcss-loader 
阅读更多

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它
阅读更多
X

欢迎加群学习交流

联系我们