rem是css3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 例如：当前根元素html的font-size为100%，那么根据下边的参照表可以看出，其px值为16，那么我们如果要转换一个块元素的px为rem，就可以有以下写法 注：1000为需要转换元素块的宽度 1000除以16值为62.5rem http://blog.csdn.net/xudanna/article/ … 阅读全文
命名规范 使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 /* 不推荐: 无意义 */ #yee-1901 {} /* 不推荐: 与样式相关 */ .button-green {}.clear {} /* 推荐: 特殊性 */ #gallery {}#login {}.video {} /* 推荐: 通用性 */ .aux {}.alt {} 常用命名（多记多查英 … 阅读全文
CSS如何使超出文本显示省略号呢，看下csstext-overflow的用法： 语法： text-overflow ： clip | ellipsis 取值： clip： 不显示省略标记（…），而是简单的裁切。 ellipsis： 当对象内文本溢出时显示省略标记（…） 说明： 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。对应的脚本特性为textOverflow。 text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:n … 阅读全文
所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。 Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefox) *>.selector { property: value; } Webkit 内核浏览器 @media screen and (-webkit-min-device-pixel-ratio: 0) { Selecto … 阅读全文
使用DIV CSS 如何水平居中？很容易实现，水平居中使用 margin:0 auto; 代码如下： 居中的div必须设置宽度，达到浏览器兼容性 代码头部必须有 文档声明 “<!doctype html>” ，添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
你对CSS中单位px和em的区别是否了解，这里和大家分享一下，px像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的；而em也是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 彻底弄懂CSS中单位px和em的区别 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em，那么两者有什么区别，又各自有什么优劣呢？ 1.IE无法调整那些使用px作为单位的字体大小； 2.国外的大部分网站能够调整的原因在于其使用了em作为字体单位； 3.Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或 … 阅读全文
响应式TAB-FullWidthTabs 在PC和移动设备上的显示效果如下图，根据屏幕大小，采用不同布局来展示内容。 演示地址 http://tympanus.net/Blueprints/FullWidthTabs/ 下载地址 http://tympanus.net/Blueprints/FullWidthTabs/FullWidthTabs.zip