前端网页学习12(设计优秀网页的三种布局方式)

网页布局三种方式:

  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属性

你可能感兴趣的:(css,css,html,定位)