资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/扯一下似乎被遗忘的盒模型

扯一下似乎被遗忘的盒模型

Barry_Ng / 961人阅读

摘要：不过想想，现在都让微软给退下了，还有多少呢。接着就是要提到的一点，盒模型的计算方式，标准方式和模式是不同的，不知道又想知道的同学请问谷哥或者度娘吧，记得几年前我那本破书上也又提到，还做了一些测试。扯远了，盒模型大概的情况就是这样。

前段时间为了组里在扩充人员，在面试的过程中有过几次扯到“盒模型”这个东西。对于“盒模型”以前是经常提到，现在被CSS3的风头给盖下去了，已经没多少人去讲“盒模型”，也导致了很多了现在根本不知道什么是盒模型。

本来呢，我想从头跟大家一起温习一下盒模型，结果自己做了一些demo以及翻阅总结了一些资料之后，放弃了这个想法。从最简单的方面来说，盒模型就是下面这个图的东西，大家在浏览器的开发者工具中都可以见到。

那我还说什么呢，好像真没什么说的，在w3c网站上也有介绍，上面这张图就是从w3c上拿的，地址是 http://www.w3.org/TR/CSS2/box.html。

在IE浏览器中，尤其是IE6，如果一个不小心你就有可能会触发一个叫quirks模式，导致盒子计算不对，然后又不能margin:0 auto;居中。怎么触发这个quirks模式呢，主要就是doctype文档声明不是在第一行（前面有其他字符），那就触发了。不过想想，现在XP都让微软给退下了，IE6还有多少呢。

接着就是要提到的一点，盒模型的计算方式，标准方式和quirks模式是不同的，不知道又想知道的同学请问谷哥或者度娘吧，记得几年前我那本破书上也又提到，还做了一些测试。

扯远了，盒模型大概的情况就是这样。然后现在CSS3的到来，引入了一个box-sizing，这个属性又三个属性值content-box、padding-box、border-box，对于这三个属性值，FF都是支持的，表现效果也稍有不同，大家可以看后面我给出的demo效果，也可以自己写代码测试，这里我只是提一下而已。

最后要提的是，微软真的很厉害，现在大家用的box-sizing: border-box;其实就是IE的quirks模式啊～

几个demo地址：

http://www.linxz.de/demo/box%20model/box%20model.html

http://www.linxz.de/demo/box%20model/box%20model%20[padding100].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks][padding100].html

http://www.linxz.de/demo/box%20model/box-sizing%20[border-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[content-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[padding-box].html

demo就这几个，具体的效果就不一一罗列，IE呢如果支持box-sizing的话效果应该是有的，如果不支持那就肯定无视了，采用标准模式，因为代码第一行是采用标准的doctype声明。

需要说明的是，box-sizing: padding-box;在PC端FF里测试过是OK的，其他效果又兴趣的同学请自测。

网络上一点点的参考资料

这些资料在谷哥上搜索box model会出来很多，我就随便取了排在前面的几个，又兴趣的可以看看，看不懂的请找度娘来协助翻译。

http://www.w3.org/TR/CSS2/box.html

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

http://css-tricks.com/the-css-box-model/

http://css-tricks.com/box-sizing/

http://quirksmode.org/css/user-interface/boxsizing.html

最后

盒模型虽然现在很少遇到quirks模式，不过在IE10之类浏览器中还是可以选择相对应的文档模式的，稍微了解一下也总是可以的。就算不去了解这个，那就知道一下box-sizing这个也可以。

很不负责的废话完毕，发觉现在真的没有以前那股冲劲了，看着博客上好久没更新跟技术有关的东西，又怕对不起这个易联主机和linxz.de域名，就稍微折腾一点吧。

五花肉妹子说，这个博客要更新啊，所以我就把前几天的东西搬到这里来了，不知道会不会被人喷~！好怕~！

专线服务 服务器托管 被遗忘 查一下域名是否被墙 服务器内容似乎已过时 公司用阿里云服务器需要扯专线吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110831.html

相关文章

  • 深度解析LSTM神经网络的设计原理

    摘要：而从数学上看的话，更是短时记忆了，因为梯度流经的时候，经历的是的连环相乘的路径在输入输出门关闭前，显然如前边的数学证明中所述，这样会发生梯度爆炸和 引人入胜的开篇：想要搞清楚LSTM中的每个公式的每个细节为什么是这样子设计吗？想知道simple RNN是如何一步步的走向了LSTM吗？觉得LSTM的工作机制看不透？恭喜你打开了正确的文章！ 前方核弹级高能预警！本文信息量非常大，文章长且思维连贯...

    jay_tian 评论0 收藏0

  • 如果你还没搞懂LSTM 网络，那本文绝对值得一看

    摘要：有能力对元胞状态添加或者删除信息，这种能力通过一种叫门的结构来控制。一个有个这种门，来保护和控制元胞状态。输出将会基于目前的元胞状态，并且会加入一些过滤。同时也将元胞状态和隐状态合并，同时引入其他的一些变化。 循环神经网络(RNN)人们的每次思考并不都是从零开始的。比如说你在阅读这篇文章时，你基于对前面的文字的理解来理解你目前阅读到的文字，而不是每读到一个文字时，都抛弃掉前面的思考，从头开始...

    shadowbook 评论0 收藏0

  • 神奇！只有遗忘门的LSTM性能优于标准LSTM

    摘要：本论文研究只有遗忘门的话会怎样，并提出了，实验表明该模型的性能优于标准。这里我们发现，一个只有遗忘门且带有偏置项的版本不仅能节省计算成本，而且在多个基准数据集上的性能优于标准，能与一些当下较好的模型竞争。 本论文研究 LSTM 只有遗忘门的话会怎样，并提出了 JANET，实验表明该模型的性能优于标准 LSTM。1.介绍优秀的工程师确保其设计是实用的。目前我们已经知道解决序列分析问题较好的方式...

    Arno 评论0 收藏0

  • CSS中盒模型的理解

    摘要：如图为了方便大家理解和尝试，我写了一个小放上来方便大家尝试显示盒模型盒模型计算规则元素框的总宽度元素的的左边距和右边距的值的左边距和右边距的值的左右宽度元素框的总高度元素的的上下边距的值的上下边距的值的上下宽度。今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完...

    shmily 评论0 收藏0

  • SegmentFault 社区访谈 | Linxz：只会写 CSS 不会写 JS 的“伪”前端

    摘要：所以，现在的我是一个只会不会写的伪前端。技术升华环节如何理解你的微博简介一个只会写不会写的伪前端工程师你觉得和学习起来各有什么难点呢微博我好久没去碰了，其实现在应该是写一个连都不会写，更不会写的伪前端工程师。 showImg(https://segmentfault.com/img/bVT0Y4?w=900&h=385); 上周没和大家见面，是去邀请大佬来访谈了(///▽///)社区访...

    libxd 评论0 收藏0

发表评论

登陆后可评论

0条评论

Barry_Ng

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<