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学习第四十七天:浮动与定位的主要内容,如果未能解决你的问题,请参考以下文章