- 博客(275)
- 收藏
- 关注
RSS订阅原创 haslayout详解
定义 haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素注意：通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况HTML标签默认触发hasLayout的有如下HTML标签：【1】html,body...
2020-01-20 12:52:03
519
原创 理解CSS视觉格式化
CSS视觉格式化这个词可能比较陌生，但说起盒模型可能就恍然大悟了。实际上，盒模型只是CSS视觉格式化的一部分。视觉格式化分为块级和行内两种处理方式。理解视觉格式化，可以确定得到的效果是应该显示的正确效果，还是浏览器兼容性的bug。下面将详细介绍CSS视觉格式化术语解释了解CSS视觉格式化之前要先了解一些基本术语。而下面所有的术语中，最重要的就是基本框和包含块【基本框】CSS假定每个元素都会...
2020-01-19 21:59:54
476
原创 CSS布局中的BFC
定义在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting con...
2020-01-19 21:59:52
388
原创 深入理解网页布局中的display属性
display属性在网页布局中非常常见，但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值，本文将详细介绍display属性的各个方面定义display属性用于规定元素生成的框类型，影响显示方式值: none | inline | block | inline-block | list-item | run-in | table | inline-...
2020-01-19 21:59:49
2535
原创 CSS兼容性详解
对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height...
2020-01-19 21:59:45
487
原创 CSS Hack实现浏览器样式兼容的兜底办法
CSS Hack是实现浏览器样式兼容的兜底办法，能不用就尽量不要使用。但是，针对一些浏览器的bug，比如老版本IE的bug，有时使用CSS Hack是不得已而为之的做法。本文将详细介绍CSS Hack。CSS Hack主要分为属性标记法和选择器前缀法两种属性标记法【IE6-】对于IE6-浏览器主要使用下划线_和中划线-这两种字符_color:blue;-color:blue;【IE...
2020-01-19 18:24:55
475
原创 深入理解CSS计数器
我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器。创建计数器 创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。counter-resetcounter-reset:none;(默认)counter-reset:<identifier><integer>//<identifier>是计数器标识符，是创作人员自己...
2020-01-19 18:24:53
260
原创 深入理解CSS伪类
伪类经常与伪元素混淆，[伪元素]的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识锚点关于锚点<a>，有常见的5个伪类，分别是:link、:hover、:active、:focus、:visiteda:link{backg...
2020-01-19 18:24:48
254
原创 深入理解CSS伪元素
定义伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection用法:first-letter指定一个元素第一个字母的样式注意1：所有前导标点符号应与第一个字母一同应用该样式注意2：只能...
2020-01-19 18:24:45
242
原创 CSS属性速查表
本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类，对CSS常用属性进行重新排列，并最终设置为一份stylelintrc文件布局类1、定位positionz-indextopbottomleftright2、浮动floatclear3、多列布局columnscolumns-widthcolumns-countcolumn-rulecolum...
2020-01-19 18:24:42
198
原创 CSS 细节难点综合
对于CSS，要知其然，还要知其所以然。本文将介绍CSS各部分出现的原因，仅限个人理解，如有不妥，欢迎交流Why CSS早期的大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。于是1995年，W3C发布了CSS草案，试图解决结构与样式混杂的问题1、如果考虑结构与样式彻底分离，且样式表可能用于多个HTML文件，使用[外部样式...
2020-01-18 19:29:36
422
原创 CSS默认可继承样式
一直想总结出一份可继承样式的列表。常听说，颜色和字体是可继承的，盒模型样式是不可继承的，但其他样式呢？本文内容包括所有可继承的样式常用可继承样式colorcursordirectionfontletter-spacingline-heightlist-styletext-aligntext-indenttext-shadowtext-transformwhite-spac...
2020-01-18 19:29:33
221
原创 CSS变量variable
一直以来，CSS中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。新的草案发布之后，直接在 CSS 中定义和使用变量不再是幻想了。本文将详细介绍CSS变量variable基本用法CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问兼容性：移动端和IE浏览器不兼容【...
2020-01-18 19:29:33
526
原创 红包效果实现
效果(网络问题上传不了gif动态图片)CSS.zh-chb-main{position: relative;margin: 0.3rem 0.3rem 0;}.zh-chb-main .zh-center{position: absolute;z-index: 2;left: 50%; top: 1.2rem;width: 3.6rem;height: 2.4rem;margin-lef...
2020-01-18 17:52:18
1319
原创 放大镜效果
效果：HTML：<div class="zh-content zh-scrollbar"> <img class="zh-plane-profile" src="" alt=""></div>CSS:.zh-content{position: relative;}.zh-plane-profile{position: absolute;z...
2020-01-18 17:52:11
184
原创 简单的图片轮播
效果：功能：1、左右箭头切换2、状态控制点切换3、鼠标悬念4、自动轮播HTML：<div class="zh-carousel"> <div class="zh-img-list"> <ul> <li> <a href="###"> ...
2020-01-18 17:52:03
599
原创 css3 实现大转盘
效果完整代码<!DOCTYPE html><html lang="CN"><head> <meta charset="UTF-8"> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" />...
2020-01-18 17:51:55
974
原创 threejs 绘制地球、飞机、轨迹
首先我们来看下要实现的效果这个缩小后的图片，下面我们来看下近距离的动态效果。。效果比较简陋，需要后期再处理。。。下面进入主题，代码篇。。HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全球航班</t...
2020-01-18 17:51:38
1683
原创 理解CSS中的数学表达式calc()
数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容定义 数学表达式calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4...
2020-01-17 21:59:56
3274
原创 CSS样式关键字initial、inherit、unset、revert和all
在CSS中，有4个关键字理论上可以应用于任何的CSS属性，它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。而all的取值只能是以上这4个关键字。本文将介绍initial、inherit、unset、revert和allinitial表示元素属性的初始默认值(该默认值由官方CSS规范定义)兼容性: IE不支持//display在官方CSS规范...
2020-01-17 21:59:48
1039
原创 CSS层叠
层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序，由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠特殊性选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如：0,0,0,0)。下面来介绍不同的选择器的特殊性值1、内联样式 -> 1,0,0,02、ID属性值 -> 0,1,0,...
2020-01-17 21:59:43
146
原创 深入理解CSS中的长度单位 CSS 语法
本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识绝对长度单位绝对长度单位代表一个物理测量像素px(pixels)在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们被按照像素处理英寸in(inches)1in = 2.54cm = 96px厘米cm(centimeters)1cm = 10mm = 96px/2.54 = 37.8px...
2020-01-17 21:59:43
265
原创 CSS选择器
CSS的一个核心特性是能向文档中的一组元素类型应用某些规则，本文将详细介绍CSS选择器通配选择器星号*代表通配选择器，可以与任何元素匹配*{color: red;}元素选择器文档的元素是最基本的选择器html{color: black;}p{color: gray;}h2{color: silver;} 类选择器类选择器用于选择一类元素.div{color: r...
2020-01-17 21:59:40
141
原创 引入CSS
Web早期，HTML是一种很有限的语言，这种语言不关心外观，它只是一种简洁的小型标记机制。随着Mosaic网页浏览器的出现，网站开始到处涌现。对于页面改变外观的需求增加，于是增加了类似<font>和<big>之类的标记元素。几年之后，大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。于是1995年，W3...
2020-01-17 13:13:44
126
原创 CSS选择器
CSS的一个核心特性是能向文档中的一组元素类型应用某些规则，本文将详细介绍CSS选择器通配选择器星号*代表通配选择器，可以与任何元素匹配*{color: red;}元素选择器文档的元素是最基本的选择器html{color: black;}p{color: gray;}h2{color: silver;} 类选择器类选择器用于选择一类元素.div{color: r...
2020-01-17 13:13:43
146
原创 CSS选择器的新用法
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法变量一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示// 颜色定义规范$color-ba...
2020-01-16 21:59:52
151
原创 CSS知识体系-入门篇
CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语...
2020-01-16 21:59:48
239
原创 HTML表单美化
由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】body{ margin: 0; font: 16px/20px "宋体";}.box{ width: 500px; height: 100px; line-hei...
2020-01-16 21:59:40
1852
原创 HTML表单控件
input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件传统控件button 定义一个按钮select 定义一个下拉列表option ...
2020-01-15 21:59:52
1592
原创 了解HTML表单之form元素
表单是网页与用户的交互工具，由一个元素作为容器构成，封装其他任何数量的表单控件，还有其他任何<body>元素里可用的标签表单能够包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表单控件元素注意：表单里嵌套表单是不允许的form元素form元素...
2020-01-15 21:59:43
974
原创 input元素的23种type类型
随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、tim...
2020-01-15 21:59:43
5899
原创 使用余弦定理制作磁盘形状h5音乐播放器
功能实现1、歌曲播放进度转换成视觉的旋转角度2、点击磁盘任意位置歌曲跳转到相应进度效果展示原理说明【1】旋转原理[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ICgHP287-1579094963730)(https://upload-images.jianshu.io/upload_images/20806814-39738ed2a34f54b2.g...
2020-01-15 21:59:40
988
原创 HTML中的audio和video
HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>，且不被IE8-浏览器支持以视频文件举例，它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等)HTML元素使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，...
2020-01-15 21:59:39
1140
原创 最常用的表单控件input元素的30个元素属性
form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性autocomplete、autofocus、form、formaction、formenctype、formm...
2020-01-15 21:59:38
4537
原创 零基础想成为一名专业的web前端开发程序员，需要学习什么？
你有没有看过你非常喜欢的网站，是否研究过它的布局方式，有没有想过我自己能不能也能实现一个，甚至比你看的网站更好！所有这些可见的站点界面和特效都是通过前端开发构建的（有时也称为“前端Web开发”）。前端开发人员是一些最受欢迎的角色，目前各大知名互联网公司的前端开发人员的工资水平甚至超过了后端开发人员**那前端开发需要学什么呢？**本篇将分解前端开发人员使用和需要的所有技能，先从前端开发的定义开...
2020-01-14 16:35:55
364
原创 web前端进阶学习Node.js，你需要掌握什么基础？
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境，一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。那么学习nodejs需要什么基础？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。学习nodejs需要什么基础？1、熟悉JavaScript...
2020-01-14 15:33:25
789
原创 web前端入门必学的16个知识点
1、HTML常用标签语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接（a标签）、Img图片标签2、盒子模型初探Div盒子模型 、css样式、 简单css样式、盒子模型Border边框讲解、盒子模型外边距 盒子模型内边距、盒子模型占位计算、ul无序列表、ol有序列表、dl定义列表、补充知识（css）3、样式初始化及display+外边距合并...
2020-01-14 15:33:01
272
原创 DOM操作表格
表格table元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。本文将详细介绍DOM操作表格的属性和方法需求 要通过DOM实现下列格式的表格结构<table border = "1" width = "100%"> <tbody&g...
2020-01-13 22:00:01
227
原创 深入理解HTML表格
在CSS出现之前，table元素常常用来布局。这种做法在HTML4之后不再推荐使用。而现在有些矫枉过正，使用table展示数据都可能会被说不规范。本文将详细介绍HTML表格tabletable【默认样式】//IE7-浏览器不支持border-spacingtable{ border-collapse: separate; border-spacing: 2px; border:...
2020-01-13 21:59:56
215
原创 HTML音频和视频
多媒体元素(比如视频和音频)存储于媒体文件中，确定媒体类型的最常用的方法是查看文件扩展名。如.swf、.wmv、.mp3、.mp4媒体格式音频格式.mid/.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MID...
2020-01-13 21:59:56
971
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人