CSS 101

CSS101by 小鱼，http://sofish.de

http://sofish.de

http://sofish.de

CSS101by 小鱼，http://sofish.de

我没办法在1个小时内把你变成高手

http://sofish.de

http://sofish.de

今天要讲的

盒模型选择器定位

兼容与Hack1.2.3.

5.6.7.规划你的CSS

工具8.浮动4.CSS3

盒模型1.

盒模型

外边距：margin内边距：padding边框：border

1.

盒模型

外边距：margin内边距：padding边框：border

不可置换的（non-‐replaced）行内元素没有 margin-‐top 和margin-‐bottom

http://reference.sitepoint.com/css/replacedelements

replaced / non-‐replaced elements

1.



Q&A

Q&A

选择器2. （什么是选择器）

（1）#id .class

（2）[rel=”nofollow”] :hover

（3）元素（4）*（元素通配符）

选择器2. （什么是选择器）

（1）#id .class

（2）[rel=”nofollow”] :hover

（3）元素（4）*（元素通配符）

分离样式和结构样式重用

选择器2.（1）优先级（2）效率

（有什么是重要的）

选择器2.（1）优先级

（2）效率



（2）效率

ID 0, 1, 0, 0CLASS、属性选择符、伪类 0, 0, 1, 0元素、伪元素 0, 0, 0, 1* 不计分

style=”” 1, 0, 0, 0!important 高于一切继承没有specificity值，低于 * 选择器@import 通常有冲突时，相同规则 at rule 进的优化级都比较低



（2）效率

ID 0, 1, 0, 0CLASS、属性选择符、伪类 0, 0, 1, 0元素、伪元素 0, 0, 0, 1* 不计分

style=”” 1, 0, 0, 0!important 高于一切继承没有specificity值，低于 * 选择器@import 通常有冲突时，相同规则 at rule 进的优化级都比较低


同级后来居上* 虽然不计分，但比继承更权重更高

选择器2.（1）优先级（示例）

<div id=”alipay” class=”b a”> <span>sofish</span></div>

<style> .a{color:green;} .b{color:blue;}</style>



同级后来居上



<style> div{color:green;} span{color:blue;}</style>

同级后来居上



同级后来居上

继承是不计分的



<style> div{color:green!important;} #alipay{color:blue;}</style>

同级后来居上




同级后来居上


!important 高于一切



<style> div span{color:green;} span{color:blue;}</style>

同级后来居上






同级后来居上



base: 得分高者权重高




同级后来居上



base: 得分高者权重高

作业：IE @import 有什么问题？







ID 高效、最快CLASS 高效、较快属性选择符、伪类低效、慢* 低效、慢




http://code.google.com/speed/page-speed/docs/rendering.html

选择器效率详情：







选择器效率详情：

速度差别是多少？真的有那么重要吗？有些事让浏览器去优化吧。





Q&A

Q&A

定位3.（1）static

（2）relative

（3）absolute

（4）fixed


（2）relative

（3）absolute

（4）fixed

-‐-‐> 一般


（2）relative

（3）absolute

（4）fixed

-‐-‐> 一般

-‐-‐> 相对定位


（2）relative

（3）absolute

（4）fixed

-‐-‐> 一般


-‐-‐> 绝对定位


（2）relative

（3）absolute

（4）fixed

-‐-‐> 一般



-‐-‐> 固定定位

定位3.（1）static -‐-‐> 一般




定位3.（1）static 元素默认。影响文档流，占位-‐-‐> 一般




定位3.（2）relative

定位3.（2）relative 影响文档流，依然占位

定位3.（3）absolute

定位3.（3）absolute 不影响文档流，不占位

定位3.（4）fixed

定位3.（4）fixed 不影响文档流，不占位

定位3.（4）fixed 不影响文档流，不占位

可以说是 position:absolute; 的一个变种。像是根据“html”来做绝对定位。

定位3.（1）基于非 static 的父节点定位（2）fixed 基于页面窗口定位


（3）定位在 ie6/ie7 有 bug




IE6/7正常




IE6/7正常

作业：如何解决这个bug？

Q&A

Q&A

浮动4.（1）none (默认)

（2）right

（3）left



浮动4.（2）right

浮动4.（2）right

浮动4.（3）left

浮动4.（3）left

浮动4.（3）left

浮动4.（3）left

浮动4.（3）left

浮动4.（3）left

浮动会使元素脱离文档。如果浮云后面还有内容的话，元素的框会把浮动忽略，但文本仍会被浮动影响。环绕于浮动框。

浮动4.（1）浮动 vs 定位（2）clearfix




/* 清理浮动 */.clearfix:after { visibility:hidden; display:block; font-‐size:0; content:" "; clear:both; height:0;}.clearfix { zoom:1; /* for IE6 IE7 */}



/* 清理浮动 */.clearfix:after { visibility:hidden; display:block; font-‐size:0; content:" "; clear:both; height:0;}.clearfix { zoom:1; /* for IE6 IE7 */}

作业：列举你所知道的所有浮动清理方法

Q&A

Q&A

兼容与HACK5.（1）IE bug && hasLayout

（2）其他游览器 HACK



IE特有的条件注释：<!-‐-‐[if lte IE 7]> ... <![endif]-‐-‐>


.all-‐IE{property:value\9;}

.gte-‐IE-‐8{property:value\0;}

.lte-‐IE-‐7{*property:value;}

.IE-‐7{+property:value;}

.IE-‐6{_property:value;}

.not-‐IE{property//:value;}


在 IE6/7 中的大部会 bug 都是 hasLayout 引起的问题








在 IE6/7 中的大部会 bug 都是 hasLayout 引起的问题

作业：什么是 hasLayout？找出 hasLayout 导致的 3 个 bug。并提供解决文案。







兼容与HACK5.（2）其他游览器 HACK

兼容与HACK5.（2）其他游览器 HACK

@-‐moz-‐document url-‐prefix() { .firefox{property:value;} }

@media all and (-‐webkit-‐min-‐device-‐pixel-‐ratio:0) { .webkit{property:value;} }

@media all and (-‐webkit-‐min-‐device-‐pixel-‐ratio:10000),not all and (-‐webkit-‐min-‐device-‐pixel-‐ratio:0) { .opera{property:value;} }

@media screen and (max-‐device-‐width: 480px) { .iphone-‐or-‐mobile-‐s-‐webkit{property:value;} }

兼容与HACK5. （如何权衡）

兼容与HACK5.权衡成本在浏览器被淘汰后，如何快速清理掉无用代码

可维护在资源成本和完美间平衡的向后兼容

可读省力、易记

（1）

（2）

（3）

（如何权衡）

兼容与HACK5. （如何权衡）

兼容与HACK5.尽量使用单独HACK 这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

向后兼容的目标：1年你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；

尽可能省资源你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

（如何权衡）

兼容与HACK5.尽量使用单独HACK 这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

向后兼容的目标：1年你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；

尽可能省资源你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

关于兼容和HACK的权衡，更详细的介绍：http://sofish.de/1331

（如何权衡）

http://sofish.de/1331

http://sofish.de/1331

Q&A

Q&A

规划你的CSS6.（1）浏览器 Reset

（2）页面 Reset

（3）模块化



/* 防止用户自定义背景颜色对网页的影响 */html{ color:#000;background:#fff;}

/* 内外边距通常让各个浏览器样式的表现位置不同 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0;padding:0;}...




推荐 YUI 的 Reset：http://developer.yahoo.com/yui/3/cssreset/

https://gist.github.com/879075





推荐 YUI 的 Reset：http://developer.yahoo.com/yui/3/cssreset/

作业：写一个属于你自己的 CSS Reset。



规划你的CSS6.（2）页面 Reset

重用：效率 + 体积整体规划

h1{font-‐size:30px}h2{font-‐size:20px}h3{font-‐size:10px;}

.h1{font-‐size:30px}

.h2{font-‐size:20px}

.h3{font-‐size:10px;}

规划你的CSS6.（2）模块化

与 HTML 同序可维护











.module{}

.module .head{}

.module .body{}

.module .foot{}



.module{}

.module .head{}

.module .body{}

.module .foot{}

Alice Style Library Guideline

你到前端来工作的时候，会让你深入了解支付宝前端部的 CSS 架构和开发流程

Q&A

Q&A

关于 CSS3 的内容周三我的另一节课再深入讲

CSS37.

工具推荐8.（1）Firebug

（2）新手们去用 Dreamweaver 吧（3）css.vim

（4）CSS Tidy

（5）内网的 alice solutionshttp://arale.alipay.net/alice/documentation.php

（6）鸽子的点亮网页

工具只是工具，用它来提升你效率关键还是使用的人。

http://arale.alipay.net/alice/documentation.php

http://arale.alipay.net/alice/documentation.php

Q&A

作业发到：[email protected]

mailto:[email protected]


THANKS!by 小鱼，http://sofish.de

作业发到：[email protected]

http://sofish.de

http://sofish.de



Technology

CSS 101