博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css的postion属性
阅读量:6671 次
发布时间:2019-06-25

本文共 1645 字,大约阅读时间需要 5 分钟。

  hot3.png

首先,来段代码进行css的postion属性的学习之路。

 position 
R
G
B
R
G
B

其实这段代码写的不是很规范,例如document,meta等,我们就先忽视这个问题。。。

  1. postion属性有四个值,分别是static,absolute, relative, fixed。其中static和relative两个属性值是跟文档流有关,其他两个跟文档流无关。那么什么是叫文档流呢?我的理解是文档流就是对文档的读入和输出顺序,例如上述所贴的代码,box类下有三个div,如果我们忽视它们的css样式,那么它们在浏览器的展示方式是从上到下是R,G,B,并且每一个占用一层。

  2. static,默认的position值,如果对元素进行TLBR操作,是不起任何作用的(怪不得刚开始没设置position的值,根本没发生偏移,囧)。

  3. relative,相对定位。其实这里的相对定位,是相对它本身在正常文档流的位置的偏移,尽管偏移了,它原本在正常文档流的位置还在保存着,例如上例的结果,你在浏览器中可以看到右上角的L的位置还存在,尽管L已经飘走了。所以尽管L进行了相对定位,但是它的存在还是对G和B有影响,并不抽离出文档流。

  4. absolute,绝对定位。这里的绝对定位,是指它本身被抽离出文档流,即一旦它的positive设置为absolute,它原先在文档流中所占的位置就被其他的元素所占用。那么对它进行TLBR操作则是怎么定位呢?它会首先寻找距离它最近的父元素,并且该父元素的position属性值不为static,如果查找不到,ok,这是它就会相对body进行TLBR操作。

  5. fixed,该属性值相对于浏览器窗口,因此拖动滚动条不影响它在窗口中的位置。

之所以研究position是因为看到了阿里2014的一个线上笔试题,如下:

有两个盒子A和B,其中B在A盒子内,现在要求实现B在A中水平方向和垂直方向均居中。

.A {    position: relative;    width: 500px;    height: 500px;    background-color: green;}.B {    position: absolute;    max-width: 300px;    max-height: 300px;    background-color: blue;}

这里设定A为宽度和高度一定的relative定位,B相对A进行TLBR操作使其相对A居中。

刚开始拿到这题时,我把它想的巨简单,既然B的父元素A相对定位,那么把B相对A的top进行50%,left进行50%偏移,不就居中了么?然后很happy的测试一下,果然居中,好吧,其实只是B的左上角坐标居中,当B中有content、border、padding中任何一项内容时,就不满足要求了,还是继续思考怎么解决。

接下来想到一种比较暴力的方法,因为题中并没有要求用的是CSS解决这个问题,所以想到了用JS实现。首先计算出A的宽度,当然这个宽度是padding+border+content。先把代码贴上,明天继续分析。

后来在网上看到有种解法,把B的position重新设置为非absolute,然后添加A的css样式

.A {    display: -webkit-box;    -webkit-box-align: center;    -webkit-box-pack: center;}

这样也能解决问题,可是我觉得既然题目要求A是relative,B是absolute,篡改题意这种做法不可取

转载于:https://my.oschina.net/u/866703/blog/214395

你可能感兴趣的文章
网络编程readn、writen和readline函数的编写
查看>>
CPU的位数,字长,地址总线
查看>>
vim 小技巧
查看>>
webbench
查看>>
使用递归遍历并转换树形数据(以 TypeScript 为例)
查看>>
WEB文件上传方案探索(一)
查看>>
PHP类推荐:QueryList|基于phpQuery的无比强大的PHP采集工具
查看>>
Spring实战笔记:Spring核心(一)
查看>>
nginx技术(5)日志管理和限速
查看>>
js正则集(用的时候找)
查看>>
《打造facebook》读感
查看>>
快捷入口 管理Win7系统应用跳转列表
查看>>
New与Class对象创建
查看>>
windows下实现wamp与tomcat环境整合
查看>>
我的友情链接
查看>>
Windows Server 2012 R2搭建IIS服务器
查看>>
SCVMM 2012 R2运维管理二之:安装域控制器
查看>>
[Fibre Channle 实战之三]FC 和iSCSI的使用差异
查看>>
c#winform选择文件,文件夹,打开指定目录方法
查看>>
traceroute
查看>>