css 创建盒子（div）

盒子模型--div

一个盒子占据的控件是边框 + 内边距 + 内容区域

Margin:外边距

Width=(margin+border+padding)*2+content

一个盒子中主要的5个属性：width、height、padding、border、margin。

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距”

盒子宽度和高度

一个元素实际宽度

真实占有宽度= 左margin+左border + 左padding + width + 右padding + 右border+右margin

盒子居中margin:0 auto;

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中

TIPs：

1） 使用margin:0 auto; 的盒子，必须有width，有明确的width

2） 只有标准流的盒子，才能使用margin:0 auto; 居中。

也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

3） margin:0 auto;是在居中盒子，不是居中文本。

eq:

margin:0 auto; → 让这个div自己在大容器中居中。

text-align: center; → 让这个div内部的文本居中。注意图片就是文本