CSS篇-面试题1-画一下盒子模型

画一下盒子模型

它是所有布局控制的基础,虽然如今的前端是组件化开发模式

组件是一种对html 元素数据的封装,对原生 html标签元素的一种拓展,但底层核心依旧依赖DIV+CSS

盒子模型分为两种:标准盒模型(w3c 标准)和非标准盒模型(IE 传统/怪异盒模型)

共同点: 都是决定html标签元素在浏览器中如何进行布局,怎么显示,都是对元素计算尺寸的模型,拥有对html元素width,height,padding,border以及元素实际尺寸的计算关系

不同点:它们主要的区别在于元素的计算方式不同

标准盒模型(w3c 标准盒模型):一个盒模型包括 4 个区,分别是内框,内边距,边框,外边距,在指定一个元素的大小时,就是根据盒模型中的各个部分的大小来决定的

• 内盒尺寸计算

元素大小:宽度 = 内容宽度+内边距+边框(width = width+padding-left+padding-right+border-left+border-right)

元素大小:高度 = 内容高度+内边距+边框(height = height+padding-top+padding-bottom+border-top+border-bottom)

• 外盒尺寸计算

元素空间宽度 = 内容宽度+内边距+边框+外边距(width = width+padding(左右内边距)+border(左右边框)+margin(左右外边距)

元素空间高度 = 内容高度+内边距+边框+外边距(height = height+padding(上下内边距)+border(上下边框)+margin(上下外边距))

IE 传统/怪异盒模型

• 内盒尺寸计算元素大小: 宽度 = 内容宽度(width 包含了元素的宽度+边框+内边距元素大小：高度 = 内容高度(height 包含了元素的高度+边框+内边距)
• 外盒尺寸计算

元素空间宽度 = 内容宽度+外边距(width 包含了元素的内容宽度,边框+内边距)元素空间高度 = 内容高度+外边距(height 包含了元素的内容高度,边框+内边距)

综上所述: 在标准盒模型中,元素的宽度和高度仅仅包含内容的宽度,高度(不包含边框和内边距两个区域),而在怪异盒模型(IE 盒模型),元素的的宽度,高度含了边框,内边距

这样给 web 开发人员带来了很多麻烦

无论是哪种模型情况，最终都会触发标准盒模式

解决办法:在 css3 中增加了一个盒模型属性 box-sizing,它能够事件定义盒模型的尺寸解析方式,也就是可以通过属性值来决定盒子元素的计算方式,属性值有四个

box-sizing: content-box | border-box | inherit | padding-box

• content-box: 默认值,元素保持 w3c 标准盒模型,元素的宽度和高度(width/height)等于元素的边框宽度(border)+元素的内边距(padding)+元素的内容宽度或高度(content width/height)即(border 和padding 不算到width范围内)
• border-box:让元素变为 IE 怪异盒模型,元素的宽度或高度等于元素内容的宽度或高度,这里的内容宽度或高包含了元素的border,padding的内容的宽度或高度(即 border 和padding 划归到 width 范围内)
• inherit:此值会使元素继承父元素的盒模型模式
• padding-box:用来指定元素的宽度或高度包含内容的宽度或高度和内边距,但不包括边框宽度(将 padding算入width 范围)

总之,当设置为box-sizing:content-box时，将采用标准模式解析计算,当设置为box-sizing:border-box时,将采用怪异模式解析计算

box-sizing:主要用来控制元素的盒模型的解析模式,主要目的是控制元素的总宽度,标准盒模型中,默认就是content-box

设置属性box-sizing:border-box时,给元素添加边框(border)和内边距(padding),都不会影响元素盒子的总尺寸，也就是不会把盒子溢出,不会影响布局,这个在移动端布局时,经常用

而在标准盒模型下,一旦修改了元素的边框和内边距,就会影响元素的盒子尺寸,不得不重新计算元素的盒子尺寸大小,会影响到整个页面的布局