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

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

“百变”盒模型

学过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等属性值。结束~!

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

2735
来自专栏编程

小白必知什么是css和盒模型

CSS盒模型概念 CSS 盒模型也叫框模型 (Box Model) ,包含了元素内容(content)、内边距(padding,也叫填充)、边框(border)...

1797
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3376
来自专栏前端学习心得

rem响应式布局

1094
来自专栏微信小程序开发

CSS常用实例,web前端开发者不知道这些就太low了

CSS常用实例 web前端开发中,会用到css实现各种网页布局,以下是我列出的几种常见实例,如果本文有错误的地方,也请指正。 PDF格式: http://dem...

33312
来自专栏IMWeb前端团队

移动端web开发入门笔记

移动端web开发基本上分为三种: 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法...

1999
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

663
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

53313
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

2807
来自专栏练小习的专栏

CSS Hack整理

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我...

1858

扫描关注云+社区