CSS之盒模型

·  阅读 106
CSS之盒模型

「这是我参与11月更文挑战的第十二天,活动详情查看:2021最后一次更文挑战」。

前言

盒模型相信大家对于这个概念非常是熟悉了,我们的排版以及样式都是在这个基础上进行的,所以掌握好它,才能让我们自己的编程技术更进一步,尤其是在根据UI同事的设计图的比例来固定我们的宽高时,有时候总会发现,他多了那么一块,看起来和原型图的怎么不一样啊,这就是在不同的盒模型下,width不一定等于width,他可能还包括边距以及边框。

学会今天我们说的盒模型,相信你在接下来面对ui的设计图的时候,肯定会变得游刃有余了。

盒模型

  • 一种网页的设计模式,把网页看成是一个盒子。

组成

盒模型由四部分组成:

box = margin + border + padding + content

其中,除content属性外,margin、border和padding都有left、right、top和bottom四个属性。

  • margin:外边距,盒子的外部区域,可以通过它设置相邻盒子间的距离。

  • padding:内边距,盒子的内部区域,可以通过它设置content和border的距离。

  • border:边框,盒子的边框。

  • content:内容。

标准盒模型和怪异盒模型

由于历史的原因,盒模型分为标准盒模型和怪异盒模型。可以通过box-sizing属性来声明盒模型的类型。

  • content-box:标准盒模型(默认)。

  • border-box:怪异盒模型。

标准盒模型

标准盒模型是w3c的规范,由margin + border + padding + content组成,和上文提到的公式一样。

盒子的尺寸计算公式:

  • 横向:margin-[left/right] + padding-[left/right] + border-[left/right] + width

  • 纵向:margin-[top/bottom] + padding-[top/bottom]  + border-[top/bottom]+ height

  • width = width

  • height = height

怪异盒模型

怪异盒模型是IE的标准,有margin+content组成,与上述提到的公式一不同。

盒子的尺寸计算公式如下:

  • 横向:margin-[left/right] + width(border-[left/right]和padding-[left/right])

  • 纵向:margin-[top/bottom] + height(border-[top/bottom]和padding-[top/bottom])

  • 横向:width = border + padding + width

  • 纵向:height = border + padding + height

区别

  • 标准盒模型的的width/height只包含content,不包含margin和padding。盒子的width/height包含border、padding和content。

好,今天就到这里了,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!

分类:
前端
标签: