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

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

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

3、htmax-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-color01 盒子

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

5、以调换；或者单独为某一个方向指定属性，如border-top:1px dashed #00f圆角边框圆角边框border-radius支持圆角边框（border-radius）也是css3 的一大亮点border-radius: none |圆角半径。最大的圆角半径为元素高度的一半盒子阴影盒子阴影box-shadow盒子阴影也是css3的新属性，在前面我们讲过文本阴影，盒子阴影与文本阴影相似。语法为box-shadow:x轴偏移 y轴偏移 模糊量 阴影颜色 内阴影inset/外阴影outsetbox-shadow:5px 5px 7px #000 inset。01 盒子模型-内边距paddin

6、g内边距分为上右下左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

7、个到4个，每种取值方式同padding一样margin:5px;margin:5px 0;margin:5px 10px 15px;margin:5px 2px -10px 4px;小贴士小贴士01 盒子模型一个元素的最终占位宽度和高度究竟是以什么计算的一个元素的最终占位宽度和高度究竟是以什么计算的？元素最终在网页里所占的总宽度=自己本身的宽度（width）+元素的边框厚度（border-width）+元素的内边距(padding)+元素的外边距（margin）。父元素所指定的宽度一定不能小于它里面所有子元素占位累加起来的宽度同理，元素最终在网页里所占的总高度=自己本身的宽度（height）+

8、元素的边框厚度（border-width）+元素的内边距(padding)+元素的外边距（margin）。标准流标准流02 网页布局方式标准流是默认的网页布局模式。当删除其中的元素块，下面的元素会自动上移，填补删除的空间。块级元素、行内元素依据自己的显示属性按照在文档中的先后次序依次显示。如果是块级元素就占一行或多行，是行内元素就和其他元素共处一行，有嵌套关系也会显示出来-标准流float属性属性02 网页布局方式float的本意其实在网页中最开始也是用于图文环绕的，任何元素只要应用了css的float属性，都会产生浮动，并且都生成为块级元素（包括行内元素）。当我们不需要浮动的时候，可以清除浮

9、动，即clear-浮动与清除浮动float:left/right/none。属性值属性值说明left元素向左浮动right元素向右浮动none默认值。元素不浮动，会显示在文档中出现的位置inherit规定应该从父元素继承 float 属性的值。ie 不支持该属性clear02 网页布局方式-浮动与清除浮动clear 属性是一个与 float 属性相反的一个属性，它定义了在清除元素哪边的浮动。如果声明为左边或右边清除，元素会还原到自己标准流的位置。clear的用法如：clear:left/right/both/none;属性值属性值说明left在左侧不允许浮动元素right在右侧不允许浮动元素b

10、oth在左右两侧均不允许浮动元素none默认值。允许浮动元素出现在两侧inherit规定应该从父元素继承 clear 属性的值。ie 不支持该属性position：relative02 网页布局方式-相对定位相对定位是相对自己（该元素）在标准流的位置（以元素左上角为起点）进行垂直或水平位置上下左右的偏移，然后元素就会改变自己本身的位置，而移动到重新定义的位置上position:relative;top:20px;left:30px;上述代码意思为元素相对与自己的左上角向下偏移20px，向右偏移30px。需要注意的是，设置了相对定位的元素不仅偏移了某个距离，并且还占据着自己原本所占有的空间，可能会影响其他元素的显示。position：absolute02 网页布局方式-绝对定位绝对定位与相对定位不同，对元素进行绝对定位的时候，参照的元素位置是该元素已定位的父级乃至祖先级元素，如果元素没有已定位的祖先元素，则会参照body元素的最左上角来定义。绝对定位使元素的位置与标准流无关，因此不占据空间position:absolute;top:20px;left:30px;参照框2的父级元素的左上角（必须是已经有过定位属性的）向右偏移30px，向下偏移20px。但是原本在中间的框2会完全脱离标准流，并且影响到下一个元素框3。z-index:n02 网页