网站建设前端设计三种页面布局方式

1．标准流2．浮动3．定位

标准流:

行内元素可以一行多个。块级元素独占一行。即每个元素都有自己的格式。常用于从上到下布局。

浮动:

定义:

元素脱离原有的位置，处于更高的一个层次。

语法选择器{float:属性值}none(默认)left，Right

特点:1.脱标:脱离标准位置，即原有位置会被未浮动的格子占据。

2.并列:多个盒子都设置了浮动，且顶端对齐，在同一行排列，直至到达容器改行边缘。

3.行内块元素特性:任何元素都可以浮动，浮动后的元素具有行内块元素特性。

4.注意点:以标准父元素上下排列，以约束浮动子元素位置。

一个元素浮动了，理论上，其他兄弟元素也要浮动。(只会影响后面的标准流)。

5.清除浮动:使用时机:父类不方便给高度时。

原理:闭合浮动。

语法:选择器{clear:属性值}left。right。

both(常用)四种方法:

1．最后一个浮动的元素后添加一个额外标签，添加清除浮动样式。

2．父元素添加overflow属性(hidden,auto，scroll)，但是无法显示溢出部分。

3.after伪元素。

4．双伪元素。

定位:

盒子固定在某个位置，并压住其他盒子。结构:定位模式+定位距离定位模式:

position:static静态/relative相对/absolute绝对/fixed固定/sticky黏性定位距离:

top/bottom/left/right静态:

默认定位:

(不定位)，是标准流。相对定位:相对于原来位置。不脱标。

绝对定位:相对于父元素的位置(没有父元素，或没有定位，则以浏览器为标准)。父元素有定位90(非静态)，以最近的父元素为标准。不占有原来位置，脱标。

子绝父相固定定位:

以浏览器可视区为标准，不随进度条滚动。不占有原来位置，脱标。

黏性定位:

(相对和固定的混合。)相对于浏览器可视窗口。占有位置。

必须添加四个距离中的一个才有效。定位的叠放次序:

z-index:整数或auto;属性值大的居上。

属性值相同的后面居上。

只有定位的盒子才有z-index属性