6月6号讲课内容

第一节课程:

盒模型( http://www.w3school.com.cn/css/css_boxmodel.asp

 1) 掌握盒模型的概念
 2) 内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距,比如ul和li,以及body等
 3) 在 CSS 中,width 和 height 指的是内容区域的宽度和高度, 不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
 4) 外边距可以是负值,而且在很多情况下都要使用负值的外边距。内边距不可以是负数

容易出错的几个地方:

 1) 背景应用于由内容和内边距、边框组成的区域。
 2) 可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。注意对比border-radius
 3) 设置值的方式 上,右,下,左,注意只设置两个,或者三个时候对应关系,课堂上交大家怎么看(包括margin,border-radius)
 4) 由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。

 5) 注意外边距合并的问题(http://www.w3school.com.cn/css/css_margin_collapsing.asp)

注意盒模型可以通过css3的box-sizing 来指定那种盒模型 http://www.w3school.com.cn/cssref/pr_box-sizing.asp

参考文章:http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html(CSS外边距合并的问题)

第二节课程:

1 其他常用的css

  1) opacity  透明度(兼容性问题)
  2) line-height,height  (http://www.w3school.com.cn/cssref/pr_dim_line-height.asp)
  3) overflow
  4) clear
  5) position:fixed 
  6) min-height,max-height,min-width,max-width
  7) z-index(http://www.w3school.com.cn/cssref/pr_pos_z-index.asp)
  • clear 记住就是清理浮动的,overflow设置为hidden和auto也可以达到相同的效果(这是overflow的副作用)

  • clear的作用参考http://www.cnblogs.com/rainman/archive/2008/07/15/1243424.html

  • line-height 一般与height一起作用,垂直居中文本或者图片等()

具体可以参考http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

2 浏览器前缀

* Firefox:-moz-box-shadow
* Safari:-webkit-box-shadow / chrome -webkit
* Opera:-o-box-shadow
* IE:-ms-box-shadow

第三节课:

 1) color, px, rem,em的区别(http://www.cnblogs.com/leejersey/p/3662612.html)
 1) reset.css https://html5boilerplate.com  https://github.com/jasonkarns/css-reset/blob/master/reset.css
 2)   常见的网页布局实现

大家可以参考这个文章http://www.mycelly.com/

3 css样式继承 & 优先级

 注意important 的使用
 掌握布局的核心:
   1 内容自适应的时候width要设置100%
   2 多栏的时候要用浮动或者absolute定位
   3也可以采用display:inline-block进行定位
 每种定位方式都可以满足要求,但是display:inline-block存在兼容性的问题,当然如果用户群体没有ie6,7倒是可以采用

分析微博页面

PS:

  • 相对定位:相对于元素本来应该处于的位置

  • 绝对定位: 相对于最近的有定位信息的祖先节点中,如果一直没有找到,就相对于BODY

  • fixed: 页面始终处于一个位置(存在兼容性的问题)