前端每日一练,大厂面试题目,涵盖前端所有知识点,每天进步一点点。HTML/CSS/Javascript/Nodejs/Typescript/ECMAScript/Vue/React/Webpack/小程序/网络/设计模式/数据结构/算法/安全/工程化/性能优化
10
stars
4
forks
source link
[2021-02-06 更新] 说一下盒模型的区别?介绍一下标准的css盒模型? border-box和content -box有什么区别? #20
Open
jeddygong opened 3 years ago
盒模型
盒模型是css中的一种基础设计模式,web页面中的所有元素都可以当做一个盒模型,每一个盒模型都是由display, position,float, width, height, margin, padding 和border等属性组合所构成的,不同类型的盒模型会有不一样 的布局,css中 主要有inline, inline- -block, block, table, absolute position, float等类型。
1.1 W3C标准模型和IE的传统模型(IE6以下)
css中的盒模型有两种: W3C标准模型和IE的传统模型,相 同之处是都是对web中元素计算尺寸的模型,不同之 处在于两者的计算方式不同。
w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分,IE盒子模型的 范围包括margin、border、 padding、 content,和w3c盒 子模型不同的是,IE盒子模型的content部分包含了padding和border
1.2 W3C标准模型中元素尺寸的计算方式
1.3 IE的传统模型中元素尺寸的计算方式
1.4 代码实例
1.5 border-box & content- -box
默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度 (border)加上元素内距(padding) 加. 上元素内容宽度或 高度( content width/ height ), 也 就是element width/height = border + padding + content width /height
1.5.2 border-box
重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的 盒模型(IE6以下版本和IE6- -7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知,这里的内容宽度或高度包含了元素的borderpadding、内容的宽度或高度(此处的内容宽度或高度=盒 子的宽度或高度一边框一-内距) 。
Css设置标准模型和IE模型
box-sizing: content-box
box-sizing: border-box