最近,想设计一个web界面,就了解 下Css 盒子模型。
Css盒子模型有什么用处吗?Css 框架模型(Box Model)主要是规定元素框,处理元素内容,内边距,外边距和边框的方式。
由图看出:
元素最内部的是实际内容(Content).
直接包容内容的是内边框(Padding).
内边距的边缘是边框(border).
边框以外的是外边距(margin).
提示:背景应用于内容,内边框,边框所组成的区域。
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
我们看一个实例:
假设框的每一个边上有10个像素外边距,5个像素内边距。现在我们要设置元素框达到100个像素,那么内容的宽度设置为70像素。
如图:
今天就了解到这里,后面再深入了解。