Heim > Web-Frontend > HTML-Tutorial > 关于CSS中的float和position_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:51:39
Original
1096 Leute haben es durchsucht

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

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

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

 

float定位:

 


  • li1

  • li2

  • li3

 

position:relative定位:



  • li1

  • li2

  • li3

 

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage