CSS之Display、Visibility和Opactity的区别
1\. display:none; DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素。 事件监听:无法进行DOM事件监听。点击事件无法触发,但是可以通过ref获取节点触发点击事件 性能:动态改变此属性时会引起重排,性能较差。 继承:不会被子元素继承,因为子元素也不被渲染。 transtion过渡不支持display。 2\. visibility:h...
es6箭头函数
1\. 相比普通函数,箭头函数有更加简洁的语法。 普通函数 箭头函数 2\. 箭头函数不绑定this,会捕获其所在上下文的this,作为自己的this。 这句话需要注意的是,箭头函数的外层如果有普通函数,那么箭头函数的this就是这个外层的普通函数的this,箭头函数的外层如果没有普通函数,那么箭头函数的this就是全局变量。 下面这个例子是箭头函数的外层有普通函数。 下面这个例子是箭头函数的外层没有普通函数。 3\. 箭头函数是匿名函...
scss八大特性
前言 众所周知css并不能算是一门真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言 就应运而生了。 sass是最早的css预处理语言,有比less更为...
CSS3新增了哪些新特性?
二、选择器 中新增了一些选择器,主要为如下图所示: <img width="740" height="445" src="../../ resources/e368cf20 9b5e 11eb 85f6 6fac77c0 d0230dc57a934e12b.png" class="jop noMdConv" 三、新样式 边框 新增了三个边框属性,分别是: border radius:创建圆角边框 box shadow:为元素添加阴影 b...
H5新特性有哪些?
H5拥有6种新特性 1. 语义化标签,例如header,footer,section,article等 语义化标签的作用:提升页面的阅读性(结构性增强),更有利于SEO,对于使用屏幕阅读器的人来说会更友好(有明显的语气差别,例如strong标签内的内容会重读); 2. 新增媒体元素,audio、video audio和video标签能够很容易的输出音频或视频流,提供便利的获取文件信息的API 更多详细属性参考 3.用于绘画的canvas...
什么是响应式设计?响应式设计的基本原理是什么?如何做?
简介 我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本。响应式网站的特点: 同时适配PC+平板+手机等 网站的布局会根据视口来调整模块的大小和高度 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式 一、是什么? 响应式网站设计(Responsive Web Design)是一种网络页面设计布局,页面的设计与开发...
前端工程化
div居中方法
水平居中 1.行级元素 :为该行级元素的父元素设置text align:center配合line height样式 2. 块级元素 :为其自身设置 :auto样式 垂直居中 方法一: display:table;此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. display:table cell;此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 方法二: 利用f...
js的new操作符到底做了什么
做了什么? 1、创建了一个空的js对象(即{}) 2、将空对象的原型prototype指向构造函数的原型 3、将空对象作为构造函数的上下文(改变this指向) 4、对构造函数有返回值的判断 怎么实现? 构造函数返回值的判断 一般情况下构造函数没有返回值,但是作为函数,是可以有返回值的。 那么在构造函数有返回值的情况下,new操作符做了什么? 先看两个例子: 注意一下上面两个返回值的差异 结论: 在new的时候,会对构造函数的返回值做一些...