盒子之间的关系以及定位
盒子之间的关系
一、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:控制盒子是否隐藏,转变盒子的类型。