人机交互界面设计（第六章）.pptVIP

人机交互界面设计 第六章 网页布局基础 目录 01 盒子模型 02 网页布局方式 03 简单的网页布局练习 02-01 标准流 02-02 浮动与清除浮动 02-03 相对定位 02-04 绝对定位 02-05 z-index 01-01 宽度和高度 01-03 内边距 01-02 边框border 01-04 外边距 01 盒子模型 网页文档中的每个元素都被视为一个盒子。可以理解为，网页布局就是将大大小小的盒子通过嵌套来进行合理的摆放。在布局的过程中，最需要关注的是盒子尺寸计算、是否会在不同浏览器移位等要素。一个标准的 W3C 盒子模型由 content（内容）、padding（填充，也称内边距）、margin（外边距）和border（边框）这 4 个属性组成 content 就是盒子里装的东西，盒子一定会有宽度和高度； 盒子外壳的厚度就是（border）边框； 盒子里面的内容距盒子的边框会有一定的距离，这就是内边距（padding）； 而盒子之间的间距就是外边距（margin）。 宽度width width属性只为实际内容（即content）的宽度。 Min-width Max-widh 01 盒子模型 ----宽度和高度 高度height Height属性指元素的内容在浏览器可视区域中的高度，可以指定数值（比如900px）或者相对于父元素的