HTML/CSS
letMeAlone_
坚持走自己的路,不被表象所迷惑,基础才是根本,沉淀才是正道,不幸并不是我的全部,珍惜眼前
展开
-
position:fixed 父子层关系
当元素被设置成fixed的时候,会创建新的层叠上下文,设置z-index只能在当前的层级上下文做比较,而无法跨层级比较。举个例子,以下的DOM结构 伪代码<app><div fixed> <dialog fixed z-index=2002></div></app><modal fixed z-index=2001&g...原创 2019-11-15 11:26:42 · 1111 阅读 · 0 评论 -
H5 canvas无法绘制图像的原因
var c=document.getElementById("mycanvas");var cxt=c.getContext("2d");var img=new Image();img.src='img/github-icon.png';cxt.drawImage(img,0,0);w3c事例中给出的例子是以上内容,但是真正去运行的时候,发现图像并没有被原创 2016-09-26 15:43:15 · 3779 阅读 · 2 评论 -
h5+plus照片拍摄及相册选择
5+sdk封装的内容特别强大,只需要简简单单的一些代码就可以了,下面直接上代码 function captureImage(){ var cmr = plus.camera.getCamera();//获取摄像头对象 var res = cmr.supportedImageResolutions[2];//获取支持的分辨率,这里是第三个分辨率,直接使用supporten原创 2017-05-22 16:24:46 · 6031 阅读 · 0 评论 -
混合APP开发之5+API上传图片过大导致上传失败的解决方式
场景:需要拍照或从相册选取多张图片上传。遇到问题:5+API中plus.uploader管理对象完成上传功能后发现如果上传图片大于1000kb,图片上传速度减慢,图片大于2M则上传失败,但接口返回结果状态为200,也就是上传成功。现需要压缩图片上传。接口地址: https://www.html5plus.org/doc/zh_cn/uploader.html#plus.uploader.Uploa原创 2017-06-30 17:28:47 · 2602 阅读 · 0 评论 -
学习canvas
本来这个东西是早就要学得了。但是我对动画不是特别感冒,所以一直没有去学习,这两天有朋友面试,说让他做实现一个gif图的效果,让我想想怎么实现比较好,不过我不懂canvas啊,不知道性能方面怎么样,但肯定是考这个,不然没什么好考的了。于是我动手写了下,代码是比较乱的,参数都是直接复制粘贴,因为我也是一边看文档一边写就随意了。很多数学的东西也忘了,还得查一下,心累。。。,以下是自己写的两个例子,算是初学原创 2017-07-15 11:06:51 · 327 阅读 · 0 评论 -
h5 移动web拍照
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><input accept="image/*" type="file" capture="camera" name="file" accept=".gif,.jpg,.jpeg,.png"><input type="file" ac转载 2017-09-27 11:45:09 · 350 阅读 · 0 评论 -
grid布局 内容撑开网格的问题 overflow:scrool 无法看到全部内容的问题
在使用grid布局的时候发现,如果内容超过了容器,则容器会被撑大。此时,使用overflow:scrool 则可以通过滚动条看完所有内容。然而,当我们使用grid布局嵌套的时候,发现,在(子)grid布局中,使用overflow,我们无法看完整体内容。 此时我们需要在(父)grid中,加上overflow:hidden ,使得,父容器不受子容器影响。在此基础上,在子容器加上overflow:...原创 2018-08-15 11:16:16 · 9381 阅读 · 1 评论 -
iframe跨域问题解决办法
浏览器同源政策及其规避方法前端大全 4天前(给前端大全加星标,提升前端技能)作者:阮一峰http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html浏览器安全的基石是”同源政策”(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍”同源政策”的各个方面,以及如何规避它。一、概述...转载 2018-11-13 11:36:19 · 24713 阅读 · 0 评论 -
正确设置 MME类型
请求中的 response - header 中的content-type项是指�0�2�0�2服务器发送给客户端内容的MIME类型,如果 设置不对 那么浏览器怕是不能正常解析;const path = require(“path”);// 多用途Internet邮件扩展(MIME)类型const mimeType= {“.323”:“text/h323” ,“.3gp”:“video...转载 2019-03-15 10:57:02 · 2480 阅读 · 0 评论 -
关于form表单在ajax中return false仍然提交的内容
在实现form表单的时候,我们往往会有一些需求,就是对表单数据进行验证,再决定是否提交表单内容。而默认的form表单的默认事件,就是提交表单内容,那么应该如何进行判断呢?通常有两种写法,原理都一样,只是习惯不同,一种就是form的 onsubmit事件,另一种则去掉input type='submit'这个默认提交按钮,改成一个普通的button来执行提交事件(你会发现如果你改成原创 2016-09-12 21:55:54 · 5293 阅读 · 0 评论 -
XML/DTD基本用法 DTD禁用的解决方法
XML和DTD(DTD一般用于某些比较特殊而且固定的行业,使用它是为了规范和硬性规定) (XML常用于一些经常调用的常量且其值并非涉及到安全性的问题,比如游戏中很多参数,怪物的等级,属性,物品的属性等一般使用XML来定义,因为它的数据量特别大,放在数据库的话对数据库的负担较大,而且这些游戏数据只需要在开始的时候加载一次就可以了。所以更适合使用XML来完成,,而DTD文件则可以说是XML的一个模板(原创 2016-07-26 18:54:25 · 15067 阅读 · 0 评论 -
初步理解BFC
BFC overflow:hidden与clear之间的细微差别原创 2016-09-19 23:24:04 · 368 阅读 · 0 评论 -
常见浏览器兼容性问题与解决方案
本文转载自 http://blog.csdn.net/chuyuqing/article/details/37561313所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到转载 2016-07-28 21:32:50 · 339 阅读 · 0 评论 -
CSS 的优先级机制(无法覆盖bootstrap的样式)
前几天遇到了一个问题就是,我在引入bootstrap,以下简称btp。一般情况下我们知道CSS优先级是:内联》内部》外部样式,但是有一个例外就是,由于浏览器的加载和渲染顺序是由上到下的,所以加入外部样式导入在内部样式后面,则外部样式会覆盖内部样式。然而,以上的内容并不是我遇到的问题。我习惯性都会把内部样式写在head的最后,所以不存在上面所说的那种情况,而且我在原创 2016-08-15 16:08:25 · 19695 阅读 · 1 评论 -
CSS 样式水平居中和垂直居中的各种方法
该文档内容来源于慕课网水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中?如果被设置元素为文本、图片等行内元素时,水平居中是通过给父转载 2016-08-16 21:39:49 · 3650 阅读 · 0 评论 -
H5拖放事件 "Uncaught TypeError: Cannot read property 'setData' of undefined"
H5拖放事件要点有以下几个dragableondragStartondropondragoverdragable属性设置为true表面该元素允许拖动,但是默认不允许放置为此需要在最终被放置的目标地点(元素)增加ondragover事件,阻止默认处理方式,换句话也就是说允许被放置而被放置的元素 需要增加 ondrop 以及ondragover事件原创 2016-08-17 13:17:31 · 10059 阅读 · 2 评论 -
KindEditor白名单过滤和视频发布
在使用KindEditor编辑器的时候发现,自2013年开始,国家信息安全中心规定,需要对数据注入进行防范,因此KinEditor在新版本中加入了标签过滤,虽然如此,但是人们一样可以绕过编辑器进行XSS攻击。如果发现KindEditor复制内容并粘贴无法获取原有的样式,那就是其中的一些标签被过滤了,而这些标签没有在htmltag列表里面,只有在这些规定的标签才不会被过滤,而KindEd原创 2016-09-07 18:23:00 · 7353 阅读 · 0 评论 -
LESS的基本语法和使用
(该内容大部分为BOOTSTRAP官网例子,需要看原文请进入点击进入BOOTSTRAP学习LESS)LESS 和 SASSLESS是更倾向于给设计师用的,编程人员更适合用SASS,但是目前为止先不学这个,因为时间不够。LESS是CSS的一种预处理语言,其中添加了一些,变量,语法,方法,运算,类等概念用法是下载一个BOOTSTRAP中的官方LESS文件,转载 2016-07-26 18:56:24 · 9300 阅读 · 0 评论 -
CSS垂直外边距合并和CSS清除浮动
以下为文档内容:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于原创 2016-09-14 09:31:51 · 1634 阅读 · 0 评论 -
CSS HACK
转载来自CSDN freshlover的博客专栏《史上最全CSS Hack方式一览》做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器转载 2016-09-19 18:15:00 · 339 阅读 · 0 评论 -
深入理解BFC
该文章转载自:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html什么是BFC(Block formatting contexts)w3c规范中的BFC定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-capt转载 2016-09-19 21:43:35 · 1639 阅读 · 0 评论