64与3232了一无所有怎么办办

来源：蜘蛛抓取(WebSpider) 时间：2018-02-08 10:12 标签： 32了一无所有怎么办
如何让DIV固定在页面的某个位置
我的图书馆
如何让DIV固定在页面的某个位置
利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点：
1、使用了大量的计算，每次滚动，都少不了一大堆的运算。
2、使用了JavaScript脚本，脚本这东西受到浏览器的限制，即便没有限制，也同样因为网页的下载模式问题，可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3、条条大路通罗马，但是看看那方块，当快速滚动滚动条的时候，会发现那个可爱的方块抖动地厉害。这也难怪，那么多的计算谁能受得了？
那有没有比较“平静”高效的表示方式呢？比如是否有一种用CSS的方式呢？
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed（）。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的：
位置被设置为&fixed&的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过&”left”、”top”、”right”&以及”bottom”&属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于&IE7（strict&模式）。
于是我们很快就有了以下的代码，不过很遗憾，IE中并不能通过严格的测试，但是FireFox中却可以通过测试！
&html&&head&&!––&&title&Only&fit&FireFox!&&:(&/title&&!–Some&thing&about&the&fixed&style!–&&style&type=”text/css”&.fixed_div{position:left:200bottom:20width:400}&/style&&/head&&body&&div&class=”fixed_div”&style=”border:1px&solid𱂸”&content,&I’m&content&/div&&div&style=”height:888”&&/div&&/body&&/html&
不管上面上面说的IE7的strict模式，很显然，除了IE7，我们的挑战还有包括IE6在内的一大堆未知的因素。很显然，虽然这个方法通过了FireFox，但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么？（我指的是用JavaScript的时候效果很卡）
当然不行，我们的症结究竟在哪？我们该如何去解除它呢？带着这样的郁闷，我们需要开始新的探险。
HTML究竟是啥？
这个问题换在别的地方问，您可能要搬出一大堆的文档来告诉我HTML的定义，但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的&tag&&/tag&组成的，而这一大堆的&tag&&/tag&组合在一起，它们的结构就像一棵树，是的，HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根，那就是&html&&/html&节（root），在根节点下常见的节点中，我们通常能见到&head&&/head&和&body&&/body&两个节点，它们之下又有……
现在回顾一下我们的问题，我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题，啥是滚动条？
滚动条，顾名思义，就是可以滚动的条（ScrollBar）（废话）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是&body&&/body&或者&html&&/html&节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？（虽说是模拟，但是效果一模一样噢～）
&html&&head&&title&&/title&&style&type=”text/css”&
html,body&{overflow:margin:0width:100%;height:100%;}
.virtual_body&{width:100%;height:100%;overflow-y:overflow-x:}
.fixed_div&{position:z-index:2008;bottom:20left:40width:800height:40border:1px&solid&background:#e5e5e5;}&/style&&/head&
&body&&div&class=”fixed_div”&I&am&still&here!&/div&&div&class=”virtual_body”&&div&style=”height:888”&I&am&content&!&/div&&/div&&/body&&/html&
html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。
.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。
.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
通过这篇文章，希望您能解决这个问题，更深入一点，希望您能够对HTML的具体内容有更深刻地理解
TA的最新馆藏[转]&[转]&[转]&如何让一个div居于页面中间，我今天说的是让一个div水平居中同时垂直居中，而不是简单的top：50%，left：50%。当然，我们就按一开始的思路写一下：top，left属性都设为50%，看一下效果。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&div居于页面正中间&/title&
&style type="text/css"&
margin: 0;
padding: 0;
background-color: #EAEAEA;
width: 200px;
height: 200px;
background-color: #1E90FF;
.center-in-center{
position: absolute;
left: 50%;
&div class="center-in-center"&&/div&
从我的截图可以看出，div的左顶点刚好在页面的中心点处。现在的思路是，如何移动div然后让div的中心和页面中心重合，即可达到我们一开始想要的结果。在这里我要介绍一种方法，使用css的transform属性。由于这个属性的值很多，我这里就不一一介绍，只是说一下它的translate。我们给刚才的center-in-center类加上translate(0,-50%)
.center-in-center{
position: absolute;
left: 50%;
transform: translate(0, -50%);
如果使用过这个属性，应该知道怎么回事了。translate(0, -50%)，第一个值是指水平移动量，和tansform的translateX效果一样，第二个值那就是垂直方向偏移量，但为负数时，代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。
附上完整代码与效果：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&div居于页面正中间&/title&
&style type="text/css"&
margin: 0;
padding: 0;
background-color: #EAEAEA;
width: 200px;
height: 200px;
background-color: #1E90FF;
.center-in-center{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
&div class="center-in-center"&&/div&
说多两句，这也可以是一道非常不错的面试题，大家可以留意一下。当然还有其他解法，这里就不再班门弄斧了。另外，css3的transform是一个非常强大的属性，可以做很多变换3d之类的炫酷效果，如果有兴趣可以深入研究一下。但前端有一个不得不说的痛，浏览器兼容性问题。。。其他的浏览器还好说，万恶的IE，IE9支持一小部分属性，IE9以下全部不支持。如果还深爱着IE，那只能另辟蹊径，甚至不惜用js去解决咯！又快到周末了，又可以好好睡觉了，真好！
阅读(...) 评论()

我要回帖

更多关于 32了一无所有怎么办 的文章

 

随机推荐