前端设计与开发

1传统网页布局

标准流:默认的布局方式，标签按规定排列。

浮动:可以让多个块级元素一行内排列显示。

定位:实现网页中元素精确定位。

2定位 position
①可以让盒子自由的在某个盒子内移动位置或固定在屏幕的某个位置，并且可以压住其他盒子。
②将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。
定位模式:用于指定元素在文档中的定位方式。
边偏移:决定元素的最终位置。定位模式
3.position: 定位模式
static:静态定位，默认定位方式    
relative:相对定位，相对于原文档的位置进行定位    
absolute:绝对定位，相对于上一个已经定位的父元素进行定位    
fixed:固定定位，相对于浏览器窗口进行的定位4.边偏移
边偏移属性: 值;(单位px)
top:顶部偏移量;top:50px;    
bottom:底部偏移量;bottom:50px;    
互动
left:左侧偏移量;left:50px;    
right:右侧偏移量;right:50px;

6.相对定位relative
position:relative;
·相对定位的元素移动时的参照点是自己原来的位置

·不脱标:继续保留原先的位置,不会脱离标准流
·典型应用:给绝对定位当爹的!子绝父相(大相小绝)

7.z-index
z-index: 层叠等级属性，用于调整重叠定位元素的堆叠顺序。取值:可为正整数、负整数和0;
默认值为0，取值越大，定位元素在层叠元素中越靠前(上)。