css盒子模型

css盒子模型就是用来装页面上的匀速的矩形区域，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

标准W3C盒子模型：包括 margin、border、padding、content组成，并且content部分不包含其他部分

IE盒子模型：包括 margin、border、padding、content组成，和标准的W3C盒子模型不同的是，IE盒模型的content部分包含了border和padding。

两者的区别：

从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width值content的部分宽度。在IE盒子模型中，width表示 content+padding+border这三个部分的宽度，故这使得在计算盒子模型整个盒子宽度的时候存在着差异；

计算方法：

1、标准盒子模型的宽度计算：左右border+左右padding+width

2、IE盒子模型的宽度计算：width

例子：当一个最初的盒子宽度为500px,高度为500px

1、在标准盒子模型中，设置左右padding为100px，此时盒子大小会变为600px*600px

2、在IE盒子模型中，盒子的宽度和高度还是500px，内容区域缩小

盒模型的转换

在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。

1、box-sizing:content-box; 盒模型设置为w3c标准盒子模型

2、 box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型。

前端面试题系列——css盒子模型相关推荐

前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
2021前端面试题系列：HTTP请求和HTTP缓存控制
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求和HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文 ...
2021前端面试题系列：fetch与axios、浏览器内多个标签页面通信及安全问题
大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:fetch与axios.浏览器内标签页之间的通讯方法.XSS 和CSRF以及如何防范,此方面内容在我们的工作中常用到, 也是 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
面试题：高频前端面试题之CSS篇
目录一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和inline-blo ...
34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...

前端面试题系列——css盒子模型

css盒子模型

两者的区别：

盒模型的转换

前端面试题系列——css盒子模型相关推荐

最新文章

热门文章