- 博客(7)
- 收藏
- 关注
原创 scoped与/deep/
当<style>标签有scoped属性时,它的 CSS 只作用于当前组件中的元素。使用scoped后,父组件的样式将不会渗透到子组件中。你可以在一个组件中同时使用有作用域和无作用域的样式:<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>...
2019-12-11 15:01:55 554
原创 Javascript语法for和for-in的比较
我今天在学习js原型继承的时候发现了一个有趣的现象。一开始我打算给Array实现一个打印所有元素的方法,以下代码即可实现。Array.prototype.printArr = function(){ for(var i=0; i<this.length; i++){ console.log(this[i]); }}var arr = [1,2,1,2];arr.p...
2018-09-16 11:19:20 242
原创 CSS3转换属性(transform)3D及动画属性(animation)入门——旋转立方体示例
这次我们来实现这样一个绕中轴旋转的立方体:点击预览相对之前的2D转换,这次的坐标轴还用到了z轴。为了便于理解,首先来看一下浏览器的坐标轴:效果:https://codepen.io/hellozpf/pen/ejxVNZ(待完成...)...
2018-08-16 10:53:37 1878
原创 CSS3转换属性(transform)2D入门——卡片翻转示例
通过 CSS3 转换,我们能够对元素进行移动(translate)、缩放(scale)、转动(rotate)、倾斜(skew)。要实现这些转换,只要使用两个属性:transform和transform-origin。接下来我们会使用transform属性对这个小方块进行各种转换:div { width: 100px; height: 100px; backgr...
2018-08-10 15:01:31 872
原创 CSS3过渡属性(transition)入门——菜单下划线示例
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。属性的改变默认是没有过渡效果的,通过添加transition属性我们可以:设置过渡时长; 调整过渡速度。下面我将为这个下划线的width添加过渡属性,当下次这个width改变时,将会出现一个过渡效果。#line { margin: 1...
2018-08-10 10:27:36 1725
原创 JavaScript数组常用操作
在JavaScript中,对数组的操作是最常用的操作之一,下面从操作目的角度(增删改查等)介绍一下JS中数组的操作。目录创建增(push()、unshift()、concat())删(pop()、shift()、splice())改(splice())查(indexOf()、lastIndexOf()、slice())翻转(reverse())排序(sort())...
2018-08-06 15:55:54 242
原创 父子元素的margin塌陷问题
首先定义初始网页,设置元素高度和背景颜色:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子元素的margin塌陷问题</title> <style>
2018-05-22 22:01:45 1617
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人