盒子模型笔记

盒子模型

• width 宽度

• height 高度

• padding 内边距

  padding:10px; padding:10px ; 上下左右四个方向都为10px

  padding:10px 20px; 当padding:10px 20px ;设为两个值的时候，第一个表示上下，第二值表示左右

  padding:10px 20px 30px; 当padding:10px 20px 30px 设置为三个值的时候，第一个值表示上 第二个值表示左右，第三个值表示下

  padding:10px 20px 30px 40px; 四个值的时候，分别表示上右下左的边距

• border 边框

border:1px solid #ccc;

第一个表示边框粗细

第二个表示边框线型

第三个表示边框颜色

border-width -- 》 边框粗细

border-style -- 》 边框线型

border-color -- 》 边框颜色

• margin 外边距

负责两个盒子之间的距离

margin:10px; 上下左右都为10px

margin-top: 上边距

margin-bottom: 下边距

margin-left: 左边距

margin-right: 右边距

margin: 0 auto; 将左右的margin值设置为auto将使盒子左右居中显示。

• margin： 0 auto注意点

使用margin:0 atuo;的盒子必须要有width，有明确的width。

只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用
text-align:center;

• margin塌陷

两个块级元素处于标准文档流中，那么两个盒子之间的距离为其中margin较大值