CSS盒子模型的理解
2013-08-07 15:24
190 查看
概念:每个HTML标记都可看作一个盒子
盒子尺寸的计算:total width = left margin + left border + left padding + width + right padding + right border + right margin; total height =top margin + top border + top padding +height + bottom padding + bottom border + bottom margin.
CSS盒子模型主要适用于块级元素。
心得:了解盒子模型(box model)的概念,了解它是如何决定某一个元素的最终尺寸,有助于理解一个元素如何在网页上定位的。
推介:CSS-box(适合CSS初学者)
CSS盒子模式具备的属性: | |
---|---|
内容(content) | 盒子里装的东西 |
填充(padding) | 怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料 |
边框(border) | 盒子本身 |
边界(margin) | 盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。 |
CSS盒子模型主要适用于块级元素。
心得:了解盒子模型(box model)的概念,了解它是如何决定某一个元素的最终尺寸,有助于理解一个元素如何在网页上定位的。
推介:CSS-box(适合CSS初学者)