人机交互界面设计第六章网页布局基础

《人机交互界面设计第六章网页布局基础》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、人机交互界面设计第六章网页布局基础目录01盒子模型02网页布局方式03简单的网页布局练习02-01标准流02-02浮动与清除浮动02-03相对定位02-04绝对定位02-05z-index01-01宽度和高度01-03内边距01-02边框border01-04外边距01盒子模型网页文档中的每个元素都被视为一个盒子。可以理解为，网页布局就是将大大小小的盒子通过嵌套来进行合理的摆放。在布局的过程中，最需要关注的是盒子尺寸计算、是否会在不同浏览器移位等要素。一个标准的W3C盒子模型由content（内容）、padding（填充，也称内边距）、margin（

2、外边距）和border（边框）这4个属性组成content就是盒子里装的东西，盒子一定会有宽度和高度；盒子外壳的厚度就是（border）边框；盒子里面的内容距盒子的边框会有一定的距离，这就是内边距（padding）；而盒子之间的间距就是外边距（margin）。宽度widthwidth属性只为实际内容（即content）的宽度。Min-widthMax-widh01盒子模型----宽度和高度高度heightHeight属性指元素的内容在浏览器可视区域中的高度，可以指定数值（比如900px）或者相对于父元素的百分比（比如60%）。若不为元素指定高度，元素

3、的高度一般为内容自身的高度Min-heightMax-height边框宽度border-width网页中元素的边框（border）也包含同样的一些属性。具体为border-width（边框的厚度），border-style（边框的样式），border-color（边框的颜色）的常用css属性，01盒子模型----边框border边框的宽度分为4个方向，分别是top，right，bottom，left语法如：border-width:数值也可以单独为某一个方向设定宽度，如border-top-width:2px也可以单独为某一个方向设定宽度，如bord

4、er-top-width:2px边框颜色border-color01盒子模型----边框border边框颜色同宽度一样也是四个方向，语法为border-color:颜色值边框宽度属性一样，取值可以是1个到4个值border-color:red边框样式border-styleborder-style是指边框的显示方式是实线，虚线还是点状线、双线等形态仍然有4个方向的值，1-4个值的取值也与上面是一致的。用法如：border-style:dashed。注意：不同浏览器对相同边框样式的渲染方式可能不同。简写属性border01盒子模型----边框borde

5、rborder:1pxsolid#000；3个值的顺序可以调换；或者单独为某一个方向指定属性，如border-top:1pxdashed#00f圆角边框border-radius支持圆角边框（border-radius）也是CSS3的一大亮点border-radius:none

6、圆角半径。最大的圆角半径为元素高度的一半盒子阴影box-shadow盒子阴影也是css3的新属性，在前面我们讲过文本阴影，盒子阴影与文本阴影相似。语法为box-shadow:x轴偏移y轴偏移模糊量阴影颜色内阴影inset/外阴影outsetBox-shadow:5px5px7

7、px#000inset。01盒子模型----内边距padding内边距分为上右下左4个方向距边框的距离。语法为padding:数值；数值取值可以是像素，可以是cm，可以是百分比，不允许为负值。同样的取值可以为1个到4个，1个表示4个方向的内边距都相等；2个分别表示上下和左右；3个表示上，左右，下；4个值表示顺时针上，右，下，左。padding:5px;Padding:5px0;Padding:5px10px15px;Padding:5px2px10px4px;01盒子模型----外边距margin外边距margin与padding相似，同样分上下左右

8、4个方向语法为margin:数值。与padding不同的是margin可以设置为负值。取值可以为1个到4个，每种取值方式同padding一样margin:5px;margin:5px0;margin:5px10px15px;margin:5px2px-10px4px;小贴士01盒子模型一个元素的最终占位宽度和高度究竟是以什么计算的？元素最终在网页里所占的总宽度=自己本身的宽度（width）+元素的边框厚度（border-width）+元素的内边距(padding)+元素的外边距（margin）。父元素所指定的宽度一定不能小于它里面所有子元素占位累加起

9、来的宽度同理，元素最终在网页里所占的总高度=自己本身的宽度（height）+元素的边框厚度（border-w