标签归档:css

css中rem与px,pt转换

css中rem与px,pt转换

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/ … 阅读全文

css命名规范汇总css规范

命名规范 使用有意义的或通用的ID和class命名:ID和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名。反映元素的使用目的是首选;使用通用名称代表该元素不表特定意义,与其同级元素无异,通常是用于辅助命名;使用功能性或通用的名称可以更适用于文档或模版变化的情况。 /* 不推荐: 无意义 */ #yee-1901 {} /* 不推荐: 与样式相关 */ .button-green {}.clear {} /* 推荐: 特殊性 */ #gallery {}#login {}.video {} /* 推荐: 通用性 */ .aux {}.alt {} 常用命名(多记多查英 … 阅读全文

css文本超出显示省略号text-overflow语法

CSS如何使超出文本显示省略号呢,看下csstext-overflow的用法: 语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(…),而是简单的裁切。 ellipsis: 当对象内文本溢出时显示省略标记(…) 说明: 设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。对应的脚本特性为textOverflow。 text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:n … 阅读全文

css hack 各大浏览器 CSS Hack 收集

css hack 各大浏览器 CSS Hack 收集

所谓的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 如何实现div水平居中

div-css-center

使用DIV CSS 如何水平居中?很容易实现,水平居中使用  margin:0 auto;    代码如下: 居中的div必须设置宽度,达到浏览器兼容性 代码头部必须有 文档声明  “<!doctype html>” ,添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

CSS中单位px和em的区别解析

你对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

BlueprintFullWidthTabs

响应式TAB-FullWidthTabs 在PC和移动设备上的显示效果如下图,根据屏幕大小,采用不同布局来展示内容。 演示地址 http://tympanus.net/Blueprints/FullWidthTabs/ 下载地址 http://tympanus.net/Blueprints/FullWidthTabs/FullWidthTabs.zip