申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
返回贴子列表
发表新贴
主题：
CSS盒子模型的深入解读
共有
1399
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108000
发贴等级：
21
发贴数：1156
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2019/10/30 17:40:00
楼 主
CSS盒子模型的深入解读
本文章适合初级
网站制作
的web设计朋友，让你对盒子模型有更近一步的理解。建议阅读这篇文章之前你应该对盒子模型html等基础知识是有一定的了解，否则会让你更加云里雾里。本文章更多的是教你在实战过程中如何自如的控制盒子的宽度，如何用最恰当的方法定位盒子，如何解决IE中盒子的种种bug，不会像很多的中文教程那样，把盒子模型内边距，外边距，如何定位等概念有条不紊的介绍一遍。
之所以翻译这篇外国文章，是因为
青岛网站建设
的程序员在学习的过程中也发现，国外的教程和过内的相比，它们授人以渔，更授人以鱼。不同于国内教程有章有节有点有条目，他们的叙述方式更接近谈话式的由浅入深……总而言之，目的在于给更多的初学者提供一点启示和帮助，不必像我一样走了许多弯路。
深入理解CSS盒子模型（TheCSSBoxModel）
如果你了解盒子模型（boxmodel）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助你理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inlinelayoutmodel）——定义了行内元素是如何定位的，在行内元素格式（InlineFormatting）中有具体说明
盒子的尺寸的计算（CalculatingBoxDimensions）
在CSS2.1中，块级元素只能是矩形形状的。当我们需要计算一个块级元素的整体尺寸时，需要同时把内容区域（contentarea）［注释1］的长宽，连同此元素的外边距，内边距，以及边框都计算在内
［注释1］：此文章中频繁提到content和contentarea这两个概念，虽然从字面上都可以理解为盒子中的内容区域（content），但从后文的叙述来看，这两个概念还是有区别的，到这篇文章发布为止，我还是对这两者的区别有迷惑，希望有兴趣阅读原文的朋友能留言告诉我这两者的区别，以便于我更正文中的错误。
我们可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动（auto）
w3schools上对于盒子模型的图示如下
在图的下方有一段很重要的话Important：WhenyouspecifythewidthandheightpropertiesofanelementwithCSS，youarejustsettingthewidthandheightofthecontentarea.也就是说当我们在css中设计一个块级元素的width和height属性时比如.box{width：100px;height:100px}时，其中的width和height仅仅是对content部分设置的，即定义上图中padding下虚线方框内区域的长和宽。而不是内容，内边距，边框的总和（但在IE的早期版本包括IE6中，盒子模型的width和height却恰恰是这样定义的，尽管符合人们思考的逻辑，但是不符合规范，这会造成严重的问题）
对宽度为自动状态的静态（static）定位元素（即无定位），和相对定位（relativelypositioned）元素来说，计算宽度的方法是，将他们包含块（containingblock）［注释2］的宽度减去此元素的横向的所有外边距，内边距，边框，滚动条。也就是说，从包含块的宽度中除去元素的横向外边距，内边距，边框，滚动条（如果存在的话）的宽度，所剩的值就是了。
［注释2］：包含块（containingblock）。如果你知道绝对定位和相对定位的实现原理的话，这个注释可以忽略。包含块可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，内部元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。例如在绝对定位中，距离它最近的已定位（position为fixed，relative或absolute）的祖先元素即为包含块。这算比较初级的概念，不深究，请百度。
包含块的定位属性和尺寸被作为后代元素定位和尺寸计算的参考。尽管元素的定位必须遵从与他们的块级元素来进行定位，但是他们也非受限于它。后代的元素也可以溢出包含块。在大多数情况下，generatedboxes［注释3］通常扮演着子代元素包含块的角色。想要充分了解包含块的大量细节信息请点击ContainingBlock。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
