devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web布局——说清楚fixed布局

作者：从前慢现在也慢 | 2024-03-30 08:02:43

赞

踩

web布局——说清楚fixed布局

极限省流

想要fixed做导航页面：指定清楚top、left、right、bottom，没指定清楚布局位置就会采用默认的方式：

0）父元素的padding：fixed元素相对位移

1）同级元素是fixed元素：覆盖

2）同级元素有非fixed元素-》看它们的margin

使用总结：还是用top、left、right直接指定好

准备

准备好一个html文件和一个css文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>fixed理解</title>
  5. 	<link rel="stylesheet" type="text/css" href="./fixed_and_margin.css">
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

2）在css文件中写出fixed元素和非fixed元素（一般元素）做区分

  1. .fixed_item{
  2. 	position: fixed;
  3. 	background-color: lightgreen;
  4. }
  5.  
  6. .normal_item{
  7. 	background: lightblue;
  8. 	margin: 0px;
  9. }

 3）为了看出fixed的效果，我们写一个obey样式，设定它的min-height，以便页面够长可以“测试滚动”

  1. .obey{
  2. 	background: lightblue;
  3. 	margin: 0px;
  4. 	min-height: 500px;
  5. }

一、fixed的固定效果

fixed脱离文档流——就是相对整个窗口浮动

fixed使得元素一直保持在屏幕的某一位置，不会随着滚轴在页面上的位移而改变

实例：

加两个占位元素以后，页面就足够长可以滚动了，滚动的时候会发现fixed元素一直在左侧

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>fixed理解</title>
  5. 	<link rel="stylesheet" type="text/css" href="./fixed_and_margin.css">
  6. </head>
  7. <body>
  8. 	
  9. 	<div class="fixed_item">
  10. 		首个fixed元素
  11. 	</div>
  12. 	<div class="obey">占位元素</div>
  13. 	<div class="obey">占位元素</div>
  14. 	
  15. </body>
  16. </html>

 

二、fixed布局

接下来以几个实例说明

1、之前的非flex元素

包括父元素和同级元素的height

htnl代码如下：

  1. <body>
  2.     <pre>
  3.         空一行
  4.         空一行
  5.         fixed之前的pre元素
  6.     </pre>
  7.     <div class="fixed_item">
  8.         首个fixed元素
  9.     </div>
  10.     <div class="fixed_item">
  11.         紧接着的一个fixed元素
  12.     </div>
  13.     
  14.     <div class="obey">占位元素</div>
  15.     <div class="obey">占位元素</div>
  16. </body>

效果显示：

①可以看出来“第一个fixed元素”已经看不到了，被"紧接着的一个fixed元素"遮挡了

 ②画面里仅有的一个fixed元素在<pre></pre>打完之后才出现，所以pre实体内容的高度会影响fixed元素的布局

2、margin

验证fixed只受其之前元素（包含父元素）和同级元素margin的影响

1）父元素的margin

 ①向html中加入一个fixed_item，发现fixed_item离左上角还有些距离

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>fixed理解</title>
  5. 	<link rel="stylesheet" type="text/css" href="./fixed_and_margin.css">
  6. </head>
  7. <body>
  8. 	
  9. 	<div class="fixed_item">
  10. 		首个fixed元素
  11. 	</div>
  12. </body>
  13. </html>

②将所有的margin清零

  1. body{
  2. 	margin: 0px;
  3. }

刷新得到效果：

结论：故fixed元素受其父元素的margin的影响

2）同级元素的margin

现在我们在fixed_item元素后增加一个<div>元素（类别认定为normal_item_wm，with mragin的意思）：

  1. <body>
  2. 	
  3. 	<div class="fixed_item">
  4. 		首个fixed元素
  5. 	</div>
  6. 	<div class="normal_item_wm">
  7. 	同级元素，带margin</div>
  8. 	<div class="obey">占位元素</div>
  9. 	<div class="obey">占位元素</div>
  10.  
  11. </body>

定制样式：为了突出显示，定margin为100px

  1. .normal_item_wm{
  2. 	background: lightyellow;
  3. 	margin: 100px;
  4. }

刷新结果显示：

结论：fixed元素的位置再一次发生了改变，说明同级元素的margin依然会影响到fixed的布局

3）子元素的margin

html中的代码是：

  1. <body>
  2.     <div class="fixed_item">
  3.         首个fixed元素
  4.         <div class="normal_item_wm">
  5.             子元素，带margin</div>
  6.     </div>
  7.     <div class="obey">占位元素</div>
  8.     <div class="obey">占位元素</div>
  9. </body>

刷新效果如下：

补充：子元素也跟着fixed，脱离文档流

结论：fixed_item的位置不会受其自己的子元素的margin的影响

4）由2）和3）可以看出来margin是作用在直接的父子元素之间的

3、padding

先说结论：只有父元素的padding才会影响fixed_item的布局

1）父元素的padding

html代码：

  1. <body>
  2.     <div class="fixed_item">
  3.         首个fixed元素
  4.        </div>
  5.  
  6.     <div class="obey">占位元素</div>
  7.     <div class="obey">占位元素</div>
  8. </body>

css代码：

  1. body{
  2. 	margin: 0px;
  3. 	padding: 100px;
  4. }

显示效果：

 

2）同级元素的padding

  1. <body>
  2.     <div class="fixed_item">
  3.         首个fixed元素
  4.     </div>
  5.     <div class="normal_item">
  6.     	带padding的普通元素
  7.     </div>
  8.  
  9.     <div class="obey">占位元素</div>
  10.     <div class="obey">占位元素</div>
  11. </body>

记得将body还原成默认css

  1. /*body{
  2. 	margin: 0px;
  3. 	padding: 100px;
  4. }*/
  5. .fixed_item{
  6. 	position: fixed;
  7. 	background-color: lightgreen;
  8. 	margin: 0px;
  9.  
  10. }
  11.  
  12. .normal_item{
  13. 	background: lightblue;
  14. 	margin: 0px;
  15. 	padding: 100px;
  16. }

效果如下图 

                                ​​​​​​​        ​​​​​​​        

4、直接指定位置

上述介绍中，可以看到默认情况下的fixed元素位置有太多的影响因素，因此我们需要一种直接指定位置的方式——[top,bottom,left,right]（如果没有指定清楚某一方位，就会采用二的1-3默认布局）

html文件：

  1. <body>
  2.     <pre>
  3.         空一行
  4.         空一行
  5.         fixed之前的pre元素
  6.     </pre>
  7.     <div class="fixed_item">
  8.         首个fixed元素
  9.     </div>
  10.     <div class="obey">占位元素</div>
  11.     <div class="obey">占位元素</div>
  12.  
  13. </body>

css文件

  1. .fixed_item{
  2. 	position: fixed;
  3. 	background-color: lightgreen;
  4. 	margin: 0px;
  5. 	top:10px;
  6. 	left: 100px;
  7. 	right: 100px;
  8.  
  9. }
  10.  
  11.  
  12. .obey{
  13. 	background: lightblue;
  14. 	margin: 0px;
  15. 	min-height: 500px;
  16. }

三、fixed应该怎么用？

fixed可以使元素相对视角窗口固定，个人觉得非常适合用来做导航栏、侧边栏

其实在2.4的介绍中已经给出了fixed的基本用法，只是还存在问题：fixed浮空遮挡了pre的部分内容

可以给fixed对应位置“垫一个底板”，由于fixed已经直接指定了位置，所以不担心它会被底板影响布局

html中：

  1. <body>
  2. 	<div class="navibg">
  3.     <div class="navi">CSDN水平导航</div>
  4. 	</div>
  5.     <pre>
  6.     	pre开始
  7.     	pre1
  8.     	pre2
  9.     	pre中间
  10.     	pre3
  11.     	pre结束
  12.  
  13.     </pre>
  14.     <div class="helpnavi"></div>
  15.    
  16.     <div class="obey">占位元素1</div>
  17.     <div class="obey">占位元素2</div>
  18. </div>
  19. </body>

css文件中

  1. .navibg{
  2. 	height: 48px;
  3. }
  4. .navi{
  5. 	/*需求：占满屏幕*/
  6. 	height: 48px;
  7. 	background-color: lightgreen;
  8. 	position: fixed;
  9. 	left: 2px;
  10. 	right: 2px;
  11. }
  12.  
  13. .obey{
  14. 	min-height: 500px;
  15. }

效果显示：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/339736
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号