盒子模型

盒子模型
盒子模型
一、div盒子分为四层，从内到外分别为：
1.边界(margin)
2.边框(border)
3.填充(padding)
4.内容(content)
margin（外间距）：盒子和其他元素之间的距离，用来控制元素间的间隙，不会撑大盒子本身
背景颜色会应用到除了margin之外的所有区域
border（边框）：盒子的可见边界，可实现粗细，样式（实线虚线），颜色，也会撑犬盒子padding（内边距）：内容区和边框之间的距离，用来给内容留空院，会撑大盒子可视大小context（内容区）：存放元素的实际内容（文字，图片，按钮等)
指定width和height就是指定context内容区的尺寸
二、边界，边框和内容都有四个方向，从顶部开始顺时针依次是right, width, left
三、屋性(mariain)(border)(padding)后面属性值一共有四种写法
①：一个值代表四个方向
②：两值：第一个值是上下，第二个值是左右
③：三值：一上，二左右，三下
②：四值：一上，二右，三下，四方