读书笔记《十天学会DIV+CSS》

2014/06/12

XHTML CSS基础知识

CSS盒子模型

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

一列布局

• 列固定宽度
• 列固定宽度居中 （margin为atuo）
• 列自适应宽度（width为空则拉伸屏幕，如需铺满则将body的margin设为0）
• 列自适应宽度居中 （width为80%，如果比例就为自适性）
• 列二至多块布局

此处显示  id "header" 的内容
此处显示  id "main" 的内容
此处显示  id "footer" 的内容

注意

用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心

---

2014/06/14

二列布局

二列布局

float属性为以靠左布局和靠右布局，在right和left属性的div必须布局在float为flase的前面，作为中间元素。

  
此处显示 id "side" 的内容
  
此处显示 id "main" 的内容

二列布局（含图片）和三列布局

同上

IE6的3像素bug

3像素bug

从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

解决方法如下

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }
```

>但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。