盒子之间的关系以及定位

盒子之间的关系

一、HTML和DOM（Document文档 Object对象 Model模型）

二、标准文档流（标准流）

1、块级元素（block）（一个矩形区域，并且和相邻的元素依次竖直排列。不排在同一行中）

2、行内元素（inline）（对于文字这类元素，各个字母之间横向排列。到最后端自动拆行，这就是行内元素）

三、盒子在标准流中的定位原则

1、行内元素之间的水平margin

   左侧元素的margin-right+右侧元素margin-left

2、块级元素之间的竖直margin

3、嵌套盒子之间的margin

4、将margin设成负数会怎样？

 

定位

一、position
     static：静态定位，这种定位方式可以不写，是系统默认的定位方式。
     relative：相对定位，相对原有位置的定位方式。
     absolute：绝对定位，盒子的位置以它所在的已定为的盒子为基准进行偏移。
     fixed：固定定位，相对于浏览器窗口的定位方式。

二、相对定位(relative)

1、使用相对定位的盒子，会相对它原来的位置偏移制定的距离
2、使用相对定位的盒子，仍然在标准流中，它的偏移对附近盒子都没有影响。

三、绝对定位(absolute)
1、使用绝对定位，是相对于它所处的容器（已经定位的盒子）来说的。
2、使用绝对定位的DIV，会彻底脱离标准流，其它的盒子认为这个盒子不存在。

四、固定定位(fixed)

五、z-index：各盒子之间的前后顺序，数值越大越往前，数值越小越往后。默认为0，按照默认方式覆盖。

六、display：控制盒子是否隐藏，转变盒子的类型。

 

转载于:https://www.cnblogs.com/yanzhuan/archive/2011/09/23/2186068.html