资讯专栏INFORMATION COLUMN

【HTML/CSS】什么是盒子模型

syoya / 2154人阅读

摘要:盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。网页设计中常听的属性名内容内边距边框外边距,盒子模式都具备这些属性。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin),CSS盒子模式都具备这些属性。
盒模型一共有2种模式

符合W3C标准的标准盒模型


标准盒子的长宽 = content的长宽

在IE下的怪异盒模型


怪异盒子的长宽 = content的长宽+ padding + border

在html的首部,我们经常会看到一个的声明,浏览器根据这个声明来判断这个文件是什么类型的,并根据这来判断怎么解析文件。

当我们写了的声明的时候,无论在哪种内核的浏览器下盒子模型都会被解析为标准盒模型

当我们没写声明或声明丢失的时候,部分有IE内核的浏览器则会触发怪异模型(IE6,7,8)

在CSS3中我们可以通过设置box-sizing的属性来完成标准或者怪异模式之间的切换
(1)box-sizing : content-box 采用标准模式 也是默认样式
(2)box-sizing: border-box 采用怪异模式

以上就是我对盒子模型的理解,如有异议欢迎评论留言。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53864.html

相关文章

  • HTML/CSS什么盒子模型

    摘要:盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。网页设计中常听的属性名内容内边距边框外边距,盒子模式都具备这些属性。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin),CSS盒子模式都具备这些属性。 盒模型一共有2种模式 符合W3C标...

    Acceml 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    iOS122 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    HackerShell 评论0 收藏0
  • HTML+CSS复习之CSS基础篇

    摘要:内容简述关于,确实太繁杂了,内容多。写好不易,基本上就这个调了。里面有许多属性是可以继承的,注意了,继承一定是继承父级元素的样式在这里我就列出可以继承的属性,和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。 内容简述 关于CSS,确实太繁杂了,内容多。写好不易,基本上就这个调了。大家肯定听过CSS奇淫技巧吧,关于这个我还没有去深入了解,只是说普通的效果啥的,我...

    Salamander 评论0 收藏0
  • 前端面试题 -- HTML+CSS

    摘要:内核原为,现为内核,等。但盒子的大小由这几部分决定是一个属性,与盒子模型有着密切联系。 前言 貌似又到了一年一度跑路跳槽的时刻,由于个人的一些原因最近也参加了很多面试,发现有很多基础性的东西掌握程度还是不够,故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西,留给自己消化,也分享给有需要的小伙伴 GitHub完整版面试题,欢迎小伙伴们star关注 如果文章中有出现纰漏、错误之处...

    shiina 评论0 收藏0

发表评论

0条评论

syoya

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<