青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
 返回贴子列表
发表新贴
主题:

CSS盒子模型的深入解读

共有32人浏览过本贴
奈薇建站网
昵称:奈薇建站网
论坛积分:127020
发贴等级:22


发贴数:963
回贴数:1282
被砸鸡蛋:被砸鸡蛋1
获赠鲜花:获赠鲜花163
发表时间: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 上一页 / 下一页   当前第
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
155个月 21