2018年09月__尊哥

原创遗留问题

Clip-path ： geometry-box ? Transform： ①matrix矩阵算法? ②perspective(n)？ Animation：animation-fill-mode both的实例？居中方式： “精灵元素”(ghost element)技术？ CSS变量：利用这一点，可以 debug? Grid布局：grid和inline-grid有什么区别?...

2018-09-11 10:08:11 1488

原创 ES6学习--正则的扩展

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。match()match方法的返回值是存放首次匹配内容的数组，如果没有找到匹配结果，返回null。对上述代码运行结果分析如下：（1）.match方法在有匹配结果的时候返回值是一个数组。（2）.数组第一个元素是match方法首次匹配到的子字符串，“antzone"虽然...

2018-09-19 16:22:44 296

原创 cytoscape

语法var cy = cytoscape({ // 非常常用的选项 container: undefined,//应该呈现图形的HTML DOM元素。 elements: [ /* ... */ ],//指定节点和路径数据的选项。 style: [ /* ... */ ],//指定样式的选项。 layout: { name: 'grid' /* , ... */ },//指...

2018-09-19 10:59:12 16346

原创 ES6学习--global 对象

在ES5 中，顶层对象的“本身”在各种实现里面是不统一的。比如：浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。除了window对象，Web Worker线程也无法使用document、parent这些对象。但是，Worker 线程可以使用navigator对象和location对象。更多Web Worker知识可参考：Web Worke...

2018-09-11 20:55:05 1359

原创 CSS3功能

圆角（Rounded Corner）.box_round {　　-moz-border-radius: 30px; /* FF1+ */　　-webkit-border-radius: 30px; /* Saf3+, Chrome */　　border-radius: 30px; /* Opera 10.5, IE 9 */}只要设好一个半径值就可以了。border-top-le...

2018-09-10 18:40:04 650

原创 Css3气泡框

第一步，生成基本的方框。第二步，生成圆角。第三步，制作线性渐变的效果。第四步，在容器后面添加一个空元素，并将长度和宽度都设为0。第五步，指定这个空元素为块级元素，并且四个边框之中，只显示上方的边框，其他三个边框，都设为透明。因为该元素的大小为0，所以它的每一个边框，都是一个等腰三角形。第六步，指定空元素的定位方式为absolute。然后，以容器元素的左下角为基点，将空元素水平右...

2018-09-10 14:59:33 957

原创 grid布局

重要术语Grid Container、Grid Item、Grid Line、Grid Track、Grid Cell、Grid Area 具体术语介绍内容很多可自行下载后面的文档学习：grid.docx 总的来说 Web 布局经历了以下四个阶段：　　1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局　　2、float浮动及position...

2018-09-10 14:51:15 400

原创 flex弹性布局

简介Flex 是 Flexible Box 的缩写。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display:...

2018-09-10 11:40:58 270

原创 CSS居中方式

水平居中块级元素水平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。参考实例：block-x-center.html内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline...

2018-09-07 21:37:53 214

原创 css变量

变量的声明声明变量的时候，变量名前面要加两根连词线（–）。例如： body { --foo: #7F583F; --bar: #F7EFD2;}变量不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。如果发现变量值是不合法的，则使用缺省值，例如：body...

2018-09-07 21:24:58 493

什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hac...

2018-09-07 18:54:44 321

原创 zoom和transform:scale的区别

zoom简介在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。其支持的值类型有：百分比值：zoom:50%，表示缩小到原来的一半。数值：zoom:0.5，表示缩小到原来的一半。 normal关键字：zoom:normal等同于zoom:1.区别虽然Chrome/Safari浏览器支持了zoom...

2018-09-07 17:40:49 1398 1

原创 zoom的用法

zoom在非IE浏览器中的作用 zoom在非IE浏览器中表现为支持放大或者缩小，但是由于这个属性是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来实现div 的缩放效果，现在要放大或者缩小直接用css3的transform属性。火狐浏览器不支持zoom属性。 webkit内核浏览器中支持。效果图：zoom.htmlzoom在IE浏览器中的作用通常，当浮动子元素导致父元素...

2018-09-07 17:07:09 4697

原创 CSS浮动的清除

clear清除浮动（添加空div法）：在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化，不建议使用给浮动元素父级设置高度：我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。 ...

2018-09-07 17:00:13 180

原创 BFC布局

BFC是什么BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。Block fomatting context = block-level box + Formatting ContextBox B...

2018-09-07 16:57:37 159

原创 CSS流体布局

流体特性图片宽度一直width:100%，依次点击3个按钮，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。实例：flow.html流体布局稍微做一个调整，div距离容器左侧margin 15...

2018-09-07 16:44:14 3100

原创 CSS背景图片定位

背景图片的定位方法有3种： 1）关键字：background-position: top left; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%; 上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。前两种定位，都是将背景图片左上角的原点，放置...

2018-09-07 16:39:14 7018

原创 CSS3图形绘制

直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。这里有图形绘制的效果图：BaseGraphCSS3.html，还有图形绘制的源代码：CSS3图形绘制.docx 使用CSS3还可以制作图标，可参考：CSS3制作的72个webapp图标，源代码在此处：https://github.com/JR93/css3-icon...

2018-09-07 16:36:00 339

原创 transition,transform,animation对比

transition其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。 transformtransform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。 transform属性要是加上transition的过渡特性，可谓如虎添翼。...

2018-09-04 19:39:33 741

原创 transform

transform属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform...

2018-09-03 13:30:00 2804

原创 animation

这个属性是css3里的，具体的浏览器兼容性大家可以去Can I Use里面查看。语法animation: name duration timing-function delay iteration-count direction fill-mode play-state ; 定义和用法animation 属性是一个简写属性，用于设置六个动画属性：animation-name ...

2018-09-03 13:15:17 3959

原创 transition

这个属性是css3里的，具体的浏览器兼容性大家可以去Can I Use里面查看。语法transition: property duration timing-function delay; 定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-property 规定设置过渡效果的 CSS 属性的名称。transition-...

2018-09-03 12:27:54 6006

尊哥的博客