Rumah > hujung hadapan web > html tutorial > 关于CSS中的float和position_html/css_WEB-ITnose

关于CSS中的float和position_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:51:39
asal
1095 orang telah melayarinya

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

 

float定位:

 


  • li1

  • li2

  • li3

 

position:relative定位:



  • li1

  • li2

  • li3

 

分别运行,查看一下运行效果。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan