摘要：
1.100% width divs not spanning entire width of the browser in webkit.Even Body can not span the entire width of thebrowser.So crazy.There is a funny way to fix it:html{overflow-y:scroll;}2. When Div is 100% width, set padding: 20px. Then its actual width is bigger than 100%. Be careful!!!!3. Book re 阅读全文
摘要：
1. Cal在运算符号和数字间加空格！！！.calc {/* Firefox */.width: -moz-calc(75% - 100px);/* WebKit */width: -webkit-calc(75% - 100px);/* Opera */width: -o-calc(75% - 100px);/* Standard */width: calc(75% - 100px);}2. 如果想做出”A--------------B“这种效果（类似书目），改怎么设计？ABCSS为(用到CSS3的display: box;)：div {display: box;}div span{disp 阅读全文
摘要：
https://makandracards.com/makandra/1288-manipulate-color-with-sass-functionsadjust-hue($color, $degrees)Changes the hue of a color.lighten($color, $amount)Makes a color lighter.darken($color, $amount)Makes a color darker.saturate($color, $amount)Makes a color more saturated.desaturate($color, $amoun 阅读全文
摘要：
HTML：//预格式化：保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。例如，原封不动地保留文档中的空白，如空格、制表符等。//HTML中空格的显示：使用或者加空格的时候将输入法设为全角。//超链接：指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件或者一个应用程序。超文本链接是超链接的一种，是指用文字链接的形式来指向一个目标。HTML文档类型://只有确定了正确的DOCTYPE，XHTML里的标识和级联样式才能正常生效。在HTML 阅读全文
摘要：
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/Modal boxes are a frequently utilized tool in the web developer’s arsenal. Used for, amongst many things, login/register forms; advertisements; or just notifications to the user.However despite the fact that modal wi 阅读全文
摘要：
http://www.w3school.com.cn/css/css_pseudo_classes.asp语法伪类的语法：selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}锚伪类在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a:link{color: #FF0000}/* 未访问的链接 */a:visited{color: #00FF00}/* 已访问的链 阅读全文
摘要：
http://www.w3school.com.cn/css/css_pseudo_elements.asp语法伪元素的语法：selector:pseudo-element {property:value;}CSS 类也可以与伪元素配合使用：selector.class:pseudo-element {property:value;}:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：实例p:first-lin 阅读全文
摘要：
结构伪类（Structural Pseudo-Class） 根据W3C的定义：… permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.这意味着基于文档中元素的位置，我们可以动态的选择内容。所以，我们先从文档的根部:root开始。 E:root :root用来选择页面的根元素。一般使用该选择器一定会选中的是，我想你已经猜到了，。例如：:root { backgr... 阅读全文
摘要：
1，伪类通常是根据文档树节点的相对位置、状态等，对文档树节点进行归类。冒号后面即是文档节点的相对位置、状态，例如:link、:visited、:first-child。2，伪元素通常是插入文档树中不存在的内容，或者表示文档树无法指定的内容。例如：:first-letter、:first-line、:after、:before。3，类似与id选择符和class选择符一样，伪元素指定的属性优先级要把伪类高。 阅读全文
摘要：
1. 属性选择器下表是对这些选择器的简单总结：类型描述[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素a[attr] with attribute "attr"a[attr="x"] with attribute "attr" is &quo 阅读全文
摘要：
http://www.divcss5.com/html/h22.htmlDOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效,也就是说如果没有这个DOCTYPE声明将会导致CSS失效-css无效，特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示。DOCTYPE声明开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看很多使用XHTML标准开发的网站 阅读全文
摘要：
http://www.css88.com/archives/1681#more-1681关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：.test{color:#000000; /* FF,OP支持 */color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */[color:#000000;color:#00FF00; /* SF,CH支持 */*color:#FFFF00; /* IE7支持 */_color:#FF0000; /* IE6支持 阅读全文
摘要：
http://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968057.html自定义滚动条(webkit系列)Thumb: 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）。This is the piece that shows you where you are in the scrollbar. This is the chap that you can move aroundTrack: 滚动条的轨道（里面装有Thumb）。This is the area of the scrollbar tha 阅读全文
摘要：
http://paranimage.com/css3-box-shadow-property-tutorial/1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性:Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。Firefox通过私有属性-moz-box-shadow支持。Safari和Chrome通过私有属性-webkit-box-shadow支持。所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。2. box-shado 阅读全文
摘要：
http://news.cnblogs.com/n/172573/英文原文：Three CSS features you need to know about 各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的 W3C Web 标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的 CSS 功能。 在 CSS 中用 attr ()显示 HTML 属性值 attr ()功能早在 CSS 2.1 标准中就已经出现，但现在才开始普遍流行。它... 阅读全文
摘要：
关键点：1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。95%的中国网站需要重写CSS在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，我也敢打赌大部分读者不知道em为何物或者它相当于多少px。国 阅读全文
摘要：
http://css-tricks.com/snippets/html/glyphs/Special Characters"""quotation marku+0022 ISOnump:before { content:"\0022"; }alert("\42")&&&ersandu+0026 ISOnump:before { content:"\0026"; }alert("\46")<<gre 阅读全文
摘要：
http://www.ruanyifeng.com/blog/2012/11/compass.html几个月前，我介绍了Sass的用法。Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。本文介绍Compass的用法。毫不夸张地说，学会了Compass，你的CSS开发效率会上一个台阶。本文假设你已经掌握了CSS的主要用法，如果你还懂Sass，那就更好了。但是不懂Sass，一样可以阅读本文。一、Compass是什么？简单说，Compass是Sass的工具库（toolkit）。Sass本身只是一个编译器，Co 阅读全文
摘要：
http://www.w3cplus.com/blog/52.html前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出 阅读全文