W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括其中,列表,标题,图片以及层。,经常会搞清楚边距,背景色,背景图像,边距,内容,边界之类的区域:内容(内容),内边距(填充),边界(边框)和外边距(边距)。之之间的层次,关系和相互影响。这里提供一张盒式模型的3D示意图,希望能够您的理解和记忆。
margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白
boreder:边框
content:内容
接下来将成为HTML和CSS的关键-盒子模型(盒子模型)。理解盒子模型的关键便是margin和padding属性,而正确理解这两个属性也是学习用c布局的关键。
注:为什么不翻译margin和padding?
原因一:在汉语中并没有与之相对应的前提;
原因二:甚至有这样的做法,由于在编写css代码时,必须使用margin和padding,如果我们总用汉语单词代替其来解释的话,到了实际应用时容易发生margin和padding的概念。
如果有一点Html基础的话,就应该了解一些基本元素(元素),如p,h1〜h6,br,div,li,ul,img等。如果将这些元素细分,又可以分别为顶级(top- level)元素,块级(block-level)元素和内联(inline)元素。
块级元素是构成一个HTML的主要和关键元素,而任意一个块级元素均可以用Box model来解释说明。
Box型号:任意一个块级元素均由内容(内容),padding,background(包括背景颜色和图片),border(边框),边距五个部分组成。
立体图如下:
平面图如下:
根据以上两图,相信大家对于Box model有个直观的认识。
以下说明margin和padding属性:
1,页边距:包括上页边距,上页边距右,下页边距,左页边距,控制块级元素之间的距离,它们是透明不可见的。根据上,右,下,,左的顺时针规则,可以写为margin:40px 40px 40px 40px;
为方便记忆,请参考下图:
当上下,左右边距值分别一致,可简写为:
边距:40px 40px;
前一个40px代表上下边距值,后一个40px代表左右边距值。
当上下左右margin值均一致,可简写为:
边距:40px;
2,填充:包括顶部填充,顶部填充,底部填充,顶部填充,控制块级元素内部,内容与边界之间的距离,其代码,简写请参考边距属性的写法。
至此,我们已经基本了解边缘和填充属性的基本用法。但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与边缘有关。
注:当你想让两个元素的内容在垂直方向(垂直)分隔时,既可以选择padding-top / bottom,也可以选择margin-top / bottom,再此无情的建议您尝试使用padding-top / bottom来达到你的目的,这是因为css中存在塌陷(折叠的margins)的现象。
边际折叠:边际折叠现象仅存在于之上或有从属关系的元素,垂直方向的边距中。
详细说明如下:
如果只提供一个,将用于全部的四条边;
如果提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
body {padding:36px;} //对象四边的补丁边距放置36px
正文{padding:36px 24px; } //上下两边的补丁边距为36px,左右两边的补丁边距为24px
正文{padding:36px 24px 18px; } //上,下两边的补丁边距分别为36px,18px,左右两边的补丁边距为24px
正文{padding:36px 24px 18px 12px; } //上,右,下,左补丁边距分别为36px,24px,18px,12px