标准盒模型和IE盒模型转换box-sizing——前端面试

SONG宋人头

已于 2022-03-31 10:58:22 修改

阅读量1.2k

点赞数

文章标签： javascript 面试

于 2022-03-31 10:51:13 首次发布

本文链接：https://blog.csdn.net/jing2jing2/article/details/123866072

版权

标准和模型和IE盒模型之间的转换可以通过box-sizing设置。

其中，

标准盒模型width = content

IE盒模型width = content+padding+border

Box-sizing属性值	宽高
Content-box	只content （Css2.1规定的宽高行为：即按照以前规定的标准来显示，也就是标准和模型）
Border-box	Content+width+height
Inherit	从父元素继承box-sizing的属性值

参考资料：标准盒模型与IE盒模型之间的转换 - 这算什么艾迪 - 博客园

优惠劵

SONG宋人头

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标准盒模型和IE盒模型转换box-sizing——前端面试

标准盒模型和IE盒模型转换box-sizing——前端面试
复制链接

扫一扫

css3 盒模型以及box-sizing属性全面了解

12-13

在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。在W3C模型中: 总宽度 = margin-...

标准盒模型和IE盒模型的区别及转换

qq_38233172的博客

06-06

2700

标准盒模型是w3c 标准的盒模型，其包含：盒子占用宽度：margin2 + border2 + padding2 + width 实际宽度： border2 + padding2 + width IE盒模型，在IE中content的宽度包括padding和border这两个属性，所以盒子占用宽度：margin2 + width 实际宽度：width = padding + border +...

参与评论您还未登录，请先登录后发表或查看评论

前端面试知识点【CSS篇】

weixin_42491859的博客

04-10

932

CSS 1、垂直水平居中方式知道元素的宽高： absolute + 左上定位50% + margin：负的尺寸的一半 absolute+四周定位0+margin：auto absolute+左上calc定位元素宽高未知： absolute+左上定位50% + transform：-50% flex布局： flex布局+justify-content+align-items <div class="father"> <div class="son">

盒模型、标签分类及转换(1)

GX2581992762的博客

07-20

149

盒子模型

盒模型和元素转换

m0_74801389的博客

02-26

137

盒子实际高度=height+border-top+border-bottom+padding-top+padding-bottom。盒子实际宽度=width+border-left+border-right+padding-left+padding-right。行级元素只能容纳文本或者其他的行级元素（不能再行级元素里面嵌套块级元素）转化为行内块元素：display:inline-block;在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度。在不设置高度的情况下：块级元素的高度是他本身内容的高度。

CSS 盒模型 标准盒模型 IE盒模型

qq_42816270的博客

01-31

1245

CSS 盒模型 标准盒模型 IE盒模型。在IE盒模型中，设置的 width 和 height，包含了 border , padding, content-box 的宽度和高度的和。在标准盒模型，设置的width和height，实际上设置的是 content box 的宽度和高度。加上 padding 和 border 的 width 和 height 构成一个盒子的宽高。

浅谈CSS3 box-sizing 属性有趣的盒模型

12-13

盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽...

关于box-sizing的全面理解

12-13

—恢复内容开始— box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。...border-box ：IE传统标准 content-box: .test1{ box-sizing:content-box; width:200px; padding:10px; borde

详解CSS3中的box-sizing（content-box与border-box）

12-14

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。语法格式： box-sizing：content-...

怪异盒模型与标准盒子的区别与转换

a15103892045的博客

02-24

656

怪异盒模型(老版本IE的盒模型) box-sizing:border-box; 标准盒模型宽度=width(内容区域大小)+padding+border 怪异盒模型计算方式和普通盒模型是不同的

IE盒子模型和标准W3C盒子模型

12-09

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、conte

盒模型、标签分类及转换(2)

GX2581992762的博客

07-20

138

标签

标准盒子模型和怪异盒子模型

weixin_61000863的博客

01-04

766

标准盒子模型和怪异盒子模型

CSS之盒模型（九）

全粘小谭的博客

10-06

663

该文主要讲解了盒子模型属性，标准盒模型与怪异盒模型的区别及转换，以及margin负值的一些特性和规则。

IE盒子模型和标准W3C盒子模型以及如何相互转换

Judy_qiudie

03-11

3925

一、W3C标准盒模型 标准盒模型width只包含content的宽。二、 IE盒模型 IE盒模型的width=border*2+padding*2+content 三、为什么IE盒模型更容易开发？比如要在一个容器里并排显示两个同样的盒子。你用标准模型时肯定会这样设置每个盒子width:50%。再怎么去调整padding都会在两个盒子的内部去调整，不会再影响布局。四、如何...

标准盒模型、IE盒模型以及box-sizing

rambler_designer

08-12

439

一、前言实现一个很常规的功能，鼠标停留出现3个像素的上边框，然而鼠标停留后出现了抖动，审查元素后发现是三个像素撑起了这个元素，将其余元素向下挤，才出现了这个抖动，一个比较常用的解决办法是先给元素一个3像素transparent背景的上边框，鼠标停留在将背景色改为其他颜色。这样就不会撑大元素后来又想起来有个box-sizing，好像也可以做到，于是尝试了一下确实可以，看了一下mdn文档中对于box-sizing的描述, 做一个记录二、正文 CSS 中的 box-sizing 属性定义了 use

标准盒子和IE盒子之间的转换

wjiafengw的博客

10-14

2255

W3C标准盒子模型：height、width ----- 仅指content(默认)，不包括padding和border IE盒模型：height、weight ----包含了 content+padding+border CSS中： box-sizing属性默认值为：content-box(W3C) 可以看到content高30px，但是总体加上p...

标准盒模型和ie盒模型

链珠的博客

11-29

3294

当对一个文档进行布局时，浏览器会对css 基础框盒模型，将所有元素表示为一个个的矩形盒子。一个盒子由content、padding、 border、margin组成。 <style> .box { width: 200px; height: 100px; padding: 20px; background: pink; } </style> .

标准盒子模型和IE盒子模型

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交