欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html中的定位

程序员文章站 2022-03-18 15:39:16
html中的定位体系 一、 分类 1、常规流static 2、浮动float 3、相对定位relative 4、绝对定位absolute 5、固定定位fixed 二、使用时的区分 在网页布局中,常常都会使用到这5中定位方式 ,总体分为三大类:静态static、浮动float、绝对定位(relativ... ......

html中的定位体系

一、 分类

1、常规流static

2、浮动float

3、相对定位relative

4、绝对定位absolute

5、固定定位fixed

二、使用时的区分

在网页布局中,常常都会使用到这5中定位方式 ,总体分为三大类:静态static、浮动float、绝对定位(relative、absolute、fixed)。

1、默认值为static静态

2、float浮动

使用浮动布局时,需要注意2个问题

1. float会导致父元素高度塌陷

2. bfc 块格式化上下文

* bfc能解决高度塌陷问题,用clear或overflow 属性 来解决  overflow不等于hidden  那么就会创建一个bfc

clear:both 和overflow 的区别

clear 判断外部元素影响到自身布局

overflow 判断自身元素是否影响到网页布局

3、绝对定位

1.相对定位

相对定位会在常规流中保留位置,并在原本位置的相对定位实际的坐标,使用相对定位时,会对其他元素进行覆盖。

2.绝对定位

绝对定位不会在常规流中保留位置,使用时注意原点的位置(祖先元素position不等于static),若没有这样的元素,那么原点为html包含块的原点

3.固定位置

固定定位不会在常规流中保留位置,坐标为当前视口的起点为起点

三、在正常网站布局中,各种布局都会有使用,根据自己的实际情况具体使用不同的布局。