CSS

通过CSS禁止Chrome自动为输入框添加橘黄色边框

Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的。

例如做了一个圆角框的input输入框,如果没有对边框focus时的属性做任何休息,Chrome将默认加上一个正方形的边框,无视你将input的border设为none的命令。

为了避免麻烦我们可以禁止chrome为被激活的输入框添加边框,方法如下:

1. 禁止为所有被激活的输入框添加边框
*:focus { outline: none; }

2. 禁止为被激活的输入框添加边框,例如

.class1:focus{ outline:none }

3. 也可以自定义输入框被激活时的边框样式

.changeborder:focus { outline:Blue Solid 4px;}

继续阅读通过CSS禁止Chrome自动为输入框添加橘黄色边框
读书笔记

让浮动元素父容器自适应高度的三种方法

2012-11-2更新

关于清除浮动,下面的方法虽然有效,但已经有些旧了,建议大家看这篇文章推荐的清除浮动的方法

Which method of 'clearfix' is best?

浮动元素由于脱离了文档流,无法撑起其父元素的高度,如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种:

方法中使用到的css定义

<style type="text/css">

.fl { float: left }
.cb { clear: both }

继续阅读让浮动元素父容器自适应高度的三种方法
读书笔记

什么是CSS reset

什么是CSS Reset。HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。

YUI为我们提供了一个很好的CSS reset,可以直接下载使用,这段代码很成熟,推荐大家使用。YUI的CSS reset主要做了下面几点:

继续阅读什么是CSS reset