html css原理介绍,详解CSS定位原理_html/css_WEB-ITnose

最新推荐文章于 2021-06-09 21:02:15 发布

weixin_42421284

最新推荐文章于 2021-06-09 21:02:15 发布

阅读量89

点赞数

文章标签： html css原理介绍

现在有一个窗口绝对定位position:absolute;，设置css样式left: 0;right: 0;，可以实现窗口的宽度百分之百(100%)。

这时候，没有给窗口设置顶部top:0;，默认情况下窗口顶部为零，或者也可以说，默认情况下，窗口跟随着上一个窗口的底部bottom:0;。

如果上一个窗口是浏览器的边框，那么当前窗口就会紧贴着上一个窗口的边框，也就是浏览器的边框。总结以上概述，当我们绝对定位一个窗口，设置窗口的左(left)右(right)都为零，相对于上一个窗口(浏览器)而言，当前窗口的宽度为100%;

.box{ display: block; position: absolute; left: 0; right: 0;} //browser => width:100%; // box => width:100%;

box窗口居左

还是以上面窗口的定位为例，定义父窗口的类为class = "box"，父窗口内部再加一个子窗口定义类为class = "content"，然后给父窗口设置居左left:0;

.content{ display: block; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }

这时候，在默认情况下！我们看到的子窗口自动居左。也不排除父窗口绝对定位居左，使得子窗口也随着父窗口居左。如果我不想子窗口随着上一个窗口的定位而改变子窗口的显示位置，于是我给子窗口进行绝对定位position:absolute; 那么子窗口会不会随着上一个窗口而改变呢？分析如下:

.content{ display: block;　　　　 position:absolute; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }

子窗口居左

于是，我在浏览器上看到子窗口设置居左的情况下，即使父窗口的定位居左，而且宽度为零；子窗口还是能显示出来。

.content{ display: block; position: absolute; left: 0; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }

子窗口居右

当我给子窗口设置居右的情况下，原先父窗口的定位还是居左，而且宽度为零；子窗口却没有了效果，子窗口到底去哪里呢？

.content{ display: block; position: absolute;right: 0; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }

猜想：子窗口是不是在父窗口的最右边？证明这一点很简单，我们只需给父窗口加上一个width:100%，或者给子窗口加一个width:inherit继承父窗口，亦或者修改content定位为position:relative都可以，提前是你的父窗口要有这个width:100%。此时，发现content窗口显示在最右边。

综上得出：如果父窗口宽度为零

当我给父窗口(.box)定位居左，(content窗口)子窗口居左能显示子窗口全部效果。

当我给父窗口(.box)定位居右，不能显示全部效果。如果目前窗口宽度不为零

子窗口定位居右能显示子窗口效果(不全部)，居左也能显示子窗口全部效果。宽度”为零“与”不为零“

简言之，父窗口定位居左，宽度为零，子窗口居左可见(visible)，居右不可见(hidden)。父窗口定位居左，宽度不为零，子窗口居左可见(visible)，居右也可见(visible)。

详细内容见下文！

其实真正要解决的不是上面的证明，而是子窗口(content)是不是随着父窗口(box)来改变的，还是content窗口随着box的父窗口改变(也就是说随着上上一个窗口改变)？因为box窗口和box父窗口的宽度width都是继承关系，会让我们误以为content窗口也会随着box父窗口而改变的。那么我就修改一下box窗口的宽度width：300px;这次box窗口的宽度就不继承box窗口父窗口的宽度，我发现content窗口是在box窗口的最右边。

.box{ display: block; position: absolute; right: 0; width: 300px; vertical-align: middle; background-color: rgba(154, 171, 123,1);}

还是上面的例子，假如现在box父窗口的宽度小于conten子窗口的宽度，设置box父窗口的宽度为width:50px;和conten子窗口twidth:100px; 还是让box父窗口定位居左，当我定位content子窗口居左的时候，还是能看到完整的content子窗口大小，然而box不起作用。

当我定位content窗口居右的时候，看到的不是完整的content窗口的大小，而看到的是box窗口的大小。

总结：a:父窗口的宽度小于子窗口的宽度(子窗口的宽度大于父窗口的宽度)，子窗口居左能显示完整的子窗口的大小(宽度),子窗口居右显示父窗口的大小(宽度)。

反之，b:父窗口的宽度大于子窗口的宽度(子窗口的宽度小于父窗口的宽度)，子窗口居左和居右都能显示完整的父窗口的大小(宽度)。分析a and b

如果a成立的话，我把父窗口定位的位置向右移动20像素，那么子窗口定位居左，显示的是子窗口的宽度。//content_long_a

如果a成立的话，我把父窗口定位的位置向右移动20像素，那么子窗口定位居右，显示的是父窗口的宽度width加上父窗口向右移动20像素的位移的值 // 可见区域 = box_long_a

如果b成立的话，我把父窗口定位的位置向右移动20像素，那么子窗口定位居左/居右，都显示的是父窗口的宽度width。 //可见区域content_long_b

如果a成立的话var box_long_a, content_long_a;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');box_long_a = box_left.style.left + box_left.style.width;content_long_a = box.style.width;如果b成立的话var content_long_b;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');content_long_b = box_left.style.width;

box窗口居右

如果是box窗口居右的情况下，box窗口的宽度还是为零。

.box{ display: block; position: absolute; height: 100px; right: 0; vertical-align: middle; background-color: rgba(154, 171, 123,1);}

子窗口还是绝对定位(父窗口的宽度小于子窗口的宽度的情况下。)如果我给子窗口设置居左，看到的效果是显示完整的子窗口的大小(宽度)。

不过这个子窗口的定位是根据父窗口的宽度为零的位置开始的路径。也就是说，子窗口的左边left的值相对于父窗口的left的来定位的，

并非是子窗口的左边left的值相对于父窗口的right来定位的。

box{right:len;} <==> content{left:len2;} // len2 = len;

如果我给子窗口设置居右，看到的效果是显示完整的子窗口的大小(宽度)。

这里子窗口的right是根据父窗口的right的值来定位，所以，子窗口从右向左移动多少像素、位移。

子窗口还是绝对定位(父窗口的宽度大于子窗口的宽度的情况下。)

此刻我们不管我们怎么定位子窗口的位置，都能看到子窗口的效果。