CSS 101

CSS101by 小鱼，http://sofish.de

CSS101by 小鱼，http://sofish.de

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

今天要讲的

盒模型选择器定位

兼容与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.（1）优先级

（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）优先级

（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>

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

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

同级后来居上

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

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

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

同级后来居上

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

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

同级后来居上

继承是不计分的

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

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

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

同级后来居上

继承是不计分的

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

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

同级后来居上

继承是不计分的

!important  高于一切

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

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

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

同级后来居上

继承是不计分的

!important  高于一切

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

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

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

同级后来居上

继承是不计分的

!important  高于一切

base:  得分高者权重高

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

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

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

同级后来居上

继承是不计分的

!important  高于一切

base:  得分高者权重高

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

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

（有什么是重要的）

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

（有什么是重要的）

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

（有什么是重要的）

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

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

（有什么是重要的）

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

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

选择器效率详情：

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

（有什么是重要的）

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

定位3.（1）static

（2）relative

（3）absolute

（4）fixed

-­‐-­‐>  一般

定位3.（1）static

（2）relative

（3）absolute

（4）fixed

-­‐-­‐>  一般

-­‐-­‐>  相对定位

定位3.（1）static

（2）relative

（3）absolute

（4）fixed

-­‐-­‐>  一般

-­‐-­‐>  相对定位

-­‐-­‐>  绝对定位

定位3.（1）static

（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

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

（有什么是重要的）

（3）定位在  ie6/ie7  有  bug

IE6/7正常

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

（有什么是重要的）

（3）定位在  ie6/ie7  有  bug

IE6/7正常

作业：如何解决这个bug？

Q&A

Q&A

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

（2）right

（3）left

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

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

浮动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

（有什么是重要的）

浮动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  */}

浮动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  */}

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

Q&A

Q&A

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

（2）其他游览器  HACK

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

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

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

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

.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;}

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

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

.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;}

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

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

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

.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;}

兼容与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

（如何权衡）

Q&A

Q&A

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

（2）页面  Reset

（3）模块化

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

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

/* 防止用户自定义背景颜色对网页的影响 */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;}...

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

/* 防止用户自定义背景颜色对网页的影响 */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/

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

/* 防止用户自定义背景颜色对网页的影响 */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/

作业：写一个属于你自己的  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 同序可维护

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

与 HTML 同序可维护

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

与 HTML 同序可维护

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

与 HTML 同序可维护

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

与 HTML 同序可维护

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

与 HTML 同序可维护

.module{}

.module  .head{}

.module  .body{}

.module  .foot{}

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

与 HTML 同序可维护

.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）鸽子的点亮网页

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

Q&A

作业发到：sofish@163.com

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

作业发到：sofish@163.com