web布局——说清楚fixed布局

极限省流

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

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

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

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

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

准备

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

fixed理解

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

.fixed_item{position: fixed;background-color: lightgreen;}.normal_item{background: lightblue;margin: 0px;}

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

.obey{background: lightblue;margin: 0px;min-height: 500px;}

一、fixed的固定效果

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

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

实例：

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

fixed理解首个fixed元素占位元素占位元素

 

二、fixed布局

接下来以几个实例说明

1、之前的非flex元素

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

htnl代码如下：

    
        空一行        空一行        fixed之前的pre元素    
            首个fixed元素                紧接着的一个fixed元素            占位元素    占位元素

效果显示：

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

 ②画面里仅有的一个fixed元素在

打完之后才出现，所以pre实体内容的高度会影响fixed元素的布局

2、margin

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

1）父元素的margin

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

fixed理解首个fixed元素

②将所有的margin清零

body{margin: 0px;}

刷新得到效果：

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

2）同级元素的margin

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

首个fixed元素同级元素，带margin占位元素占位元素

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

.normal_item_wm{background: lightyellow;margin: 100px;}

刷新结果显示：

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

3）子元素的margin

html中的代码是：

            首个fixed元素                    子元素，带margin        占位元素    占位元素

刷新效果如下：

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

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

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

3、padding

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

1）父元素的padding

html代码：

            首个fixed元素           占位元素    占位元素

css代码：

body{margin: 0px;padding: 100px;}

显示效果：

 

2）同级元素的padding

            首个fixed元素            带padding的普通元素        占位元素    占位元素

记得将body还原成默认css

/*body{margin: 0px;padding: 100px;}*/.fixed_item{position: fixed;background-color: lightgreen;margin: 0px;}.normal_item{background: lightblue;margin: 0px;padding: 100px;}

效果如下图 

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

4、直接指定位置

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

html文件：

    
        空一行        空一行        fixed之前的pre元素    
            首个fixed元素        占位元素    占位元素

css文件

.fixed_item{position: fixed;background-color: lightgreen;margin: 0px;top:10px;left: 100px;right: 100px;}.obey{background: lightblue;margin: 0px;min-height: 500px;}

三、fixed应该怎么用？

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

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

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

html中：

    CSDN水平导航    
    pre开始    pre1    pre2    pre中间    pre3    pre结束    
           占位元素1    占位元素2

css文件中

.navibg{height: 48px;}.navi{/*需求：占满屏幕*/height: 48px;background-color: lightgreen;position: fixed;left: 2px;right: 2px;}.obey{min-height: 500px;}

效果显示：