css 创建盒子(div)

来源:互联网 发布:冒险岛源码 编辑:程序博客网 时间:2024/06/16 01:02
盒子模型--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内部的文本居中。注意图片就是文本