CSS3
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid #ddd;
width:80px;
height:30px;
text-align:center;
}
.one{
vertical-align: top;
}
.two{
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" class="one">1</td>
<td rowspan="3" class="two">2</td>
<td>A</td>
<td>28</td>
<td>12%</td>
</tr>
<tr>
<td>B</td>
<td>56</td>
<td>98%</td>
</tr>
<tr>
<td>A</td>
<td>33</td>
<td>42%</td>
</tr>
</table>
</body>
</html>
inline-block里你加文字后会按照文字的对齐方式vertical-align：baseline；解决它可以通过设置inline-block元素的vertical-align
float会导致父元素坍塌，具体原理可以看看张鑫旭大神的博客(慕课网上也有，深入理解系列)
1: 第二个<div>加了float:left后margin是有的。
2：因为第二个设置了浮动，所以他会脱离文档流，就会盖在第三个的上面
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(2),div:nth-of-type(3){
display: inline-block;
}
</style>
</head>
<body>
<div style="background-color: #00a854"></div>
<div style="background-color: red"></div>
<div style="background-color: blue"></div>
<div style="background-color: yellow"></div>
</body>
</html>
我推荐你看一下张鑫旭的这篇文章
理解CSS3 transform中的Matrix(矩阵)
http://www.zhangxinxu.com/wordpress/?p=2427
我们平时开发都是class来控制样式，id来进行js操作。也不是说id就不能用来写css，有的时候我们也会用，就是比较少。举个栗子：
有两个div的样式一样，因为id的唯一性所以你就要给两个id写相同的样式，这样就比较麻烦啦，你写同样的class，然后设置这个class的样式就可以了。
如果是纯html中 这么写是没有任何作用的，但是如果用一些模板插件的，这个可能是作为分隔符使用，模板通过正则找到{{index}} 这种字符串，然后替换成真实的内容。
看着感情深厚的室友走着你的老路，我也在心痛，可是劝了好多回，都无尽于事，整天玩游戏。楼主加油！你一定可以改变自己的，加油！！！
关注我喜欢或专注的猿问分类
-
Android
-
AngularJS
-
Bootstrap
-
C
-
C#
-
C++
-
Cocos2d-x
-
CSS3
-
Go
-
Html/CSS
-
Html5
-
iOS
-
JAVA
-
JavaScript
-
JQuery
-
Linux
-
Maya
-
MongoDB
-
Mysql
-
Node.js
-
Oracle
-
Photoshop
-
PHP
-
Premiere
-
Python
-
React.JS
-
Ruby
-
Sass/Less
-
SQL Server
-
Unity 3D
-
Vue.js
-
WebApp
-
ZBrush
-
云计算
-
前端工具
-
大数据
-
数据结构
-
测试