一个盒子里面装两个同宽高的盒子，利用backface-visibility设置元素背面是否可见的属性，达到两面翻转的效果
<!DOCTYPE HTML><html>
<meta charset="UTF-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<head>
<style type="text/css">
body {
margin: 0
padding: 0
}
.box {
text-alien：center
/*段落居中*/
height: 300px
width: 300px
border: 1px solid #000
/*边框*/
box-shadow: 2px 2px 10px 3px #000
/*阴影*/
}
</style>
<script type="text/javascript">
</script>
<title>demo</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
