切图仔基础篇————如何熟练的使用定位

原文链接:https://juejin.im/post/5b95308ae51d450e6237ad3a

前言:

在日常的工作中,我们也许会遇到极为苛刻的还原要求——————比如所谓的误差不超过1个像素。

作为前端开发人员,对于这种所谓1px的误差。。。怎么说呢,1px已经是屏幕最低分辨率了,怎么可能还有更低的误差呢,这分明是扯淡。

不过,有些事肯定是要追求极致的。为了追求极为细致的页面还原,position定位属性是必不可少的学习。

position的属性值

提到position的属性值,就要先说明一点。在CSS的样式编写中,你要养成一个特殊的顺序习惯:上右下左。

这对于页面样式的简写有帮助。

然后就是坐标的建立:以左上角为原点,向右为X轴正半轴,向下为Y轴正半轴。

两者结合,坐标的建立。

position的值可以设为relative,absolute,fixed,static。

接下来以这段代码作为实例,进行演示。

1 <div class="box">
2     <div class="box1"></div>
3 </div>
复制代码

0,默认定位:

不会让div或者其他元素脱离文档流,而是遵循排版的原则,从上到下,块级元素换行,行内元素不换行等等通用原则。所以,如果不用定位属性,那么这个position就不用设置。

1,相对定位:

相对于元素原本的位置进行位移,原本的位置不为空,仍然已经位移的该元素继续占用
1 .box {
2     width: 50px;
3     height: 50px;
4     position: relative;
5     top: 50px;
6     left: 10px;
7 }
复制代码

以上代码将实现将box以box最初的位置向右移动50px,向下移动10px。

2.绝对定位:

相对于元素的父元素最左上角进行坐标定位,会脱离文档流,产生类似浮动的效果
1 .box1 {
2     width: 10px;
3     height: 20px;
4     position: absolute;
5     top: 10px;
6     left: 10px;
7 }
复制代码

以上代码将实现将box1的位置以当前的视口位置的原点为基准位置进行移动相应得距离;

这里要注意以下两点:

1,如果父元素没有设置定位的话,那么,绝对定位是相对于body标签进行定位的。

2,如果父元素设置了相对定位,绝对定位,固定定位,任意一种,那么,绝对定位相对于父元素左上角进行定位。

3,总结一下,定位是相对于父元素进行定位的,如果父元素没有设置定位属性,则相对于BODY标签进行定位。

3.固定定位:

相对于当前窗口最左上角进行坐标定位
1 .box {
2     width: 50px;
3     height: 50px;
4     position: fixed;
5     top: 20px;
6     left: 0px;
7 }
复制代码

以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。

定位使用经验

绝对定位会造成元素脱离了文档流,这时会产生元素堆叠的情况。此时可以配合z-index的属性,
如同PS排列图层一样,对页面的层级进行排序。

父元素相对定位,子元素绝对定位,是用来完美还原页面的一种手段,一般用来还原一些较为小的组件。

定位属性虽然强力,但是最好不要用来做整体的页面布局,容易造成页面错乱。
复制代码
参考链接1:www.cnblogs.com/lianshoulug…

结语:

以上链接,我看过,很不错的笔记,我稍微整理了一下我个人觉得有用的部分,虽说可能还不够详细,但是已经够了解这个属性的意思了。

抓住了属性的本质,便不会被各种变化所困扰。

最后的最后:欢迎指出不足,来打脸。

展开阅读全文

没有更多推荐了,返回首页