web实训2

①页面布局相关属性:float(left,right,auto),display(block,inline,inline-block,listitem),overflow(auto,hidden,scroll,visible)②position属性position属性规定元素的定位类型,定义建立元素布局所用的定位机制,任何元素都可以定位。 position属性值。

值 描述
absolute 绝对定位,相对于最近定位和祖先元素进行定位,元素的定位位置通过left,top,right,bottom属性值来确定
fixed 固定定位,相对于浏览器窗口进行定位,元素的定位位置通过left,top,right,bottom属性值来确定

对于定位要理解每种定位的意义:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么最近的已定位祖先元素是body。

包含块是标准布局中的一个重要概念,他是绝对定位的基础,包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下,body元素是一个大的包含块,所有绝对定位的元素都是根据body来确定自己所处的位置。但是如果定义了包含元素(指元素内容包含其他元素)为包含块以后,对于被包含的绝对定位元素来说,就会根据最近的包含块来决定自己的显示位置。

总结:如果没有自己定义的包含块,那么所有绝对定位的元素都是根据body来确定自己的位置。如果自己定义了包含块,那么根据自己的包含块来决定自己的显示位置

猜你喜欢

转载自blog.csdn.net/qq_44783261/article/details/88767721