css排版之-标准文档流

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。

1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。

2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

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

margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。下面分四种情况对margin调整盒子的位置进行解说。

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

当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。

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

两个竖直排列的块级元素,它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和,而是两者中的较大者。这在实际制作网页的时候要特别注意。

3.嵌套盒子之间的margin

这时子块的margin以父块的content为参考进行排列

4.margin设为负值

会使设为负数的块向相反的方向移动,甚至会覆盖在另外的块上。