移动端H5知识[系列] - “百变”盒模型
“百变”盒模型
学过HTML和CSS的同学都知道，盒模型是由width、height、border、padding、margin这几个属性共同组成的。一个元素在网页文档中占据的真正空间是盒模型的大小，而非简简单单width和height的值。在使用百分比进行移动端开发时，盒模型存在一定的问题。
例如我们设置如下代码：
.wrap {
width: 640px;
height: 240px;
border: 1px solid #f00;
}
.wrap p {
float: left;
width: 18%;
height: 83%;
margin: 8.5% 1%;
background: #ccf;
text-align: center;
}结构代码：
<div class="wrap">
<p>独行冰海</p>
<p>梦幻雪冰</p>
<p>尹小芃槑</p>
<p>扶、公子</p>
<p>路过心上</p>
</div>（备注：原则上，在移动端开发时，我们类名为wrap的div也应当设置百分比，或者直接自适应屏幕，在此为了便于理解盒模型问题，设置成了固定的640*240像素）
我们希望能够实现这样的效果（或者说我们在书写代码的时候是这样的想法）
但是当我们调试代码的时候，却发现，展示的效果是这样的：
到底是什么造成了这样的差别呢？我们如果将margin、width、height的百分比值加在一起，也并没有错，均是100%。然而需要注意的是：padding和margin在设置百分比的时候，纵向并不是针对父级的height进行计算，而是参照以最近的块级祖先元素的宽度进行计算。究其原因，在于需要构建在纵横两个方向上相同的 margin/padding，如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。
CSS 的基本模型着重于“排版”的需求，因此水平和垂直方向其实并不是同等权重的，当文字是横排文字的时候，就是水平方向上的排版模式，排版默认是水平宽度一定，而垂直方向上是可以无限延展的。当文字是纵向排列时，就是垂直方向上的排版模式，排版默认是垂直高度一定，而水平方向上是可以无限延展的。所以，简单的概括就是——文字书写方向决定margin/padding-* 按照 height 还是 width 计算。
因此回到上面的例子中，margin四个方向的百分比均是基于父级的宽度（640px）进行计算，也就是说，每个p标签的宽度为115px（18%）、高度为199px（83%）、横向margin值左右各6px（1%）、纵向margin值上下各为54px（8.5%）。这样算下来，一个p元素盒模型的大小为127px*307px，明显超出了我们128px*240px的预期大小。
欢迎沟通交流~HTML5学堂
纵向排版
在此扩展讲解一下纵向排版的问题。我们通过如下代码实现纵向排版：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.wrap {
width: 640px;
height: 240px;
border: 1px solid #f00;
}
.wrap p {
float: left;
width: 18%;
height: 83%;
margin: 8.5% 1%;
background: #ccf;
text-align: center;
writing-mode: tb-lr;
}
</style>
</head>
<body>
<div class="wrap">
<p>独行冰海</p>
<p>梦幻雪冰</p>
<p>尹小芃槑</p>
<p>扶、公子</p>
<p>路过心上</p>
</div>
</body>
</html>实现的效果图：
不过需要注意的一点是writing-mode: tb-lr;只有IE8以及IE8以上的IE浏览器兼容，其他浏览器都不能实现~t表示的是top（上），b表示的是bottom（下）；l表示left（左），r表示right（右）。此处的代码含义是先上下还是先左右。也可以设置tb-rl、lr-tb等属性值。结束~！