苏打草莓对《精通CSS》的笔记(2)
-
第31页 可视化格式模型
看到float那块完全被卡住了，本来想跳过，后来想定位（区别于布局）这事必须要搞懂，又想起来正好是之前看到的一篇文章：http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/ 里面涉及的内容，就好好了解了一下。主要是通过以下文章又进入了一个新阶段，也了解了很多术语。 http://www.jb51.net/css/67471.html 本来一直一位定位分成绝对和相对定位，后来才发现这样分类是不对的，正确的方法是： 1. 常规流(Normal Flow) 2. 浮动(Float) 3. 绝对定位(Absolute Position) 对于后面两种定位的主要区别看了以下知乎这个帖子http://www.zhihu.com/question/19588854 发现传统的还是float比较合适。 用浮动元素的一个大问题是：当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象），导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。解决的方法主要是： 1. 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素； 2.通过设置父元素 overflow 或者display：table 属性来闭合浮动，主要是利用 Block formatting contexts （块级格式化上下文），以下简称 BFC。（CSS3里面对这个规范做了改动，称之为：flow root）这里的BFC很类似IE里的 hasLayout，主要的介绍就百度百科了一下 http://baike.baidu.com/link?url=HYth1hSJdIvhgr9sL_NWu2ZX2Fqev82zhTd_2U7P09wClhdg04JLk48WMyNgHZhEhGYgACdtYJ76HO2Mk92S1a 还根据这篇文章了解了以下出发条件： http://www.cnblogs.com/ideaplusl/archive/2011/07/07/2099843.html 大致我认为就是出发了hasLayout之后，这个块级元素就要负责他的子元素的定位，而不是通过其他的同级元素来定位自己，因此撑起了自己内部的大小。 答案暂定为：
<div class="item"> <div class="pic">...</div> <div class="content">...</div> </div>
.item .pic { float:left;margin-right:10px; } .item .content { overflow:hidden;zoom:1; } /* 或用display:tableBFC的特性为： 1)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。 2)块级格式化上下文不会重叠浮动元素 根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。 3)块级格式化上下文通常可以包含浮动 （就是这里，因为它自身包含了浮动所以高度被撑起来了。） 关于BFC更细致的解释在这里，马一下，暂时实在看不下去了。。。http://www.html5jscss.com/box-context-78.html
-
第134页 Hack and Filter
翻译到这一章实在碰到了底线，看不下去了，配合着网上第二版的英文版终于搞懂了一点。 hack就是指为了兼容各浏览器，而使用的特别的css定义技巧。 filter就是对不同的浏览器做不同处理。 这是一张CSS hack列表，显示了各浏览器对css hack的支持程度，先马一记。
浏览器兼容性一览表以下是百科对Hack的分类。 CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对。 类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等 选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等 HTML[1]头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 书写顺序，一般是将识别能力强的浏览器的CSS写在前面。 在知乎看到了这个问题http://www.zhihu.com/question/20388422，所以想对于css的兼容性问题，主要的解决方法就是： 1.使用“给<html>标记添加包含User Agent的class属性”，得到的<html>标记可能会是这样的： <html class="ua-wk ua-wk535"> 2.CSS Hacks技术得到的代码，众所周知，是类似这样的： .foo { color: red; *color: blue; _color: yellow;} 3.条件样式表，比如HTML条件注释，使用Javascript或者服务器端程序判断User Agent，举个用HTML条件注释简单实现的例子： <link href="style.css" /> <!--[if IE 6]><link href="ie6.css" />< ![endif]--> 后面两个就是书中说到的方法，但是第3种主要只是针对IE，而第一种是要靠后台配合，第二种就是根据不同浏览器运用不同选择器和规则。关于Hack本身的资料随便马一记：http://www.blueidea.com/tech/web/2008/5287.asp 百科里也有解释。
苏打草莓的其他笔记 · · · · · · ( 全部76条 )
- 零售的哲学
- 1
- 人生的智慧
- 1
- 月亮和六便士
- 1
- 关键对话
- 1
- 送你一颗子弹
- 2
- 高效能人士的七个习惯
- 14
- OpenGL编程指南（原书第7版）
- 8
- 从0到1
- 1
- 围城
- 2
- 從0到1
- 5
- 黑笑小说
- 2
- 伟大的博弈
- 3
- 解忧杂货店
- 3
- 上帝掷骰子吗
- 1
- CSS禅意花园
- 1
- 生命是什么
- 4
- 程序员修炼之道
- 3
- 机器视觉
- 2
- JavaScript高效图形编程
- 1
- C++入门经典
- 1
- 计算机动画的算法基础
- 4
- Python基础教程（第2版）
- 1
- Intel微处理器
- 2
- The Intel Microprocessors
- 2
- Intel汇编语言程序设计
- 1
- 实用C语言编程
- 2
- 论系统工程
- 1
- JavaScript学习指南
- 1
- JavaScript高级程序设计（第3版）
- 1
- 黄金时代
- 1
- 未央·沉浮（全两册）
- 1