问题：需要两个i标签并排显示，中间无间隙，但是在margin:0;padding:0设置好了的情况下，仍然有间隙
HTML：
<i class="first"></i>
<i class="second"></i>
原因分析：把i (或者span之类的) 写在不同行就会出现间隔，
解决方法：应把两个i写在同一行
HTML：
<i class="first"></i><i class="second"></i>
i_无间隔
参考：http://blog.csdn.net/clarkt/article/details/46363909
布局：ul中4个li标签，以中间为轴对称
分析：浮动，50%，box-sizing，padding
注意：要实现分块区域对称，li不能加margin,会被挤下来，应加上padding后设置a元素背景白色，即与大背景分离
css 对称分布效果
CSS:
.nav_two li{float:left;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
--box-sizing: border-box;
box-sizing: border-box;opadding:8px;}
.nav_two li a{display:block;
background:#fff;
height:65px;
width:100%;
-webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);}
初学者常用的HTML结构与CSS公共样式模板
HTML模板：index.html
只添加了CSS文件链接与基本网页框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta content="telephone=0" name="format-detection"/>
<link rel="stylesheet" type="text/css" href="CSS/common.css"/>
<link rel="stylesheet" type="text/css" href="CSS/main.css"/>
<title>标题</title>
</head>
<body>
<!--头部-->
<header></header>
<!--主体-->
<section></section>
<!--尾部-->
<footer></footer>
</body>
</html>
CSS Common模板：Common.css
@charset "utf-8";
html,body,header,section,footer,ul,li,
a,p,span,img,h3{margin:0;padding:0;}
a{ text-decoration: none;}
img{border:0;}
ul{list-style:none;}
body{min-width:340px;
margin:0 auto;
font:normal 12px/1.5
Microsoft YaHei,
Helvetica,
Arial,
sans-serif;}
效果：
表格table
HTML:
<section>
<table>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td>第一行1</td>
<td>第一行2</td>
<td>第一行3</td>
</tr>
<tr>
<td>第二行1</td>
<td>第二行2</td>
<td>第二行3</td>
</tr>
<tr>
<td>第三行1</td>
<td>第三行2</td>
<td>第三行3</td>
</tr>
</table>
</section>
CSS :
section table{
width:90%;
margin:5px auto;
border-collapse: collapse;
border-spacing: 0;
overflow:hidden;
border:1px solid #CCCACC;
border-radius:10px;
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.3);}
section table th{
padding:10px 15px;
border-right:1px solid #CCCACC;
background:#E9E7E9;
text-shadow: 1px 1px 1px #fff;}
section table td{
padding:10px;
border-right:1px solid #CCCACC;
border-top:1px solid #CCCACC;}
section table td:last-child{
text-align:center;
border-right:none;}
问题：HTML页面设置自适应，缩小窗口，自适应变小，最小时候可能内容溢出界面
原因：最小的min-width设置偏大，比如320px,导致浏览器宽度已经缩小至250px时候，内容溢出
解决：设置min-width:250px或更小
问题：8个li元素，实现4个4个排列，设置每个li元素25%，加上border边框，第四个li元素被挤到下一行
解决：设置属性
box-sizing: border-box;
可把border和padding包含在width里面，总共计算25%。
例：
.nav_one li{float:left;width:25%;height:100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;padding:10px;border:1px solid #E7E4DE; }
推荐使用
body,div,span,a{
padding:0;
margin:0;
}而非：
*{
margin:0;
padding:0;
}使用采用{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式
说法来自：segmentfault.com