读书笔记《十天学会DIV+CSS》
2014-06-16 本文已影响0人
姜基基
2014/06/12
XHTML CSS基础知识
CSS盒子模型
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
一列布局
- 列固定宽度
- 列固定宽度居中 （margin为atuo）
- 列自适应宽度（width为空则拉伸屏幕，如需铺满则将body的margin设为0）
- 列自适应宽度居中 （width为80%，如果比例就为自适性）
- 列二至多块布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head></p>
<p><body>
<div id="header">此处显示 id "header" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>
注意
用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心
2014/06/14
二列布局
二列布局
float属性为以靠左布局和靠右布局，在right和left属性的div必须布局在float为flase的前面，作为中间元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="content">
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</div>
</body>
</html>
二列布局（含图片）和三列布局
同上
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了。
