css2.1--笔记4（fix失效+总结）

梦里梦外; 2022-11-26 01:53 89阅读 0赞

## 解决ie6底下fixed失效问题： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>fixed</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#test{
    				position: fixed;
    				width: 100px;
    				height: 100px;
    				left: 50px;
    				top:50px;
    				background-color: #6495ED;
    			}
    		</style>
    	</head>
    	<body style="height: 1000px;">
    		<div id="test">
    			
    		</div>
    	</body>
    </html>

![20200810113805980.gif][]

**在ie6以上都没有问题，滚动条滑动，位置不发生变化，但是fixed在ie6的情况下，会失效。**

*  body上一层为HTML，HTML的上一层为文档，目前的滚动条在文档上，
 *  如果说，你想让视口高度，HTML、body高度，三合一，也就是三个统一。必须一层一层继承下来，也就是说，body，HTML，样式中都得写 height : 100%
 *  如果想让滚动条出现在body中，最好在HTML、body中都写overflow: scroll;这里，HTML的overflow: scroll;，是作用在文档的，body的作用于自己。
 *  如果body、HTML中只写一个overflow: scroll;，滚动条只作用给文档。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>滚动条</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html{
    				margin: 30px;
    				border: 1px solid #6495ED; 
    				/*三合一,一层层继承*/
    				height: 100%;
    				overflow: scroll;
    			}
    			body{
    				margin: 30px;
    				border:1px solid #FF1493;
    				/*三合一,一层层继承*/
    				height: 100%;
    				overflow: scroll;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test" style="height: 1000px;">
    			
    		</div>
    	</body>
    </html>

![20200810120439841.gif][]

只要HTML、body中有一个overflow: hidden;就可以实现取消滚动条出现。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>滚动条</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 1000px;
    				overflow: hidden;
    			}
    			/*html{
    				overflow: hidden;
    				overflow: scroll;
    			}
    			body{
    				overflow: scroll;
    			}*/
    		</style>
    	</head>
    	<body>
    		<div id="test" style="height: 1000px;">
    			
    		</div>
    	</body>
    </html>

## 扩展---前端兼容性自查工具： ##

Can i use:  [ https://caniuse.com/\#home][https_caniuse.com_home]

## 对之前学习的总结： ##

1.定位参照于谁块来定位

没有定位时：包含块

相对定位：元素本来的位置

绝对定位：包含块----如果最近的祖先元素中存在定位元素，则这个定位元素就是包含块；如果没有，包含块为初始化包含块

固定：视口

2.什么是初始包含块：

视窗大小的矩形，但是不是视窗

3.left、top、right、bottom、width、height-----默认值：auto

margin、padding-----默认值0

boder-width  ----如果不存在border-style

4.百分比参照于谁：

width、margin、padding：包含块的width

height：包含块的height

left：包含块的width

top：包含块的height

5.浮动：

浮动提示半层

6.三列布局

俩边固定，当中自适应，中间列要完整的显示，中间列要优先加载

定位

浮动

圣杯

双飞翼

7.margin为负值（margin不影响元素的位置）

负值将元素的边界往里收，正值将元素的边界往外扩

8.为等高布局

9.fixed

怎么使用决定定位模拟固定定位

1.禁止系统滚动条

2.将滚动条加给body

3.让body的尺寸变为视口尺寸

[20200810113805980.gif]: /images/20221124/3f1edd487dfa4bc68c9bfd604227c52d.png
[20200810120439841.gif]: /images/20221124/5da6ae1bf5604a41b3b7164c5b8a4758.png
[https_caniuse.com_home]: http://xn--https-rfa//caniuse.com/#home