20180821面试题_1(CSS盒子模型 )

最新推荐文章于 2025-03-03 17:40:16 发布
最新推荐文章于 2025-03-03 17:40:16 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： java基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ademen/article/details/81915931
版权
本文详细介绍了CSS盒子模型的五个核心属性：width、height、padding、border和margin，并解释了它们的作用。此外，还探讨了如何通过box-sizing属性来切换不同的盒模型类型。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS盒子模型
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

TODO
经典盒子模型
https://blog.youkuaiyun.com/zwkkkk1/article/details/79678177
CSS3中几个新增加的盒模型属性使用教程
https://www.jb51.net/css/435232.html
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
深入理解 CSS3 弹性盒布局模型
https://www.cnblogs.com/wyaocn/p/5813477.html

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
  box-sizing: content-box 是W3C盒子模型 （width指content部分的宽度）
  box-sizing: border-box 是IE盒子模型 （width表示content+padding+border这三个部分的宽度）
box-sizing的默认属性是content-box

2024 高频前端面试题汇总之CSS篇（一）
Web面试那些事儿的博客
05-22 1054
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
css使两个盒子并列_CSS常见面试题
weixin_39611546的博客
10-21 2041
阅读本文约需要9分钟大家好，我是小蔡，接下来开始今天的技术分享！上段时间跟大家分享了Vue 之响应式系统的知识，今天跟大家分享下CSS常见面试题的知识。1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padd...
CSS+盒模型,css盒模型面试题,HTML源码.zip
10-15
CSS+盒模型,css盒模型面试题,HTML源码
前端面试题之CSS盒模型
热门推荐
simeng-han的博客
11-10 1万+
前端面试对于CSS这块不可或缺的一个考察点就是盒模型（BOX），通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点，不足指出请指出改正。 首先，最基础的问题–什么是盒模型？ 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（pa...
前端面试自用知识库-CSS【完结】
最新发布
q2086155836的博客
03-03 1059
传统的项目开发中，我们只会用到pxem这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了remvhvwvm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em, 相对根节点html。
面试题：介绍一下 CSS 的盒子模型
weixin_45242865的博客
08-23 5116
1、盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2、类型：IE 盒子模型、标准 W3C 盒子模型 3、标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容（content ）+ 内边距（padding ）+ 边框（border）。 4、设置盒模型的方式是：设置 box-sizing   ① box-sizing:content-box 标准盒模型   ② box-sizing:border-box I
前端面试题——CSS盒模型
WoeGod的博客
05-06 427
题目：谈谈你对CSS盒模型的认识 基本概念：标准模型 + IE模型 标准模型和IE模型的区别 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 标准模型 标准盒子实际宽 width = content +margin+padding+border IE模型 IE盒子的实际宽 width = content+margin CSS如何设置两种模型 box-sizing:concen...
前端开发面试题—CSS盒子模型
黛琳ghz的博客，期待你的关注。
09-05 1781
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。所有HTML元素可以看作是一个盒子（特别是块级元素），在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
前端 50 道面试题及答案：CSS盒子模型和选择器详解
标准的CSS盒子模型包括内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）四个部分。 标准的CSS盒子模型中，元素的宽度和高度是由内容区域、内边距区域、边框区域和外边距区域...
前端面试题及答案：CSS盒子模型与选择器详解
The CSS box model is a fundamental concept in web design that defines the structure of an HTML element. The standard CSS box model consists of content, padding, border, and margin. The width of an ...
前端面试题系列——css盒子模型
m0_66333916的博客
05-11 1872
css盒子模型 css盒子模型就是用来装页面上的匀速的矩形区域，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 标准W3C盒子模型：包括 margin、border、padding、content组成，并且content部分不包含其他部分 IE盒子模型：包括 margin、border、padding、content组成，和标准的W3C盒子模型不同的是，IE盒模型的content部分包含了border和padding。 两者的区别： 从图中我们可以看出，这两种盒子模型最主要的区别就
css面试题：解释一下盒子模型
weixin_44914088的博客
02-28 353
盒子模型有两种：一种是W3C标准盒子模型，另一种是IE怪异盒子模型。 但无论是哪种模型，从外到内的顺序都是：margin(外边距) —>border(边框) —>padding(内边距) —>content(内容)，如图： 但在W3C标准盒子模型中：盒子的height(高)、width(宽)都是由content(内容)决定的，如图 ： 在IE怪异盒子模型中，盒子的height(高)、width(宽)是由border、padding、content一起决定的，如图：
CSS -- 盒子模型（含前端面试题）
qq_48802092的博客
07-22 710
说一说盒子模型？区别？ 1.盒子种类： 1.w3c盒子/内容盒子/标准盒子 box-sizing:content-box 2.边框盒子 IE盒子 怪异盒子 box-sizing:border-box
面试之盒模型
L666Q的博客
12-28 219
盒模型有两种，一种是W3C标准盒模型，另外一种是IE盒模型，用两张图说一下两种盒模型的区别吧！ 从图片上可以看出，标准盒模型width和height只是内容的width和height，而IE盒模型的width和height包括content + padding +border 在css中可以设置： *{ border-sizing:content-box;//设置标准盒模型...
常见的面试题--CSS盒模型
包磊磊的博客
04-11 1383
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型 1.1 W3C盒子模型(标准盒模型) 1.2 IE盒子模型(怪异盒模型) 二、知识点 2.1 标准模型和IE模型的区别 计算宽度和高度的不同。 标准盒模型：盒子总宽度...
前端面试题CSS-盒子模型
zhenzhenzhen1705的博客
03-23 299
三种盒子模型 1.标准盒子模型 css对应的属性：box-sizing：content-box 设置的元素大小是内容的大小，不是盒子的大小 盒子的大小 = content + padding + border + margin 2.IE盒子模型（怪异盒子模型 ） css对应的属性：box-sizing：border-box 设置的元素大小是 content + padding + border 盒子的大小 = 设置元素大小（content + padding + border） + m.
面试题:盒模型
2301_77168272的博客
09-18 153
行内元素的 padding 和 margin 属性只能定义左右方向的值，不能定义上下方向的值，因为行内元素的高度由文字的大小决定。可以使用 border-top-width、border-right-width、border-bottom-width 和 border-left-width 这四个属性分别控制四个方向的边框大小。box-sizing 属性用来控制元素的盒模型计算方式，有三个取值：content-box，border-box 和 padding-box。
web前端－CSS 盒子模型－010
helloMr_wo的博客
10-09 590
CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框
前端面试题HTML+CSS基础篇——css盒模型
xiaomao_wxj的博客
08-01 287
前端面试题HTML+CSS基础篇——css盒模型 1. 什么是css盒模型 css盒模型就是用来装页面上元素的矩形区域，css盒模型包括IE盒模型和标准的W3C盒模型 2. IE盒模型和标准盒模型 IE盒模型和标准盒模型的区别在于盒子的实际宽度和实际高度不同 IE盒模型中盒子的宽度=左右padding+左右border+contentWidth（内容的实际宽度） IE盒模型中盒子的高度=上下padding+上下border+contentHeight（内容的实际高度） 标准盒模型中盒子的宽度=content
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值