CSS之定位二(偏移属性)

  • 时间:2018-07-23 22:50 作者:前端唠唠嗑 来源:前端唠唠嗑 阅读:229
  • 扫一扫,手机访问
摘要:本文我们接着之前的定位话题来开展探讨偏移属性。偏移属性了解起来其实很简单,就是负责告诉浏览器元素相对于父元素的偏移位置。这里要说明两点:1、偏移属性只对定位元素(即position值不是static的元素)有效;2、这里的父元素是之前《css之定位一(position属性)》中谈论的父元素。偏移属性

本文我们接着之前的定位话题来开展探讨偏移属性。偏移属性了解起来其实很简单,就是负责告诉浏览器元素相对于父元素的偏移位置。这里要说明两点:1、偏移属性只对定位元素(即position值不是static的元素)有效;2、这里的父元素是之前《css之定位一(position属性)》中谈论的父元素。

偏移属性有top、bottom、left、right四个属性,其属性值各自对应length、percentage、auto、inherit四种(即长度值、百分比、自动、继承)。

定位元素可以包含在父元素里面,也可以在父元素外面(偏移属性值为负);偏移属性能确定定位元素宽高。这些大家可以自己尝试写下代码测试,在此不做过多的叙述。本文想要探讨两个容易忽略的点:1、当定位元素position值为relative,父元素position值也为relative且定位元素宽高大于父元素宽高是,定位元素对文档布局能否有影响?2、当定位元素设置的宽高与偏移属性所确定的宽高发生冲突时,定位元素的宽高以哪个属性为准?

首先处理第一个问题。由图1我们可以看出:定位元素只是在父元素内部位置发生偏移,对父元素所在的文档流没有造成影响。

CSS之定位二(偏移属性)

图1:定位元素对父元素文档流的影响

?而后我们来处理第二个问题。通常我们取定位元素的position值为absolute,这样能较为简单展现偏移属性的工作机制。由图2的三组对照我们可以看出当定位元素未设置宽高或者者宽高为auto时,偏移属性确定定位元素的宽高,当其有设置具体的宽高值时,偏移属性对定位元素的宽高无影响。

CSS之定位二(偏移属性)

图2:三组对照

?

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】百度网盘如何加入群组(2021-03-01 21:29)
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
血鸟云
手机二维码手机访问领取大礼包
返回顶部