明确指定+两种自动将行内元素变成块级元素的方法

1.给行内元素设置  position:absolute/fixted
2.让行内元素浮动,即float
此时便可以对其设置width,heght了,相当于display:inline-block
-------------------------------------------------------------------------------------------------------------------------------------------
1,原始,span为行内元素
明确指定+两种自动将行内元素变成块级元素的方法_第1张图片

明确指定+两种自动将行内元素变成块级元素的方法_第2张图片
当试图给span设置width,height时
明确指定+两种自动将行内元素变成块级元素的方法_第3张图片
效果不变。
----------------------------------------------------------------------
2.此时将span设置为块级元素:
明确指定+两种自动将行内元素变成块级元素的方法_第4张图片
明确指定+两种自动将行内元素变成块级元素的方法_第5张图片
可以看到,span设置宽高有效了,同时也自动换行。
------------------------
3.将span设置为inline-block
明确指定+两种自动将行内元素变成块级元素的方法_第6张图片
明确指定+两种自动将行内元素变成块级元素的方法_第7张图片
既可以设置宽高,又可以与其他文字位于同一行(成为可以设置宽高的行内元素)
------------------------------------------------------
那么。我们在最开始说的两种情况下,不需要为span(行内元素)设置display属性,也将具有自动转换为块级元素
1.为其设置position属性(使其绝对定位),position:absolute/position:fixted
明确指定+两种自动将行内元素变成块级元素的方法_第8张图片
明确指定+两种自动将行内元素变成块级元素的方法_第9张图片
效果如同明确设定    display:inlie-block,可以设置宽高了。
明确指定+两种自动将行内元素变成块级元素的方法_第10张图片











你可能感兴趣的:(前端,css)