当前位置: 首页 > 面试题库 >

说一下你对css盒模型的理解?

臧梓
2023-03-14
本文向大家介绍说一下你对css盒模型的理解?相关面试题,主要包含被问及说一下你对css盒模型的理解?时的应答技巧和注意事项,需要的朋友参考一下

参考回答:

简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值哦):border-box,padding-box,content-box.

标准盒子模型:

IE盒子模型:

 

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

标准盒子模型的盒子宽度:左右border+左右padding+width IE盒子模型的盒子宽度:width

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆,包含什么,width就从什么开始算起。

 类似资料:
  • 本文向大家介绍说说你对css盒子模型的理解相关面试题,主要包含被问及说说你对css盒子模型的理解时的应答技巧和注意事项,需要的朋友参考一下 盒子模型分为ie盒子模型和标准盒子模型 ie盒子模型 padding+content+border border-box 标准盒子模型 content content-box

  • 本文向大家介绍请说下你对css对象模型(CSSOM)的理解相关面试题,主要包含被问及请说下你对css对象模型(CSSOM)的理解时的应答技巧和注意事项,需要的朋友参考一下 CSSOM 是一组允许 JavaScript 操作 CSS 的 API。它非常类似于 DOM,但是用于 CSS 而不是 HTML。它允许用户动态读取和修改 CSS 样式。

  • 本文向大家介绍说说你对低版本IE的盒子模型的理解相关面试题,主要包含被问及说说你对低版本IE的盒子模型的理解时的应答技巧和注意事项,需要的朋友参考一下 低版本的IE盒子指的是 content包含padding和border在内的盒子模型 即content宽高=width/height+padding2+border2 可以通过设置box-sizing:border-box来指定使用IE盒子模型

  • 本文向大家介绍请你说一下黑盒白盒相关面试题,主要包含被问及请你说一下黑盒白盒时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 黑盒测试: 黑盒测试也称功能测试或数据驱动测试,它是在已知产品所应具有的功能,通过测试来检测每个功能是否都能正常使用,在测试时,把程序看作一个不能打开的黑盆子,在完全不考虑程序内部结构和内部特性的情况下,测试者在程序接口进行测试,它只检查程序功能是否按照需求规格说明书

  • 本文向大家介绍简单介绍一下CSS盒模型的理解?相关面试题,主要包含被问及简单介绍一下CSS盒模型的理解?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 当对一个文档进行布局时候,浏览器渲染引擎会根据CSS-box模型,将所有元素表示为一个矩形盒子,CSS决定这些盒子的大小,位置,属性,如图: content包含元素真实内容的区域,由width,height,控制内容大小,内边距paddin

  • 本文向大家介绍介绍一下 CSS 的盒子模型?相关面试题,主要包含被问及介绍一下 CSS 的盒子模型?时的应答技巧和注意事项,需要的朋友参考一下 1)有两种,IE 盒子模型、标准 W3C 盒子模型; IE 的 content 部分包含了 border 和 padding; 2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)。