这是我参加[第四届青训营]笔记创作活动的第四天
布局概述 DIV+CSS布局：网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称
网页布局 目的：使页面结构清晰、有条理、易读
思想：
确定"版心"：页面主体内容所在位置 （通常在页面中水平居中）
分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)
控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制
过程：
准备好相关网页元素，基本都是盒子box
利用CSS设置好盒子样式，摆放到相应位置
往盒子里装内容
** 页面元素定位机制** 1.流式布局：按照元素的类型和HTML源文件出现的顺序进行定位
块布局（block）：从上到下依次排列 水平布局（inline）：从左到右一行中布局 文档流（标准流、普通流）：浏览器根据元素在html文档中出现的顺序，从左向右，从上到下依次排列
块级元素会独占一行，从上向下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素则自动换行 常用元素：span、a、i、em等 2**.浮动布局（float）**：当元素浮动时，不再处于普通文档中，不占据空间，但是会缩短行宽，产生文字环绕的效果
典型应用：多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
注意：
浮动和标准流的父盒子搭配。 先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置 一个元素浮动后，理论上其余兄弟元素也应浮动。 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 3.定位布局（position）： ** 组成**：定位模式+边偏移
定位模式：用于指定一个元素在文档的定位方式
绝对定位（position：absolute）：通过页面坐标（页面左上角为初始点）方式来定位元素。使用绝对定位后元素不会占用文档流空间 相对定位（position：relative）：将它所在的位置（文档流位置）为初始点，通过设置垂直和水平位置 边偏移：决定了该元素最终位置
注意：
使用相对定位，原来在标准流的位置继续占有。使用绝对定位，不再占有原先位置 如果没有父元素或者父元素没有定位，则以浏览器为准定位（Document文档） 如果父元素有定位，则以最近一级有定位的父元素为参考 父容器使用相对定位。子元素使用绝对定位 页面左上角则不是初始定位而是父容器的左上角 与定位相关的属性left、top、right、bottom只有使用了定位属性（position）后才有效，只能同时使用相邻的两个坐标属性，不能同时使用相对两个属性 **子绝父相： ** 子元素使用绝对定位，不占有位置，可以放到父元素任何一个地方，不影响其它兄弟元素 父元素需要加定位限制子元素在父元素显示，因此要使用绝对定位，占有位置 总结：相对定位经常用来作为绝对定位的父级
