div+css 学习笔记

1.盒子模型边界(margin) 边框(border) 填充(padding) 内容(content)
2.一列布局
一列固定宽度 #layout { height: 300px; 400px; background: #99FFcc; }
一一列固定宽度居中 #layout { height: 300px; 400px; background: #99FFcc; margin: auto; }
一列自适应宽度 #layout { height: 300px; background: #99FFcc;}
一列自适应宽度居中 body { margin: 0px; } #layout { margin:auto; height: 300px; background: #99FFcc; 80%; }
注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值 Id的优先级高于class
3.二列和三列布局
二列自适应宽度

<!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>
#side { background: #99FF99; height: 300px;  120px; float: left; }
#main { background: #99FFFF; height: 300px;  70%; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>

二列固定宽度居中

<!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>
#content { 470px; margin:0 auto;}
#side { background: #99FF99; height: 300px;  120px; float: left; }
#main { background: #99FFFF; height: 300px;  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>

三列自适应宽度示例代码

<!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>
body { margin:0;}
#side { background: #99FF99; height: 300px;  120px; float: left; }
#side1 { background: #99FF99; height: 300px;  120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head></p>
<p><body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。
float 使元素浮动
margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px