CSS的定位原理
2015-09-28 10:33
555 查看
现在有一个窗口绝对定位position:absolute;,设置css样式left: 0;right: 0;,可以实现窗口的宽度百分之百(100%)。
这时候,没有给窗口设置顶部top:0;,默认情况下窗口顶部为零,或者也可以说,默认情况下,窗口跟随着上一个窗口的底部bottom:0;。
如果上一个窗口是浏览器的边框,那么当前窗口就会紧贴着上一个窗口的边框,也就是浏览器的边框。 总结以上概述,当我们绝对定位一个窗口,设置窗口的左(left)右(right)都为零, 相对于上一个窗口(浏览器)而言,当前窗口的宽度为100%;如下图1↓
(图1)
还是以上面窗口的定位为例,定义父窗口的类为class = "box",父窗口内部再加一个子窗口定义类为class = "content",然后给父窗口设置居左left:0;。如下图2↓
(图2)
这时候,在默认情况下!我们看到的子窗口自动居左。也不排除父窗口绝对定位居左,使得子窗口也随着父窗口居左。 如果我不想子窗口随着上一个窗口的定位而改变子窗口的显示位置,于是我给子窗口进行绝对定位position:absolute; 那么子窗口会不会随着上一个窗口而改变呢?分析如下:
View
Code
于是,我在浏览器上看到子窗口设置居左的情况下,即使父窗口的定位居左,而且宽度为零;子窗口还是能显示出来。如下图3↓
(图3)
当我给子窗口设置居右的情况下,原先父窗口的定位还是居左,而且宽度为零;子窗口却没有了效果,子窗口到底去哪里呢?如下图4↓
(图4)
猜想:子窗口是不是在父窗口的最右边?证明这一点很简单,我们只需给父窗口加上一个width:100%,或者给子窗口加一个width:inherit继承父窗口,亦或者修改content定位为position:relative都可以,提前是你的父窗口要有这个width:100%。此时,发现content窗口显示在最右边。也就是说子窗口继承父窗口的宽度是不需要定位父窗口right:0;如下图5↓
(图5)
综上得出:
如果父窗口宽度为零
当我给父窗口(.box)定位居左,(.content)子窗口居左能全部显示子窗口效果。
当我给父窗口(.box)定位居右,不能全部显示子窗口效果。
如果子窗口宽度不为零
还是父窗口(.box)定位居右,子窗口定位居右能显示子窗口效果(不全部)(图6),子窗口定位居左也能显示子窗口全部效果(图7)。只是二者效果有点不同而已!
(图6)
(图7)
宽度”为零“与”不为零“
简言之,父窗口定位居左,宽度为零,子窗口居左可见(visible),居右不可见(hidden)。父窗口定位居左,宽度不为零,子窗口居左可见(visible),居右也可见(visible)。
详细内容见下文!
其实真正要解决的不是上面的证明,而是子窗口(content)是不是随着父窗口(box)来改变的,还是子窗口随着父父窗口改变(也就是说随着上上一个窗口改变)?因为父窗口和父父窗口的宽度width都是继承关系,会让我们误以为子窗口也会随着父父窗口而改变的。那么我就修改一下父窗口的宽度width:300px;这次父窗口的宽度就不继承父父窗口的宽度,当我定位子窗口居右的时候,我发现子窗口是在父窗口的最右边。如下图8↓
(图8)
还是上面的例子,假如现在父窗口的宽度小于子窗口的宽度,设置父窗口的宽度为width:50px;和子窗口width:100px; 还是让父窗口定位居左,当我定位子窗口居左的时候,还是能看到完整的子窗口大小,然而父窗口不起作用。如下图9↓
(图9)
当我定位子窗口居右的时候,看到的不是完整的子窗口的大小,而看到的是父窗口的大小。如下图10↓
(图10)
总结:a:父窗口的宽度小于子窗口的宽度(子窗口的宽度大于父窗口的宽度),子窗口居左能显示完整的子窗口的大小(宽度),子窗口居右显示父窗口的大小(宽度)。
反之,b:父窗口的宽度大于子窗口的宽度(子窗口的宽度小于父窗口的宽度),子窗口居左和居右都能显示完整的父窗口的大小(宽度)。
如果a成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居左,显示的是子窗口的宽度。//content_long_a
如果a成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居右,显示的是父窗口的宽度width加上父窗口向右移动20像素的位移的值 // 可见区域 = box_long_a
如果b成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居左/居右,都显示的是父窗口的宽度width。 //可见区域content_long_b
如果是父窗口居右的情况下,父窗口的宽度还是为零。
子窗口还是绝对定位(父窗口的宽度小于子窗口的宽度的情况下。)如果我给子窗口设置居左,看到的效果是显示完整的子窗口的大小(宽度)。
不过这个子窗口的定位是根据父窗口的宽度为零的位置开始的路径。也就是说,子窗口的左边left的值相对于父窗口的left的来定位的,
并非是子窗口的左边left的值相对于父窗口的right来定位的。
如果我给子窗口设置居右,看到的效果是显示完整的子窗口的大小(宽度)。
这里子窗口的right是根据父窗口的right的值来定位,所以,子窗口从右向左移动多少像素、位移。
子窗口还是绝对定位(父窗口的宽度大于子窗口的宽度的情况下。)
此刻我们不管我们怎么定位子窗口的位置,都能看到子窗口的效果。
总结:绝对定位,父窗口的宽度为零或不为零,子窗口居左,子窗口都可见,子窗口居右,子窗口并非都可见。
这时候,没有给窗口设置顶部top:0;,默认情况下窗口顶部为零,或者也可以说,默认情况下,窗口跟随着上一个窗口的底部bottom:0;。
如果上一个窗口是浏览器的边框,那么当前窗口就会紧贴着上一个窗口的边框,也就是浏览器的边框。 总结以上概述,当我们绝对定位一个窗口,设置窗口的左(left)右(right)都为零, 相对于上一个窗口(浏览器)而言,当前窗口的宽度为100%;如下图1↓
.box{ display: block; position: absolute; left: 0; right: 0; height:100px; } //browser => width:100%; // box => width:100%;
(图1)
box窗口居左
还是以上面窗口的定位为例,定义父窗口的类为class = "box",父窗口内部再加一个子窗口定义类为class = "content",然后给父窗口设置居左left:0;。如下图2↓.content{ display: block; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }
(图2)
这时候,在默认情况下!我们看到的子窗口自动居左。也不排除父窗口绝对定位居左,使得子窗口也随着父窗口居左。 如果我不想子窗口随着上一个窗口的定位而改变子窗口的显示位置,于是我给子窗口进行绝对定位position:absolute; 那么子窗口会不会随着上一个窗口而改变呢?分析如下:
View
Code
子窗口居左
于是,我在浏览器上看到子窗口设置居左的情况下,即使父窗口的定位居左,而且宽度为零;子窗口还是能显示出来。如下图3↓.content{ display: block; position: absolute; left: 0; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }
(图3)
子窗口居右
当我给子窗口设置居右的情况下,原先父窗口的定位还是居左,而且宽度为零;子窗口却没有了效果,子窗口到底去哪里呢?如下图4↓.content{ display: block; position: absolute; right: 0; width: 100px; height: 100px; background-color: rgb(54, 171, 23); }
(图4)
猜想:子窗口是不是在父窗口的最右边?证明这一点很简单,我们只需给父窗口加上一个width:100%,或者给子窗口加一个width:inherit继承父窗口,亦或者修改content定位为position:relative都可以,提前是你的父窗口要有这个width:100%。此时,发现content窗口显示在最右边。也就是说子窗口继承父窗口的宽度是不需要定位父窗口right:0;如下图5↓
(图5)
综上得出:
如果父窗口宽度为零
当我给父窗口(.box)定位居左,(.content)子窗口居左能全部显示子窗口效果。
当我给父窗口(.box)定位居右,不能全部显示子窗口效果。
如果子窗口宽度不为零
还是父窗口(.box)定位居右,子窗口定位居右能显示子窗口效果(不全部)(图6),子窗口定位居左也能显示子窗口全部效果(图7)。只是二者效果有点不同而已!
(图6)
(图7)
宽度”为零“与”不为零“
简言之,父窗口定位居左,宽度为零,子窗口居左可见(visible),居右不可见(hidden)。父窗口定位居左,宽度不为零,子窗口居左可见(visible),居右也可见(visible)。
详细内容见下文!
其实真正要解决的不是上面的证明,而是子窗口(content)是不是随着父窗口(box)来改变的,还是子窗口随着父父窗口改变(也就是说随着上上一个窗口改变)?因为父窗口和父父窗口的宽度width都是继承关系,会让我们误以为子窗口也会随着父父窗口而改变的。那么我就修改一下父窗口的宽度width:300px;这次父窗口的宽度就不继承父父窗口的宽度,当我定位子窗口居右的时候,我发现子窗口是在父窗口的最右边。如下图8↓
.box{ display: block; position: absolute; right: 0; width: 300px;height:100px; vertical-align: middle; background-color: rgba(154, 171, 123,1); }
(图8)
还是上面的例子,假如现在父窗口的宽度小于子窗口的宽度,设置父窗口的宽度为width:50px;和子窗口width:100px; 还是让父窗口定位居左,当我定位子窗口居左的时候,还是能看到完整的子窗口大小,然而父窗口不起作用。如下图9↓
(图9)
当我定位子窗口居右的时候,看到的不是完整的子窗口的大小,而看到的是父窗口的大小。如下图10↓
(图10)
总结: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_left.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{ 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的值来定位,所以,子窗口从右向左移动多少像素、位移。
子窗口还是绝对定位(父窗口的宽度大于子窗口的宽度的情况下。)
此刻我们不管我们怎么定位子窗口的位置,都能看到子窗口的效果。
总结:绝对定位,父窗口的宽度为零或不为零,子窗口居左,子窗口都可见,子窗口居右,子窗口并非都可见。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题