HTML5学堂-码匠 HTML5学堂

您当前位于:移动端基础 ——> 移动端开发知识[系列] - “百变”盒模型,相对度量单位的参照元素

移动端开发知识[系列] - “百变”盒模型,相对度量单位的参照元素

2015/04/29 22:17:51 | 作者:HTML5学堂(码匠) | 分类:移动端基础 | 关键词:移动端,相对单位,百分比

移动端H5知识[系列] - “百变”盒模型

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台的网站,还需要能够处理移动端的网页。可是,新的事物伴随着各个浏览器,也就冒出了各种兼容问题。第4步——“百变”盒模型。

“百变”盒模型

学过HTML和CSS的同学都知道,盒模型是由width、height、border、padding、margin这几个属性共同组成的。一个元素在网页文档中占据的真正空间是盒模型的大小,而非简简单单width和height的值。在使用百分比进行移动端开发时,盒模型存在一定的问题。

例如我们设置如下代码:

  1. .wrap {
  2.     width: 640px;
  3.     height: 240px;
  4.     border: 1px solid #f00;
  5. }
  6. .wrap p {
  7.     float: left;
  8.     width: 18%;
  9.     height: 83%;
  10.     margin: 8.5% 1%;
  11.     background: #ccf;
  12.     text-align: center;
  13. }

结构代码:

  1. <div class="wrap">
  2.     <p>独行冰海</p>
  3.     <p>梦幻雪冰</p>
  4.     <p>尹小芃槑</p>
  5.     <p>扶、公子</p>
  6.     <p>路过心上</p>
  7. </div>

(备注:原则上,在移动端开发时,我们类名为wrap的div也应当设置百分比,或者直接自适应屏幕,在此为了便于理解盒模型问题,设置成了固定的640*240像素)

我们希望能够实现这样的效果(或者说我们在书写代码的时候是这样的想法)
HTML5学堂 移动端盒模型01 H5course

但是当我们调试代码的时候,却发现,展示的效果是这样的:
HTML5学堂 移动端盒模型02 H5course

到底是什么造成了这样的差别呢?我们如果将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学堂

纵向排版

在此扩展讲解一下纵向排版的问题。我们通过如下代码实现纵向排版:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5course</title>
  6.     <link rel="stylesheet" href="css/reset.css">
  7.     <style>
  8.         .wrap {
  9.             width: 640px;
  10.             height: 240px;
  11.             border: 1px solid #f00;
  12.         }
  13.         .wrap p {
  14.             float: left;
  15.             width: 18%;
  16.             height: 83%;
  17.             margin: 8.5% 1%;
  18.             background: #ccf;
  19.             text-align: center;
  20.             writing-mode: tb-lr;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="wrap">
  26.         <p>独行冰海</p>
  27.         <p>梦幻雪冰</p>
  28.         <p>尹小芃槑</p>
  29.         <p>扶、公子</p>
  30.         <p>路过心上</p>
  31.     </div>
  32. </body>
  33. </html>

实现的效果图:
HTML5学堂 移动端盒模型03 H5course

不过需要注意的一点是writing-mode: tb-lr;只有IE8以及IE8以上的IE浏览器兼容,其他浏览器都不能实现~t表示的是top(上),b表示的是bottom(下);l表示left(左),r表示right(右)。此处的代码含义是先上下还是先左右。也可以设置tb-rl、lr-tb等属性值。结束~!

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS