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

,*,*,*,*,*,*,*,*,*,*,*,人机交互界面设计,第六章,网页布局根底,目录,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,盒子模型,一个元素的最终占位宽度和高度究竟是以什么计算的？,元素最终在网页里所占的总宽度=自己本身的宽度width+元素的边框厚度border-width+元素的内边距(padding)+元素的外边距margin。父元素所指定的宽度一定不能小于它里面所有子元素占位累加起来的宽度,同理，元素最终在网页里所占的总高度=自己本身的宽度height+元素的边框厚度border-width+元素的内边距(padding)+元素的外边距margin。,标准流,02,网页布局方式,标准流是默认的网页布局模式。当删除其中的元素块，下面的元素会自动上移，填补删除的空间。块级元素、行内元素依据自己的显示属性按照在文档中的先后次序依次显示。如果是块级元素就占一行或多行，是行内元素就和其他元素共处一行，有嵌套关系也会显示出来,-,标准流,Float,属性,02,网页布局方式,float的本意其实在网页中最开始也是用于图文环绕的，任何元素只要应用了CSS的float属性，都会产生浮动，并且都生成为块级元素包括行内元素。当我们不需要浮动的时候，可以去除浮动，即clear,-浮动与去除浮动,float:left/right/none,。,属性值,属性值说明,left,元素向左浮动,right,元素向右浮动,none,默认值。元素不浮动，会显示在文档中出现的位置,inherit,规定应该从父元素继承,float 属性的值。IE 不支持该属性,clear,02,网页布局方式,-浮动与去除浮动,clear 属性是一个与 float 属性相反的一个属性，它定义了在去除元素哪边的浮动。如果声明为左边或右边去除，元素会复原到自己标准流的位置。,clear的用法如：clear:left/right/both/none;,属性值,属性值说明,left,在左侧不允许浮动元素,right,在右侧不允许浮动元素,both,在左右两侧均不允许浮动元素,none,默认值。允许浮动元素出现在两侧,inherit,规定应该从父元素继承,clear 属性的值。IE 不支持该属性,Position,：,relative,02,网页布局方式,-,相对定位,相对定位是相对自己该元素在标准流的位置以元素左上角为起点进行垂直或水平位置上下左右的偏移，然后元素就会改变自己本身的位置，而移动到重新定义的位置上,position:relative;,top:20px;,left:30px;,上述代码意思为元素相对与自己的左上角向下偏移,20px,，向右偏移,30px,。,需要注意的是，设置了相对定位的元素不仅偏移了某个距离，并且还占据着自己原本所占有的空间，可能会影响其他元素的显示。,Position,：,absolute,02,网页布局方式,-,绝对定位,绝对定位与相对定位不同，对元素进行绝对定位的时候，参照的元素位置是该元素已定位的父级乃至祖先级元素，如果元素没有已定位的祖先元素，那么会参照body元素的最左上角来定义。绝对定位使元素的位置与标准流无关，因此不占据空间,position:absolute;,top:20px;,left:30px;,参照框2的父级元素的左上角必须是已经有过定位属性的向右偏移30px，向下偏移20px。但是原本在中间的框2会完全脱离标准流，并且影响到下一个元素框3。,Z-index:n,02,网页布局方式,-z-index,z-index,属性用来设置元素的堆叠顺序。这时，页面不再是一个平面，而是拥有纵向的层级关系，也就是,z,轴,。,用法为,z-index:number,number,的取值范围可以为负数，数值越高的元素在数值低元素的上面,03,简单网页布局练习,一个简单的综合案例，对前面的知识作为总结。完成html及css局部,END,THANK YOU,