150-1924-0507

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

2019年08月03日 16:58  千赋科技 

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

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

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

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

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

css盒子模型

  元素的宽度就是内容宽度(width = content的宽度),元素的高度就是内容高度(height = content的高度)。

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

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

css盒子模型的理解

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

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

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

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


标签 :css盒子模型
上一篇 企业是否需要单独的手机网站建设?
下一篇 关于建站,你需要了解的

声明:本文内容由深圳市千赋科技有限公司原创或者通过网络收集编辑所得,所有资料仅供用户参考;对收集的资料本站不拥有所有权,也不承担相关法律责任。如您认为本网页中有涉嫌侵权的内容,请及时与我们联系,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。

相关文章 Related articles
服务热线

150-1924-0507

网站建设公司 www.2185.org 粤ICP备15080528号-1

Copyright© 2008-2019 深圳市千赋科技有限公司 版权所有