python学习第四十七天:浮动与定位

Posted luck_L

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python学习第四十七天:浮动与定位相关的知识,希望对你有一定的参考价值。

浮动

1.1浮动介绍

  • 元素可以设置向左或者向右浮动(不会跳出父元素的宽)
  • 元素浮动后,会脱离文档流(对后面的元素产生影响)
  • 元素一旦浮动,会转换为块状元素
  • 浮动的元素并不独占一行(但仍然是块状元素),因为脱离标准文档流
  • 浮动的元素,宽默认会使auto,被内容撑开
  • 多个元素浮动,会排成一行,宽度超过父元素宽度,会自动换行

1.2浮动的影响

  • 对后面元素的影响,后面元素会整体向前
  • 对父元素有影响(父元素的高不能被浮动的元素撑开)

1.3消除浮动影响

  • 消除元素对后面元素的影响,在后面的元素设置clear:both/left/right属性
  • 消除子元素浮动对父元素的影响,给元素浮动或者设置overflow

定位布局

2.1 相对定位

  • 通过position:relative设置元素为相对定位元素
  • 元素设置为相对定位之后,不会脱离文档流,不影响其他元素
  • 可以通过top/left/right/bottom给相对定位的元素设置位置
  • 定位元素:根据原先默认的位置去定位

2.2 绝对定位

  • 通过position:absolute来设置绝对定位
  • 元素绝对定位后,脱离文档流,影响后面的元素,宽度默认会被内容撑开
  • 可以通过left/top/right/bottom给绝对定位的元素设置位置
  • 定位规则:根据第一个定位的祖先元素,如果没有定位的祖先元素,根据html元素,祖先元素可以是任意类型的定位

以上是关于python学习第四十七天:浮动与定位的主要内容,如果未能解决你的问题,请参考以下文章

代码随想录算法训练营第四十七天| 198 打家劫舍 213 打家劫舍II 337 打家劫舍III

Python之路(第四十七篇) 协程

“全栈2019”Java第四十七章:继承与方法

python学习第五六十七天:创建Django与项目介绍

Python机器学习(四十七)NumPy 副本和视图

python基础学习 第十七天