css盒模型有哪些属性

CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。

示例代码：

效果图：

由此可见：外边距margin是不可见的，如果设置了父元素的背景，就可以看到;背景色在边框区域设置一个不同的背景，就可以看到内边距(padding)区域。并且盒模型是由margin(外边界)+border(边框)+padding(内边距)+content(内容)构成的。

二、属性介绍

1、margin属性

概念：margin属性应用于盒子外面的空间，或者是位于盒子与文档中其他元素之间的区域，或者是盒子与浏览器窗口之间的区域。margin长在盒子外围的，不会对盒子本身的大小造成影响。

属性：margin-top(上外边界)、margin-right(右外边界)、margin-bottom(下外边界)、margin-left(左外边界)

值：支持length、百分比、auto

用法：

margin:10px 四周(上，右，下，左)

margin:10px 20px 上下 左右

margin:10px 20px 30px 上 左右 下

margin:10px 20px 30px 40px 上右下左

margin支持负值!!

让子元素在父元素里面左右居中：margin:0 auto;

margin常见的bug：

a:当父元素和子元素都没有浮动的情况下：给第一个子元素添加margin-top:会错误的把margin值加在父元素上面

实例代码：

效果图：

结论：当父元素里的第一个子元素(块元素)，添加