随笔分类 - html+css+svg
记录样式与布局问题
摘要：这个插件主要配合打包自动添加css浏览器兼容前缀，比如-webkit-、-ms-等。官网：https://github.com/postcss/autoprefixer 这是PostCSS的插件，根据官网，配置参数有两种方式 引用的时候作为参数传递 在.browserslistrc文件或者packa
阅读全文
摘要：svg的样式权重 svg可以设置id/tag/style/class属性，再加上标签本身也有自己的原生样式属性，比如“stroke-width”等；再加上继承来的属性。所以权重如下 style属性 > id属性 > class属性 > tag属性 > 原生属性 > 继承属性 每一层的权重都是不可跨越
阅读全文
摘要：HTML HTML 中的预留字符必须被替换为字符实体。http://www.w3school.com.cn/html/html_entities.asp <：<或< 理：理或理 财：财或财 JS ascii编码表http://as
阅读全文
摘要：css中的font-family 你见过的css字体设置中有的有双引号，有的没有。你真的了解什么时候加上双引号么？ // 合法的 font-family: NotoSansHans-Regular, Helvetica, "Microsoft YaHei",微软 雅黑,"雅黑", sans-seri
阅读全文
摘要：网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器） 实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 ● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Micro
阅读全文
摘要：先看一下标准定义的浏览器渲染过程（网上找的）： 浏览器打开网页的过程 用户第一次访问网址，浏览器向服务器发出请求，服务器返回html文件； 浏览器开始载入html代码，发现 head 标签内有一个 link 标签引用外部CSS或JS文件； 浏览器又发出CSS及JS文件的请求，服务器返回这个CSS，J
阅读全文
摘要：图片预加载有大体有几种方式 1.html标签或css加载图片。 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。 2.纯js实现预加载 空城
阅读全文
摘要：本文前面部分转自木-叶的博文，后面有本人自己的一些总结和体会。 如果有人问你，GET和POST，有什么区别？你会如何回答？ 我的经历 前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。 这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名
阅读全文
摘要：先说一说两者之间的异同 两者都可以引用外部CSS的方式，现在主流浏览器两者都支持（ps:@import是CSS2.1提出的），但是存在一定的区别： 1.link是XHTML标签，除了加载CSS外，还可以定义其他事务；@import属于CSS范畴，只能下载CSS也只能在css代码里面使用。 link标
阅读全文
摘要：转自共享圈的使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。其中本人不认同的地方有做小修改 注：HTML5不再支持使用frame，iframe只有src 属性一、使用iframe的优缺点优点: 1.程序调入静态页面比较方便; 2.页面和程序分离;缺点： 1.ifr
阅读全文
摘要：首先要说明的是背景是内容的祖先元素。如果是兄弟节点那就没有必要记录这篇文章了。 记录一下，知其然也知其所以然。 IE8-特点： 1.不支持"opcity:0.5;"这种写法，只支持"filter:alpha(opacity=50)"。 2.如果背景元素拥有css属性设置了z-index的值（除默认值
阅读全文
摘要：项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单 图片查看器主要有几个功能： 1.显示图片和图片信息（图片名称、发布者等等） 2.切
阅读全文
摘要：在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt，但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。 主要有两类弹出框alert和confirm。基于jQuery alert([title,]des[,callback]): title: 弹出框标题，string类
阅读全文
摘要：本文想说的警惕点与浏览器兼容无关，主要是几个本人在项目中遇到的几个小问题的总结，问题虽小，但是却有时很困扰人，在此记录一下，如果后期有此类问题会持续添加到这里。 1.内联标签之间的空格 正常情况下书写html代码的时候都有换行、缩进等习惯，比如 <head> <meta charset="utf-8
阅读全文
摘要：紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题 1.tab标签需要和显示的iframe一一对应，当点击到某个tab页签的时候需要切换到对应的iframe。 2.需要有新增、删除页签的ta
阅读全文
摘要：IE的每次跟新都会有一些奇葩的bug，我们默默承受了。 这个问题在项目中出现困扰了我近一个星期，这里记录一下。看下面实例 <style> .panel{ width: 200px; overflow: auto; background-color: #f00; } .inner{ width: 25
阅读全文
摘要：在分析jQuery的事件的时候有提到绑定事件的方式： Dean Edwards的跨浏览器事件绑定使用的方式是 element["on" + type] = handleEvent; 即绑定的事件的前提条件是element.onxxx属性必须存在。 jQuery的绑定方式是使用浏览器的绑定绑定方法 i
阅读全文
摘要：起因： 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理。别的浏览器都正常；但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条。如图 然后本人做实验找了半天原因终于是找到了，是IE浏览器使用百分比计算宽度值不是整数值引起的。 实例1：使用百分比计算结果是整数的情况下显示
阅读全文
摘要：所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 当前所知的脱离文档流的方式有两种：浮动和定位。 a.定位属性positon 先看一下定位。看一段对
阅读全文
摘要：首先说明本人所理解的这几个元素的计算 window高度应当是文档所在窗口的可视高度（没有包括浏览器的滚动条），计算方法document.documentElement.clientHeight document高度应该为文档内容的高度，计算方法Math.max(document.body[ "scr
阅读全文
浙公网安备 33010602011771号