DIV+CSS网页布局

• CSS盒子模型

 

Margin-right/left/top/bottom:当两个块级元素外边距都设置的时候，相邻的外边距不是叠加关系。而是采用谁大用谁，这种现象叫做“塌陷”。

• 标准流和div标记

标准流：网页默认的自然排列布局方式，即CSS规定的默认块级元素和行内元素排列方式。

网页元素=块级元素+行内元素

1. 块级元素：h1-h6、p、div

①占据一定矩形区域；

②同级兄弟块依次垂直排列，左右撑满。

1. 行内元素：span、em、a

①不占有独立区域；

②同级行内元素水平依次排列，不会左右撑满。

div标记:通用块级元素，没有具体HTML含义，适合作为布局标记。

• 盒子的浮动和定位

浮动：

1. 父div左右撑满，子div之间依次垂直排列；
2. 使用clear属性清除浮动影响，需要在子div后添加一个空div，对<style>标签中声明过的“class”类进行应用。

定位：

1. 静态定位(static)：块级元素的默认布局方式；
2. 相对定位(relative)：可以根据需求进行偏移量的设置；
3. 绝对定位(absolute)：脱离文档流，选取最近一个具有定位设置的父级对象进行绝对定位，如对象的父级没有该属性，则以body为坐标原点进行定位，通过z-index进行层次分级。