外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp
div、p、h1 块元素 span行元素
浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
http://www.w3school.com.cn/css/css_positioning_floating.asp
<!DOCTYPE html> <html> <head> <title>title Web tutorials on HTML, CSS</title> <meta name="description" content="Web tutorials on HTML, CSS,javascript" /> <!--浏览器缺省设置 外部样式表 内部样式表（位于 <head> 标签内部） 内联样式（在 HTML 元素内部） 优先级高 就近原则 --> <!-- 链接外部css文件 --> <link rel="stylesheet" href="xx.css" type="text/css"> <style type="text/css"> /*css语法 ：选择器{属性名1:属性值1;属性名2：属性2,属性2; }*/ body{ font-family: 微软雅黑; font-size: 14px; } #container{ width: 900px; /*margin: 0 auto;*/ } #header{ height: 100px; background-color: blue; } #menu{ height:30px ; background-color: yellow; margin-top: 5px; } #content{ height: 500px; margin-top: 5px; } #left{ width: 28%; height: inherit; background-color: pink; float: left; } #position{ position: relative;/*相对*/ position: static;/*正常*/ } #mid{ width: 40%; height: inherit; background-color: purple; float: left; margin-left: 2%; } #right{ width: 28%; height: inherit; background-color: cyan; float: left; margin-left: 2%; } #footer{ height: 100px; margin-top: 5px; background-color: green; } table{ border:2px solid green ;/*双线条边框 double 定义双线。*/ border-collapse: collapse;/*变单线条边框*/ /*border-spacing:10px 10px;/*单元格边框的距离。*/*/ font-family:Arial; width: 100%; } th,td{ font-size:1em; border: 1px solid #98bf21; padding: 3px 7px 2px 7px; } th{ font-size: 1.1em; text-align: left;; padding-top: 5px; padding-bottom: 4px; background-color: #A7c942; color: #FFFFFF; } /*派生选择器 （组合选择器）*/ tr.alt td{ color: #0000000; background-color: #EAF2D3; } /*元素选择器*/ p { text-indent: 5em;/*首行缩进5em*/ text-align: center;/*居中*/ word-spacing: 30px;/*词间距*/ letter-spacing: 20px;/*字母间距*/ text-transform: capitalize;/*单词首字母大写*/ text-decoration: underline;/*文本装饰效果具有下划线*/ line-height: 10px;/*行间距*/ }/*所有连接空白符合并为一个空格*/ /*id选择器 id 属性只能在每个 HTML 文档中出现一次*/ #outer{ width: 300px; height: 300px; border: 1px solid #f00; margin: auto;/*上开始 顺时针 auto居中*/ margin: 30px 50px;/*上下，左右 两个值*/ background-color:black; } #inner{ width: 150px; height: 150ps; border: 5px solid white; padding: 10px; background-color: purple; } div#test { background-color: #99bbbb;/*背景颜色*/ background-image: url(test.jpg);/*背景图片 url()*/ background-repeat: repeat-y;/*图片垂直重复 no-repeat repeat-x repeat-y repeat*/ background-position: center;/*常用位置关系 left center right top bottom 可以复合使用 一般先水平后垂直*/ background-position: 30% 70%;/*单位为百分比*/ background-position: 50px 100px;/*单位为像素*/ background-attachment:fixed;/*相对于可视区是固定的*/ background-size: cover;/*CSS3 图片适应边框*/ background: url(test.jpg) 0 0 no-repeat;/*空格空开对应的值*/ } /*类选择器*/ .class1 { font-family: Georgia,serif;/*首选Georgia，没有则选择serif字体*/ style="font-family: Times,‘New York‘; font-style: italic; font-weight: bold;/*字体粗体 italic斜体*/ font-weight: 900;"/*100~900级别的加粗度 */ font-size: 14px;/*设置字体大小像素*/ font-size: 0.87em;/*1em等于当前字体尺寸 浏览器默认的文本大小16px*/ } ul{ width: 240px; height: 259px; background: url(‘images/menu-bg.jpg‘) 0 0 no-repeat; font-size: 13px; font-weight: bold; padding: 40px 0 0 50px; } ul li{ background: url(‘images/homebg.gif‘) 0 0 no-repeat; padding: 0 0 0 25px; line-height: 28px; } ul li a:hover{ color: cyan; } /*属性选择器*/ [title=list] { list-style-type:none;/*列表前面没有点*/ /*list-style-image: url(‘images/arrow-normal.gif‘);选择列表前面的图标*/ } .class2 { a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;/* 正在被点击的链接 */ } /*a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后*/ </style> </head> <body> <table> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>27</td> <td>bao</td> </tr> <tr class="alt"> <td>09</td> <td>duan</td> </tr> <tr> <td>32</td> <td>junjie</td> </tr> <tr class="alt"> <td>31</td> <td>zhi</td> </tr> </table> <div id="outer"> <div id="inner"> inner </div> </div> <!-- 学会div布局 --> <div id="container"> <div id="header">header</div> <div id="menu">menu</div> <div id="content"> <div id="left">leftpanle</div> <div id="mid">middlepanle</div> <div id="right">rightpanle</div> </div> <div id="footer">footer</div> </div> <ul title="list"> <li ><a href="#" >home</a> </li> <li><a href="#">about us</a> </li> <li><a href="#">network</a> </li> <li><a href="#">submission</a> </li> <li><a href="#">archives</a> </li> </ul> </body> </html>
原文：http://www.cnblogs.com/linkarl/p/5144101.html