随笔分类 - CSS3
摘要：用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';
阅读全文
摘要：为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 1.安装 2.在当前webpack.base.conf.js目录新建一个postcss.config.js文件 这就是对postCSS一个简单的配置，引入了au
阅读全文
摘要：1、Line-height 适用情景：单行文字垂直居中技巧 这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求了。 2、Lin
阅读全文
摘要：通常情况下设置完overflow：scroll之后，就会在页面中出现滚动条，下边的方法可以取消掉此滚动条： container为当前设置overflow:scroll的元素 1、使用以下CSS可以隐藏滚动条： 但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome 2、为了兼容其他的浏览器
阅读全文
摘要：最近在网上看到很多代码都通过引入animate.css来实现动画效果，后来我便使用这种方法来尝试着写了个小案例，结果真的很好用，比我们通常情况下使用css或js实现动画效果好得多，便在此做个总结。 第一步，便是下载相关的animate.css文件，方法有三种： 1.从官网下载： https://ra
阅读全文
摘要：这几天在做项目中用到了flex布局，但是在测试的过程中发现他的兼容性实在是太差了，仅仅用到水平和垂直居中的样式，没想到兼容性代码就写了好几行。 display：flex; justify-content：center; align-items:center; 此结论都来源于百度，资料网址为 http
阅读全文
摘要：这几天在做项目的时候，遇到了比较棘手的问题，便是在一个标签里边展示内容，如果说展示中文汉字，一点问题都没有，但是只要连续展示英文字母或者中文的标点符号（中间不带空格），那么所渲染的内容就不会换行，而是超出标签来显示，如下图： 为了解决让所有的内容都不超出标签的宽度，超出后自动换行的问题，便找到了wo
阅读全文
摘要：据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一总结： 方法一：常用方法，css媒体查询 对于这
阅读全文
