一、为什么要学习盒子模型
●如果你想尝试-下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV
来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统
的表格排版方式,提高企业竞争力,那么你- -定要接触到的一个知识点就是CSS的盒子模
式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一-的表格和表格嵌套来定位
排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一-的盒子和盒子嵌套来编
排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如
PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS
排版网页的优势远远不只这些
●盒子模型是css中一 个重要的概念,理解了盒子模型才能更好的排版。W3C组建议把网页
上元素看成是一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding).
边框(border)、外边距(margin)。 转换到我们日常生活中,可以拿红酒来对比,红酒=内容,
内边距=盒子中的填充物,边框=盒子的厚度,外边距=两个红酒盒之间的距离。
🌟盒模型主要定义四个区域:内容(content)、内边距(padding).
边框(border)、外边距(margin)。
●CSS盒子模型分为:标准W3C盒子模型, IE盒子模型,注意在两种模型中宽( width )和高
( height )包括属性的不同。
图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距pada
da
其次是达框( border) ,然后最外层是外边距( margin) , 整个构成了框模型。
通常我们设置的背景显示区域,就是内容、内边距、边框这-块范围。而外边距margin是透明的,
不会遮挡周边的其他元素。
那么,元素框的总宽度=元素( element )的width + padding的左边距和右边距的值+
margin的左边距和右边距的值+ border的左右宽度;
元素框的总高度=元素( element )的
height + padding的上下边距的值+ margin的上下边距的值+ border的_上下宽度。
