el-select下拉错位（中）
最后更新于
最后更新于
这里有个span标签
然后里边有三个横线
页面上也很简单就是这样
然后我们选中这个元素
我们看一下他的 offset left
大家看是
为什么呢
因为整个这个 body
有个默认的 margin
他是8像素
即使我们把这个span标签
放到某个 div 里面
就是这样
好我们再来看一下
大家看 还是
但是
如果我们把 div 加一个 position 不让
他是默认值了
我们让他是 relative
还是选中这次买标签
大看他就是0了
那为什么会这样呢
原因是啊
这个 offset left a
跟这个绝对定位的“子绝父相”是一样的
他也是取这个 非static 定位的祖先元素
作为一个参照物的
这个我们也可以试一下
我们可以通过这个元素的点 offsetParent
来看一下
大家看他现在的 offset parent 是这个 div
但如果我们把这个样式去掉
大家看他的 offsetParent
他就变成了 body
那相对于 body 他当然就是8像素了
但如果我们加上这个相对于这个 div
那他就是
div 了
我们再用这个 offsetLeft
他就是
好那到这为止还好理解
接下来我们进阶一下
如果我们在这加一个 float 的元素
好我们把它改成 float 等于
打开按照我们刚才的理解
因为这个三个横线的 spa
是基于这个 div 来
定位的
也就说它的 offset left 应该还是0对吧
但我们来试一下哈
我们还是选中这个
然后呢
好他来复他打开他就变成28了
那这又是为什么呢我们来看一下 float
对于这个浮动的元素
其他的元素呢是要环绕它的
但是呢我这个 div 啊
又不能做成一个不规则形状
按说不规则应该就是这个形状
对吧不能做成这种形状
所以呢
他还是这个 dv 是一个矩形
只不过他里边的内容
要去给这个浮动元素让出空间来
所以啊
这时候我们再去获取这个 span 标签的
offsetLeft
它就不是0了
这个我们也可以试一下
我们在这加一个 br
然后呢再加一个 abc
然后呢我们把它加一个背景颜色
随便选一个
然后呢我们在这里边加一些文字
100个好大家看是不是就环绕了
就是这个效果然后我们还可以把它呀
加一个边框就更清晰了
so i 的我们用 red
打卡
好接下来我们再来思考一个问题
如果我们把这个外层的这个元素
加一个margin
比如说
来看一下
他现在就相当于整个这个大的 div
整体就向右偏移了10像素
所以他里边的内容
就不需要再让出原来那么大的空间了
少让出10个像素就够了
所以这时候
我们再来获取 span 的 offsetLeft
它会变成
那如果我们把这个margin扩大到28呢
看看他是不是
里边内容完全不需要再让出空间了
所以这时候再去获取他的 offsetLeft
他会变成
但是如果我们强制再把这个
4瓣标签扩大呢
大家看我把它宽度扩大到
大家看这时候里面又需要让出来了
所以这时候我们再去获取4瓣呢
他又不再是0了 大家看 是
好接下来大家注意听啊
如果我们这个大的 div 里
只有一行文本
或者一个元素
那么
他在展现形式上加不加margin
其实是一个效果
为了验证哈
我们保留outline
我们来看一下
现在是保留奥特曼
有 margin 的效果是这样
我们忽略边框的存在啊
只看里边的内容
但是注意我把 margin 去掉
大家看 里边的内容（布局）是不是没有变
只是边框变了
所以如果我们不把边框展现出来的话
加不加margin它是一个效果 大家看
然后我们再加一个 margin
是多少呢
他现在是
我们加一个
大家看它是没有区别的
展现上是一样的
但是有一个区别
就是我们在获取这个元素的
offsetLeft 的值是不一样的
大家看这种情况下它是
但如果我把它去掉
再获取 offside the left
它就是40了
好我们来总结一下今天这几个点哈