css面试题：解释一下盒子模型

最新推荐文章于 2024-05-22 19:36:03 发布
最新推荐文章于 2024-05-22 19:36:03 发布
阅读量298 收藏 1
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44914088/article/details/123195278
版权

盒子模型有两种：一种是W3C标准盒子模型，另一种是IE怪异盒子模型。

但无论是哪种模型，从外到内的顺序都是：margin(外边距) —>border(边框) —>padding(内边距) —>content(内容)，如图：

但在W3C标准盒子模型中：盒子的height(高)、width(宽)都是由content(内容)决定的，如图 ：

在IE怪异盒子模型中，盒子的height(高)、width(宽)是由border、padding、content一起决定的，如图：

武陵人捕鱼为业~~~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端开发面试题–htmlcss篇
01-20
1.说一下盒子模型 1.1 标准盒模型（默认值） box-sizing: content-box ：宽和高代表的仅仅是盒子内容，特点是给盒子加边框和内边距会撑大盒子 盒子的总宽度= width+padding+border+margin（高度同理） 1.2 怪异盒模型（ie浏览器默认的盒子模型） box-sizing: border-box：宽和高代表的是盒子的content+padding+border，给盒子加边框和内边距不会撑大盒子（前提是内边距和边框不会超过盒子宽度） 盒子的总宽度=width+margin（高度同理） 1.3 弹性盒模型（flex布局） 是当前页面需要适应不同的屏幕大
50道CSS基础面试题
05-23
50道CSS基础面试题（附答案） 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 2 box-sizing属性？ 3 CSS选择器有哪些？哪些属性可以继承？
CSS基础知识面试题
11-08
50道CSS基础面试题（附答案），CSS的盒子模型，选择器，伪类、优先级、居中等等
面试问题——什么是盒子模型
小柠檬爱编程
06-10 1814
什么是盒子模型？前端面试的时候还是经常会被问到的，那首先就需要深刻理解什么是盒子模型，才能精准的表达出面试官想要的答案，盒子模型是css3新特性。具有以下特性 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型 盒子模型有两种形式：标准盒子模型，怪异盒子模型 两种模式可以利用box-sizing属性进行自行选择： 　　标准模式：box-sizing:content-box; 　　怪异模式：box-sizing:border-bo.
前端面试题系列——css盒子模型
m0_66333916的博客
05-11 1715
css盒子模型 css盒子模型就是用来装页面上的匀速的矩形区域，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 标准W3C盒子模型：包括 margin、border、padding、content组成，并且content部分不包含其他部分 IE盒子模型：包括 margin、border、padding、content组成，和标准的W3C盒子模型不同的是，IE盒模型的content部分包含了border和padding。 两者的区别： 从图中我们可以看出，这两种盒子模型最主要的区别就
CSS面试题整理汇总
山雀的博客
03-13 3761
CSS面试题汇总
面试题（一）
Xmengyan的博客
09-08 318
一、盒模型 1、什么是盒子模型？ 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。 2、盒子模型有两种。 （1）标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) （2）怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padd...
css 常见面试题
weixin_44922119的博客
07-27 2912
#box {
【面试题】CSS盒模型
zx1041561837的博客
11-15 160
本文介绍了盒模型的两种类型，盒模型宽高的计算方式，以及offsetWidth的计算。
CSS选择器分类以及盒模型由内到外的结构
m0_65011103的博客
03-27 903
标签选择器 基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；} 所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。 id选择器使用‘#’进行标识，后面紧跟id名。 基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；} 类选择器使用‘.’进行标识，后面紧跟类名。 基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；} 子选择器 子选择器是指定父元素所包含的子元素。子选择
limchen233#Front-Web#07 CSS面试题1
07-25
1.标准盒子模型和IE盒子模型区别 2.水平垂直居中 3.relative/absolute/fixed区别 4.响应式布局 5.页面上有2000个相同的元素要
前端面试题总结.docx
05-31
前端面试笔记总结，html ,css ,html5 ,css3 ,js,vue基础的面试题，HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。
CSS(三)面试题：盒模型+css选择器及优先级+重排和重绘+BFC
wsz123456wsz的博客
09-27 788
css面试的一些问题
前端开发面试题—CSS盒子模型
黛琳ghz的博客，期待你的关注。
09-05 1644
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。所有HTML元素可以看作是一个盒子（特别是块级元素），在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSS盒子模型详解
热门推荐
weixin_46048542的博客
04-05 3万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三
面试题准备（十三）：盒子模型
番茄味姜糖的博客
02-25 1066
介绍了标准盒模型和 IE 盒模型，分析了盒子模型的两个缺陷/bug：margin 塌陷和 margin 合并，并给出了解决办法
css盒模型
A572657111的博客
02-23 603
一.盒模型概念 1.css盒模型是css布局的基石，它定义了如何显示网页元素和元素之间的关系。指定所有元素都可以有类似于盒子和平坦空间的形状。这意味着它包含的内容空间和填充物，边界和边缘，这是盒子模型。下面展示的是盒模型的图例： 2.盒子模型的平面结构图 CSS盒模型由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- botto...
CSS -- 盒子模型（含前端面试题）
qq_48802092的博客
07-22 594
说一说盒子模型？区别？ 1.盒子种类： 1.w3c盒子/内容盒子/标准盒子 box-sizing:content-box 2.边框盒子 IE盒子 怪异盒子 box-sizing:border-box
CSS浮动（CSS从入门到精通学习第四天）
最新发布
m0_49067926的博客
05-22 971
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
html+css面试题
09-09
当面试者的HTML和CSS知识的问题有很多，以下是一些常见的面试题： 1. 解释一下HTML和CSS的作用以及它们之间的区别。 2. 什么是盒子模型？它有哪些组成部分？ 3. 如何在HTML中插入CSS样式？ 4. 请列举几种常见的CSS...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

武陵人捕鱼为业~~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值