CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-（现在基本都没有用了，被-webkit-取代） 举例来说，一个CSS3圆角的代码是： -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; CSS3前缀+标准代码的顺序 既然CSS3代码中（暂时）需要写上这么多前缀，那么他们的顺序是如何的呢？ 结论:是 … 阅读全文
jQuery如何获取元素的属性值的内容呢，一起看下例子： 下面的例子获取div中 style 属性的内容。
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 word-wrap强制文本换行方法， 使用word-wrap属性。在默认情况下，如果文本的内容超过某个div块的宽度的话，就会发生自动换行，因为div块的white-space属性的默认值是normal。但是也有两种情况： 1、如果div块里是一串的文字内容，那么到了div块的width限制时，会自动换行。 2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了，而是直接溢出div块。这时就要考虑css文字强制换行了。 那CSS样式怎么控制文字的强制换行？ 这时候我们需要用到word-wrap属性，还有一个属性word-break也能够解决换行问题，但是它的浏览器兼容性不好， … 阅读全文
命名规范 使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 /* 不推荐: 无意义 */ #yee-1901 {} /* 不推荐: 与样式相关 */ .button-green {}.clear {} /* 推荐: 特殊性 */ #gallery {}#login {}.video {} /* 推荐: 通用性 */ .aux {}.alt {} 常用命名（多记多查英 … 阅读全文
请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！ 推荐使用下面的：
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 … 阅读全文
无论浏览器窗口的大小还是在手机屏幕上如何做到图片自适应自动缩放呢，只需要一行CSS代码： img { max-width: 100%;} /*针对图片*/ object { max-width: 100%;} /*针对视频*/ img, object { max-width: 100%;} /*针对图片和视频*/ 可以通过本站看一下图片缩放效果。如：http://zhoumo123.cn/category/web
最常用的选择器类型是标签选择器。标签选择器可用来寻找特定类型的元素，如段落、超链接或标题元素，只需指定希望应用样式的元素的名称。标签选择器有时候也称为元素选择器或简单选择器。 例如，下面3个样式分别定义段落字体颜色为黑色，超链接显示为下划线，一级标题显示为粗体效果。 p{ color:black;} a{ text-decoration:underline;} h1{ font-weight:bold;} 使用标签选择器时，应该考虑该类型选择器的优缺点。 优点：能够快速为页面中同类型的标签统一样式。 缺点：不能设计差异化样式，有时候会相互干扰。 例如，如果在网页样式表中定义如下样 … 阅读全文
通用选择器可能是所有选择器中最强大，却使用最少的。通用选择器的作用就像是通配符，它匹配所有可用元素。与其他语言中的通配符一样，通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。 例如，可以使用以下规则删除侮个元素上默认的空白边界。 与其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。
使用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