企业网站提供商,网站风格,wordpress 附件搜索,网页制作基础教程简介前言
CSS 盒模型是 CSS 基础的重点难点#xff0c;因此常被面试官们拿来考察候选人对前端基础的掌握程度#xff0c;这篇文章将对 CSS 盒模型知识点进行全面的梳理。
我们先看个例子#xff1a;下面的 div 元素的总宽度是多少呢#xff1f;
js
!DOCTYPE html
因此常被面试官们拿来考察候选人对前端基础的掌握程度这篇文章将对 CSS 盒模型知识点进行全面的梳理。
我们先看个例子下面的 div 元素的总宽度是多少呢
js
!DOCTYPE html
html
head
meta charsetutf-8 titleCSS 盒模型(https://github.com/webharry/fe-interview)/title
style
div {background-color: lightgrey;width: 200px;border: 10px solid yellow;padding: 10px;margin: 20px;
}
/style
/head
bodydiv这里是盒子内的实际内容。有 10px 内间距20px 外间距、10px 黄色边框。/div
/body
/html
要回答这个问题我们首先得弄明白 CSS 盒模型。
什么是 CSS 盒模型
每个HTML元素都由一个矩形框盒子组成称为盒模型。CSS 盒模型定义了一个 HTML 元素的尺寸和边距。
盒模型的各个部分
CSS 中组成一个盒子需要
Content box: 这个区域是用来显示内容大小可以通过设置 width 和 height。Padding box: 包围在内容区域外部的空白区域大小通过 padding 相关属性设置。Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。Margin box: 这是最外面的区域是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
如图所示 CSS 有两种盒模型标准盒模型和IE盒模型。
标准盒模型元素的宽度和高度只包括内容content不包括内边距padding、边框border和外边距margin。IE盒模型元素的宽度和高度包括内容content、内边距padding和边框border但不包括外边距margin。
两种盒模型的区别是什么
这两种盒模型的区别在于它们如何计算元素的宽度和高度以及如何处理元素的内边距、边框和外边距。
在标准盒模型中元素的宽度和高度只包括内容因此设置宽度和高度时需要考虑内边距、边框和外边距对它们的影响。 如图 而在IE盒模型中元素的宽度和高度包括内边距和边框因此设置宽度和高度时不需要考虑内边距和边框对它们的影响。 如图
重要: 当您指定一个 CSS 元素的宽度width和高度height属性时你只是设置内容区域content的宽度和高度。
两种盒模型间如何转换
可以通过设置 CSS 的 box-sizing 属性来指定使用哪种盒模型。默认情况下box-sizing 属性的值为 content-box即使用标准盒模型。可以将其设置为 border-box即使用IE盒模型。
写在最后
现在我们再来看文章开头的例子答案显而易见。因为在默认情况下box-sizing 属性的值为 content-box即使用标准盒模型。所以例子中的 div 元素总宽度是 20010x210x2240px。 大厂面试题分享 面试题库
前后端面试题库 面试必备 推荐★★★★★
地址前端面试题库 web前端面试题库 VS java后端面试题库大全
