人机交互界面设计第六章_网页布局基础教材教学课件.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; Float属性 02 网页布局方式 float的本意其实在网页中最开始也是用于图文环绕的，任何元素只要应用了CSS的float属性，都会产生浮动，并且都生成为块级元素（包括行内元素）。当我们不需要浮动的时候，可以清除浮动，即clear ----浮动与清除浮动 float:left/right/none。 属性值 属性值说明 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，会显示在文档中出现的位置 inherit 规定应该从父元素继承 float 属性