CSS - 随笔分类 - vsmart

有关去掉谷歌及火狐浏览器文本框数字类型上下箭头的方法

摘要：在chrome下： input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } Firefox下： input[type="n 阅读全文

posted @ 2018-02-02 10:08 vsmart 阅读(289) 评论(0) 推荐(0)

解决IOS下 input 只有底部边框时，出现四周虚线框的问题

摘要：b border-radius:0; 阅读全文

posted @ 2017-07-25 10:40 vsmart 阅读(1446) 评论(0) 推荐(0)

常用less变量定义

摘要：@bgfff:#fff;.bg(@color){background:@color;}.color(@color){color:@color;}.bgf{background:#fff;}.col333{color:#333}.cof{color:#fff}.col666{color:#666}.c 阅读全文

posted @ 2017-06-28 15:56 vsmart 阅读(1228) 评论(0) 推荐(0)

解决各浏览器不支持display:flex的最简单办法

摘要：通常我们想让一行元素平均分配宽度，而且还是可以扩展自适应的；不管元素个数多少；那么我们通常不考虑IE9以下及其它个别浏览器的时候父级用 display:flex；子级用 flex: 1; 但有时产品要求兼容各浏览器及IE8/9;我们不得不想尽各种办法，包括JS/JS插件等但大家都忽阅读全文

posted @ 2017-06-13 14:41 vsmart 阅读(11182) 评论(0) 推荐(0)

解决英文字符或数字不换行的问题

摘要：1.width : ... 2.word-break:break-all; 3.word-wrap: break-word; 阅读全文

posted @ 2017-05-25 11:48 vsmart 阅读(207) 评论(0) 推荐(0)

CSS3 盒模型

摘要：1，弹性核模型新版父级display:flex; // 水平方向 flex-direction:row; // 竖直方向 flex-direction:colunm; flex-direction: row-reverse; flex-direction: column-reverse; di 阅读全文

posted @ 2017-05-12 16:22 vsmart 阅读(159) 评论(0) 推荐(0)

CSS强制英文、中文换行与不换行强制英文换行

摘要：1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用，强制换行 4. white-space:nowrap; 强制不换阅读全文

posted @ 2017-05-12 16:16 vsmart 阅读(127) 评论(0) 推荐(0)

CSS3 文字反序排版

摘要：direction:rtl;unicode-bidi: bidi-override; 阅读全文

posted @ 2017-04-26 16:36 vsmart 阅读(242) 评论(0) 推荐(0)

弹性盒模型

摘要：1，弹性核模型新版父级display:flex; // 水平方向 flex-direction:row; // 竖直方向 flex-direction:colunm; flex-direction: row-reverse; flex-direction: column-reverse; di 阅读全文

posted @ 2017-04-10 11:28 vsmart 阅读(191) 评论(0) 推荐(0)

移动端去除鼠标点击时的外轮廓

摘要：a{ border:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; outline:none； } 阅读全文

posted @ 2017-04-07 16:48 vsmart 阅读(165) 评论(0) 推荐(0)

H5 项目常见问题汇总及解决方案

摘要：H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面空白页基本meta标签空白页基本meta标签其他meta标签其他meta标签常见问题：移动端如何定义字体font-family 移动端如何阅读全文

posted @ 2017-03-31 10:53 vsmart 阅读(573) 评论(0) 推荐(0)

如何让你的网页打开速度降低到 1s 内

摘要：还记得图片延迟加载方案那篇博文吗？当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景，也介绍了他们的应对方案，还做了一点技术选型的工作。经过一段时间的项目实践，在先前方案的基础上又做了很多深入的优化工作。最终将好奇心日报的网页打开速度将降低到了1s内，Web端和Mobile端加载3 阅读全文

posted @ 2017-01-22 10:26 vsmart 阅读(675) 评论(0) 推荐(0)

css如何让浮动元素水平居中

摘要：对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。方法一： 1、HTML 部分： <div class="box"> <p 阅读全文

posted @ 2017-01-22 10:21 vsmart 阅读(1760) 评论(0) 推荐(0)

CSS超出省略号

摘要：单行省略号：display:block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行省略号： display: -webkit-box; -webkit-box-orient: vertical; -webkit-l 阅读全文

posted @ 2017-01-17 13:51 vsmart 阅读(279) 评论(0) 推荐(0)

随笔分类 - CSS