01 2017 档案
ie7 总结
摘要:1 ie7 对部分属性选择器严重区分大小写 在HTML中,属性名,例如id, title之类是不区分大小写的,CSS中的选择器也应该是如此。但是IE7对属性名是严格区分大小写的! 2 关于属性选择器,IE7还有一个矫情的地方,就是部分[attr=val]的选择器,如果前面没有标签选择器或类名选择器等 阅读全文
posted @ 2017-01-20 11:31 半夏微澜ぺ 阅读(142) 评论(0) 推荐(0) 编辑
css filter
摘要:CSS 语法 提示: 使用空格分隔多个滤镜。 Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景 阅读全文
posted @ 2017-01-18 11:35 半夏微澜ぺ 阅读(182) 评论(0) 推荐(0) 编辑
input type=file
摘要:如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-data" enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencod 阅读全文
posted @ 2017-01-18 11:19 半夏微澜ぺ 阅读(228) 评论(0) 推荐(0) 编辑
css层叠上下文和层叠顺序
摘要:普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。 诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。 什么是层叠顺 阅读全文
posted @ 2017-01-18 10:33 半夏微澜ぺ 阅读(242) 评论(0) 推荐(0) 编辑
图片加载 背景色块问题
摘要:就是CSS的加载和背景图片的加载不是同步的,尤其首次加载的时候,图片是异步的,具有明显的延迟,于是,我们会看到非常丑陋的色块在一瞬间出现了; 页面渲染流程如下,1. CSS加载;2. 对应DOM渲染,背景色出现;3.拉取DOM样式对应背景图片。 图片在异步加载的(图片有北背景颜色): 一开始时候宽 阅读全文
posted @ 2017-01-13 16:29 半夏微澜ぺ 阅读(1083) 评论(0) 推荐(0) 编辑
css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation
摘要:css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图片与背景颜色之间的混合 isolation是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不 阅读全文
posted @ 2017-01-13 11:26 半夏微澜ぺ 阅读(391) 评论(0) 推荐(0) 编辑
box-shadow 模拟border
摘要:border会占据空间;如果想加边框效果,但是又不占用空间,可以使用box-shadow来模拟 demo div 100*100 border:10px solid red; 可以写: div 100*100 box-shadow:0 0 10px solid red; 加圆角 box-radius 阅读全文
posted @ 2017-01-13 10:38 半夏微澜ぺ 阅读(1060) 评论(0) 推荐(0) 编辑
zoom和transform scale
摘要:一、zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念。对于web上的zoom效果,你也可以按照此概念理解。可以改变页面上元素的尺寸,属于真实尺寸。 在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等。 其支 阅读全文
posted @ 2017-01-10 17:04 半夏微澜ぺ 阅读(386) 评论(0) 推荐(0) 编辑
border-radius
摘要:1 border-radius 私有前缀 浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius, -moz-border-radius 2 border-radius百分比值 是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/ 阅读全文
posted @ 2017-01-10 16:29 半夏微澜ぺ 阅读(279) 评论(0) 推荐(0) 编辑
中英文两端对齐实现
摘要:text-align:justify; 这个属性是针对英文设计的,现在在谷歌个火狐中对中文也支持,就是ie不支持 在ie中需要再加上一个属性 text-justify:distribute;//只有 IE支持 text-justify 属性。 阅读全文
posted @ 2017-01-10 15:42 半夏微澜ぺ 阅读(523) 评论(0) 推荐(0) 编辑
word-break word-wrap
摘要:work-break:break-all CJK超出的部分自动换行 word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前风分隔符之后的内容就换行 阅读全文
posted @ 2017-01-10 15:06 半夏微澜ぺ 阅读(149) 评论(0) 推荐(0) 编辑
h5 页面设计尺寸
摘要:请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1, 阅读全文
posted @ 2017-01-10 14:34 半夏微澜ぺ 阅读(11671) 评论(0) 推荐(0) 编辑