人机交互界面的设计第六章 网页布局基础.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）或者相对于父元素的百分比（比如60%）。若不为元素指定高度，元素的高度一般为内容自身的高度 Min-height Max-height 边框宽度border-width 网页中元素的边框（border）也包含同样的一些属性。具体为border-width（边框的厚度），border-style（边框的样式），border-color（边框的颜色）的常用css属性， 01 盒子模型 ----边框border 边框的宽度分为4个方向，分别是top，right，bottom，left 语法如：border-width:数值 也可以单独为某一个方向设定宽度，如border-top-width:2px也可以单独为某一个方向设定宽度，如border-top-width:2px 边框颜色border-color 01 盒子模型 ----边框border 边框颜色同宽度一样也是四个方向，语法为border-color:颜色值 边框宽度属性一样，取值可以是1个到4个值 border-color:red 边框样式border-style border-style是指边框的显示方式是实线，虚线还是点状线、双线等形态 仍然有4个方向的值，1-4个值的取值也与上面是一致的。用法如：border-style:dashed。 注意：不同浏览器对相同边框样式的渲染方式可能不同。 简写属性border 01 盒子模型 ----边框border border:1px solid #000；3个值的顺序可以调换； 或者单独为某一个方向指定属性，如border-top:1px dashed #00f 圆角边框border-radius 支持圆角边框（border-radius）也是CSS3?的一大亮点 border-radius: none |圆角半径。最大的圆角半径为元素高度的一半 盒子阴影box-shadow 盒子阴影也是css3的新属性，在前面我们讲过文本阴影，盒子阴影与文本阴影相似。语法为box-shadow:x轴偏移 y轴偏移 模糊量 阴影颜色 内阴影inset/外阴影outset Box-shadow:5px 5px 7px #000 inset。 01 盒子模型 ----内边距padding 内边距分为上右下左4个方向距边框的距离。 语法为padding:数值；数值取值可以是像素，可以是cm，可以是百分比，不允许为负值。 同样的取值可以为1个到4个， 1个表示4个方向的内边距都相等； 2个分别表示上下和左右； 3个表示上，左右，下； 4个值表示顺时针上，右，下，左。 padding:5px; Padding:5px 0; Padding:5px 10px 15px; Padding:5px 2px 10px 4px; 01 盒子模型 ----外边距margin 外边距margin与padding相似，同样分上下左右4个方向 语法为margin:数值。 与padding不同的是margin可以设置为负值。取值可以为1个到4个，每种取值方式同padding一样 margin:5px; margin:5px 0; margin:5px 10px 15px; margin:5px 2px -10px 4px; 小贴士 01 盒子模型 一个元素的最终占位宽度和高度究竟是以什么计算的？ 元素最终在网页里所占