盒子模型与定位

盒子模型与定位

1.盒子属性

• border：边框
• margin：外边距 （值：长度单位、百分比、负值、auto-自动）
  注意：margin左右设置成auto，能实现块级元素的水平居中（必须指定块级元素的宽）
• padding：内边距 （padding的值可以是长度或者百分比，但是不能为负值）
  一个值：四边都相同
  二个值：上，右，然后取对边的值
  三个值：上，右，下，然后取对边
  四个值：上，右，下，左
  注意：padding与margin都是如此

2.盒子尺寸的计算

• 标准模式：总宽度=内容宽 + padding左右 + border左右 + margin左右
  设置元素的宽高 = 内容的宽高

• 怪异模式：总宽度=设置的宽度+margin左右
  设置的宽度 = 内容宽 + padding左右 + border左右

3.margin合并：垂直方向的margin会合并（取最大的值）
margin的bug：当子盒子设置margin-top时，如果子盒子与父盒子之间没有任何的填充物（padding，border，内容），就会出现子盒子的margin-top作用到父盒子的margin-top上
此bug的解决方案：

• 父盒子与子盒子之间添加填充物（不推荐）
• 了解问题：到底应该使用padding还是margin（推荐）

补充知识
4.html 元素类型

元素类型时可以改变的：
display：block； 块级
display：inline； 行内
display：inline-block； 行内块级

注意：设置浮动或者绝对定位的元素，会变成行内块级元素

5.定位
position：四个值

• static：默认值，没有定位
• relative：相对定位——没有脱离标准文档流，在原来没有设置定位时的位置，进行偏移，到达新的位置，对于其他的元素不影响。（浮动元素也一样）
• absolute：绝对定位——会脱离标准文档流，以离他最近的已经定位”祖先“元素，如果没有找到已经定位的祖先元素，就以当前的窗口为基准，进行偏移
• fixed：固定定位——根据浏览器窗口来进行定位，会脱离标准文档流