不定宽高元素的水平垂直居中
前端开发中水平垂直居中是绕不开的坎，尤其是宽高不定的元素，之前听说过总总办法，由于自己懒，也没一一去试，今天就做一个总结。 PS：纯CSS实现，布局的问题不应试交给JavaScript(除非某些破不得已的情况)。 预期结果 HTML代码 <div class="panel"> <div class="box"></div> </div> Flex 方法 .panel { width: 600px; height: 400px; background: red; display: flex; justify-content: center; align-items: center; } .box { width: 83%; height: 79%; background:green; } Flex 是最简单的实现方法，由于目前通常是移动开发，这也是我的首选的方法。关于 Flex 布局可以参考：Flex 布局教程 margin: auto 方法 .panel { width: 500px; height: 400px; background: red; position: relative; } .box { width: 76%; height: 79%; background: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 这算是 css 的一个奇技淫巧，非移动端开发下首选。 继续阅读使用 Less 替换 wxss 开发微信小程序
微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。 思路 启用一个 gulp 任务，在文件更新的时候自动将 .less 文件编译成 .wxss 文件。 主要用到了 2 个 gulp 插件，gulp-less 和 gulp-rename。前者用来编译 Less 文件，后者用来将编译出来的 css 文件重命名为 .wxss。 实现 代码： var lessPath = ['./app/**/**/*.less', './app/**/*.less']; /** * 本地监视less的文件 */ gulp.task('less', function () { return gulp.src(lessPath) .pipe($.plumber()) .pipe($.less()) .pipe($.rename(function (path) { path.extname = '.wxss'; })) .pipe(gulp.dest('./app')); }); // 静态服务器 gulp.task('style', function () { gulp.watch(lessPath, ['less']); }); 使用 开发前运行 gulp style，剩下的事情就是写 Less 了，再不也用管什么 wxss 了。CSS3 first-child not work
For some reason, I tried to use CSS3 selector :first-child, but it not works in my project.
关于CSS中box-sizing属性的一点心得
最近需要写这样一个布局：一个父元素，里面有两个子元素，两个子元素的宽度为父元素的一半。这在CSS中倒是一个很简单的问题，所以很容易就有如下代码。
<style type="text/css">
*{
padding : 0;
margin : 0;
}
#outer{
width : 600px;
height : 300px;
background : red;
color : white;
}
#outer:after{
content : "";
clear : both;
}
#in1{
width : 50%;
height : 80%;
float : left;
background : blue;
}
#in2{
width : 50%;
height : 80%;
float : right;
background : green;
}
</style>
<div id="outer">
<div id="in1">
IN1
</div>
<div id="in2">
IN2
</div>
</div>
高度不定CSS设置img充满div的解决方案（img标签3px问题）
使用CSS布局的进个遇到这样一个问题：设置一个固定宽和高的div，里面放置一张图片，使图片的宽度和高度与父级的div保持一致。
看起来是一个很简单的问题啊，有什么难的？
继续阅读