全玉 - 博客园

2017年10月29日

摘要： 1. contenteditable属性的div的placeholder 2.没有文本的a链接显示链接 3. 伪元素生成边框渐变 4. checkbox, radio美化 5. table的th,td宽度设置无效解决方法通常是由于table-layout设置为auto(浏览器默认值)导致的，td的阅读全文

posted @ 2017-10-29 22:49 全玉阅读(129) 评论(0) 推荐(0) 编辑

保持宽高比的宽度自适应盒子

摘要：基本原理元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-botto 阅读全文

posted @ 2017-10-29 12:21 全玉阅读(919) 评论(0) 推荐(0) 编辑

css选择器位置和数量技巧

摘要： 1. 除去首个元素 2. 第1-3个元素 3. 除去第1-3个元素 4.第5-10个子元素 5.倒数第四个以及之前的元素 6. .list里面li元素个数大于等于4，则显示为红色(数量感知) 阅读全文

posted @ 2017-10-29 12:10 全玉阅读(1136) 评论(0) 推荐(0) 编辑

2017年10月27日

inline-block元素垂直对齐

摘要：多个inline-block元素使用vertical-align:middle无法对齐，必须有个height:100%的子元素才行，通常使用伪元素。另一种方法是添加line-height:normal，也能实现多个inline-block元素的对齐或inline-block容器内文本的垂直居中。例阅读全文

posted @ 2017-10-27 11:25 全玉阅读(1991) 评论(0) 推荐(0) 编辑

2017年10月24日

webpack编译vue出现dev警告

摘要： alias配置 vue < 2.1.0 vue >= 2.1.0 出处：https://stackoverflow.com/questions/41431167/webpack-compiling-vue-with-node-env-production-still-results-in-dev-w 阅读全文

posted @ 2017-10-24 10:10 全玉阅读(777) 评论(0) 推荐(0) 编辑

2017年10月22日

display:table布局总结

摘要： 1. table布局方式 2. table布局实际应用效果: 代码: 3. table布局其他应用 1. 实现两端对齐布局，使用两个table-cell，分别text-align:left和text-align:right，由于要额外套两个容器，所以不是较好的方法2. 实现等高布局，具体可以参考等阅读全文

posted @ 2017-10-22 21:04 全玉阅读(1592) 评论(0) 推荐(0) 编辑

图标文字水平对齐方法总结

摘要： 1.伪元素写图标 <span class="text"></span> .text:before{ content:url(icon); } 将图标放在伪元素里面，与文字对齐 2.flex 元素不能是inline，都是inline-block或block 3.模拟table 父元素display:t 阅读全文

posted @ 2017-10-22 16:10 全玉阅读(779) 评论(0) 推荐(0) 编辑

2017年10月21日

http长短连接和长短轮询

摘要： http长连接 http长连接是指http的请求头和响应头的均有connection: keep-alive的请求，也就是客户端和服务端均为keep-alive的请求. 实际上，http是请求/响应式的，无长短之分，长连接实际上是指TCP的连接为长连接。如此，多个http请求就可以复用一个TCP连接阅读全文

posted @ 2017-10-21 23:47 全玉阅读(210) 评论(0) 推荐(0) 编辑

DocumentFragment批量操作dom

摘要： DocumentFragment，文档片段，不属于文档树，其parentNode为null。当把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这使得DocumentFragment成了有用的占位符，暂时存放那些一次插入文档阅读全文

posted @ 2017-10-21 22:24 全玉阅读(1255) 评论(0) 推荐(0) 编辑

2017年9月29日

swiper单屏滚动

摘要： 1. 排除某些屏，不滚动 2. 按条件排除滚动，消除touchmove影响阅读全文

posted @ 2017-09-29 16:59 全玉阅读(438) 评论(0) 推荐(0) 编辑

全玉金生

公告