继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

微信小程序 宽度留白问题

大话西游666
关注TA
已关注
手记 209
粉丝 140
获赞 620

前言:由于公司Android项目上线和稳定,就会考虑到ios版本的问题,由于接近年底和开发周期长的问题。老板说急需照顾到ios版本的用户。因为不懂ios开发,而自己最近一直研究前端的知识,就主动提出担任微信开发的任务。虽然微信小程序以前学过一点,但却从没正式做过企业级的项目。开发过程中,也遇到一些问题,我会尽量总结,帮助和我一样遇到问题的童鞋。

先看一下问题:


其实要解决这个问题我们首先要从盒模型说起:

在前端中,盒模型包括:content、padding、border、margin


这是我从网上找的一个图,很形象的解释了盒模型。我在这里也简单解释下盒模型的每个部分的概念。

Content:

content就像英文名一样,意思为内容。我们经常设置的css样式width和height就是设置content的宽度和高度。该区域也是放置我们实际内容的区域。

Padding

相信学过Android的同学对这个并不陌生,Padding就像它的英文名一样译为填充,其实就是设置content和border之间的距离,就像我们给盒子和内容之间放填充物。再直白点,我们直接看图:

当我们padding为0的时候,我们的content和border(红色的线,设置了border:1px solid red)是紧挨着的。我们有时候为了美观,希望他们之间有间隔。我们就可以设置padding。


这是我们设置padding 50px的效果,我们可以充分感觉padding的效果,就像给content和border之间填充了透明物将他们间隔。

border

border就是盒子的边,就像我们收到的盒子,他会有个边框会有宽度,我们可以给盒子设置边框宽度,样式和颜色。

margin

margin是指盒模型和页面之间的距离。我们直接看图。




盒模型分类:标准盒模型和IE盒模型

弄懂了以上的概念,我们离解决问题近了一步了。现在我们只要弄清楚一个概念,盒模型有2种常用的模式,一个是标准盒模型,这个也是默认;还有一个就是IE盒模型。

标准盒模型:当我们给元素设置width和height,默认情况下就是在标准盒模型下,设置的是content的width和height。记住一个公式。width=contentWIdth;height=ContentHeight。

IE盒模型:当我们设置了IE模型后,我们设置的width和height是指这个盒子的大小,此时的公式是:width=contentWidth+paddingLeft+paddingRight+borderWidth,height=contentHeight+paddingTop+paddingBottom+borderWidth

举个例子,我们在设置了IE盒模型下,我们设置width为300px,这300px是指content+左右的padding值+盒模型的宽度

标准盒模型和IE盒模型转换

我们可以通过设置:

box-sizing: content-box;来设置标准盒模型

box-sizing: border-box;来设置IE盒模型

解决方案

弄懂了我们就知道文章刚开始出现的问题在哪了,我们给内容设置了width为100%,却在默认情况下它是标准盒模型,所以width只是指content的值,此时我们在给他加padding或者设置border宽度的时候,其实盒子的宽度就大于100%了。所以会有留白。

所以我们解决的问题就一句话搞定,我们将标准盒模型设置成IE盒模型,就完美解决问题了。

原文出处

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP