前端小白进阶:对css盒子模型的理解

CSS中有一种重要的思维模式那就是盒模型,只有很好的理解了盒模型才能进行更好的页面布局。今天小编就来带领大家看看这个盒模型究竟是什么玩意。

css盒模型一般由四个属性组成,内容(content),内边距(padding),边框(border),外边距(margin)组成。举个列子来说:可以将一个盒子看成装鞋的快递盒子,内容就是你买的具体东西也就是鞋,内边距就是鞋和鞋盒之间空着的区域。

你的鞋不可能整整充满鞋盒吧,边框就像是鞋盒一样,外边距就像是装鞋盒的外层保装一样,这样差不多就理解这些属性了吧。其中这些属性除了内容之外都包括上下左右四个部分,而且这四部分可同时设置,可分别设置。

css盒模型分为两种:标准盒模型和怪异盒模型

标准盒模型(IE6及其更高的版本,还有现在所有主流浏览器都遵循的是W3C标准盒模型)。

前端小白进阶:对css盒子模型的理解-1
元素的宽度就是内容宽度(width = content的宽度),元素的高度就是内容高度(height = content的高度)。

怪异盒模型也叫IE盒模型(IE6及以下版本的浏览器遵循的是IE盒模型)。

在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

前端小白进阶:对css盒子模型的理解-2
在IE模型中css盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

这两种盒模型的差别就在于这里,不要看这里只是小小的区别,等你在具体项目开发中就知道他的烦人之处了,这么烦人的东西肯定有他的解决方法,没错,css3提供了盒子属性box-sizing,它用来设置盒子遵循哪种模型来计算宽高。

他有三个属性值,默认content-box,遵循W3C标准盒模型,还有一个属性值border-box,设置他后将遵循的是IE盒模型,还有一个值是inherit,他将从父元素继承属性值。这就是切换盒模型的方法。

好了,今天关于css盒模型就说到这里,关于盒模型具体的抉择得看项目和开发者的开发习惯,这里也没有个好坏和标准的说法,等以后接触项目多了自然能感受到。下回我们该说说什么东西呢,待小编整理整理发型,活动活动筋骨,我们下回再续。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2466060800@qq.com 举报,一经查实,本站将立刻删除。