怎么理解BFC,顺便说说清除浮动

至今还记得面试今日头条实习的时候,面试官问我如何清除浮动,我说:“……巴拉巴拉……第N种方法,可以给父元素加一个overflow:hidden触发一个BFC……“

然后面试官紧接着问我啥是BFC……其实我那个时候还不懂……

于是果断恶补一下BFC/顺便说说清除浮动的几种方式


BFC,即block formatting context,也叫块级格式化上下文,是文档里的一个渲染区域,定义了这个区域里的元素以一种什么样的方式进行排列布局,以及这个区域与临近的元素是怎样的关系。

Read More

纯css美化表单——checkbox

本文原文来自Alon’s Blog

之前一直想知道纯css怎么美化表单,修改一些type为text password这种输入形式的都还比较简单,设置下列属性可以对表单输入框进行基本的效果修改:

background  //修改表单那默认的恶心的渐变背景
broder      //修改表单那默认的恶心的边框
outline     //修改focus时的选中状态,mac下显示为一圈蓝色的线

Read More

实现响应式的简单思路

1. 自适应布局页面

这部分我觉得最重要的是要有自适应布局的意识,首先设计稿制作的时候多用栅格化设计,区块明显,比如小米和联想的商城首页(虽然这俩都没有做响应式,手机端貌似是单独的?),再比如摩托罗拉和诺基亚的首页。

然后多用float, 百分比单位,以及css3里的flex弹性布局等等。

自适应布局其实就是随着显示设备宽度的变化而让页面版式进行调整,一般就是宽度自适应调整。虽然单页面应用没做过不是很理解,但是一般做响应式就是直接自适应加媒介查询(吧?)当然诸如bootstrap也提供了栅格化的解决方案,可以让gird区块直接浮动调整。

Read More

消除inline-block两侧间距bug

其实是之前的一篇日志,最近用了hexo,慢慢同步过来~

第一次用inline-block的时候遇到了这个问题,很好奇为什么各元素之间居然还有留白,而且当时完全不知道这到底是怎么产生的。

实例图片

可以发现这五个小div本身是没有设置padding和margin的。

因为浏览器默认会把回车换行符看成一个空格,而inline-block元素虽然在同一行,但是书写的时候放在了不同行,结尾的换行就会被当成空格处理,留出5px左右的空格。

其实要解决这个问题很简单,下面总结一下我使用的方法以及网上看到的几种:

Read More

快速搭建hexo静态博客

最开始的时候很想弄个个人博客玩,但是之前在Hostinger上注册的域名太难记了,服务器也超级慢,转战github page用CNAME绑定了个人喜欢的域名。

一直想用github page推荐的jekyll做静态博客,但是苦于mac终端总是报错,只能暂时放弃了这个想法。

其实我也是偶然知道hexo的,昨晚试着做了一下,感觉还不错,主题也很多,配置起来很方便。第一次搞,看了很多资料,趁着今天有时间分享一下。因为我用的是mac air,所以我主要讲一下mac上怎么搭hexo。

Read More