CSS 进阶学习（一）

最新推荐文章于 2023-01-31 21:18:35 发布

原创最新推荐文章于 2023-01-31 21:18:35 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了CSS中的定位概念，包括相对定位、绝对定位和固定定位，详细解释了包含块的概念。此外，文章还介绍了浮动、百分比尺寸的应用，并展示了实现三列布局的不同方法，如圣杯布局和双飞翼布局。同时，讨论了滚动条的控制以及如何用绝对定位模拟固定定位效果。

文章目录

定位
包含块
默认值
百分比
浮动
伪等高布局
三列布局
滚动条
- 禁止系统默认滚动条
使用绝对定位来模拟固定定位

定位

定位参照于谁来定位？

没有定位：包含块
相对定位：元素本来的位置（该位置在文档流里面）
绝对定位：包含块
①如果最近的祖先元素中存在定位元素，则定位元素就是包含块；
②如果没有，包含块为初始包含块
固定定位：视口

包含块

“根元素”的包含块（也成为初始包含块）。在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。
什么是初始包含块？
初始包含块是视窗大小的矩形，但它不等于视窗。
对于一个非根元素，如果其position的值是relative或static，包含块则由最近的块级框的内容边界构成。
对于一个非根元素，如果其position的值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何元素），过程如下：
①如果这个祖先元素是块级元素，包含块则设置为该元素的内边距边界
②如果没有祖先元素，元素的包含块定义为初始包含块。

默认值

left top right bottom width height 默认值都是auto，不可继承
margin padding 默认值都是0
border-width ,如果不存在border-style就没有边框；二者缺一不可

百分比

百分比参照于谁？

width、margin、padding的百分比参照于包含块的width
height的百分比参照于包含块的height
left的百分比参照于包含块的width
top的百分比参照于包含块的height

浮动

浮动会提高层级，层级提高半层
一个元素分两层:上层是文字相关的东西，下层是盒模型相关的东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			/*
			 * 一个元素分两层:上层是文字相关的东西，下层是盒模型相关的东西
			 * 浮动会提高层级，层级提高半层
			 */
			#up{
				float: left;
				background: pink;
			}
			#down{
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="up">
			upupup
		</div>
		<div id="down">
			downdowndown
		</div>
	</body>
</html>

未浮动前：
在这里插入图片描述
浮动后：

伪等高布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 绝对定位、浮动时，margin左右auto是无效的
			 */
			*{
				margin: 0;
				padding: 0;
				
			}
			#wrap{
				
				width: 700px;
				border: 1px solid;
				margin: 0 auto;
				overflow: hidden;
			}
			#wrap .left{
				float: left;
				width: 200px;
				background: pink;
				padding-bottom: 1000px;
				margin-bottom: -1000px;
			}
			#wrap .right{
				float: left;
				width: 500px;
				background: deeppink;
				padding-bottom: 1000px;
				margin-bottom: -1000px;
				
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="wrap" class="clearfix">
			<div class="left">
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
			</div>
			<div class="right">
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

三列布局

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

定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			body{
				/*
				 *   min-width=2*left+right
				 * 或2*right+left
				 */
				min-width: 600px;
			}
			div{
				height: 100px;
				background: pink;
			}
			#left,#right{
				width: 200px;
			}
			#middle{
				background: deeppink;
				padding: 0 200px;
			}
			#left{
				position: absolute;
				left: 0;
				top: 0;
			}
			#right{
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="left">left</div>
		<div id="middle">middle</div>
		<div id="right">right</div>
	</body>
</html>

效果图：
在这里插入图片描述

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				/*
				 * min-width=2*left+right
				 * 或2*right+left
				 */
				min-width: 600px;
			}
			div{
				height: 100px;
				background: pink;
			}
			#left,#right{
				width: 200px;
			}
			#left{
				float: left;
				
			}
			#right{
				float:right;
			}
			#middle{
				background: deeppink;
			}	
		</style>
	</head>
	<body>
		<div id="left">left</div>
		<div id="right">right</div>
		<div id="middle">middle</div>
	</body>
</html>

效果图：
在这里插入图片描述

圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 *浮动：搭建完整的布局框架
			 * margin为负值来调整旁边两列的位置（使三列布局到一行上）
			 * 使用相对定位：调整旁边两列的位置（使两列位置调整到两头）
			 */
			*{
				margin: 0;
				padding: 0;
			}
			#header,#footer{
				height: 20x;
				text-align: center;
				border: 1px solid deeppink;
				background: gray;
			}
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
				
			}
			#content{
				
				padding: 0 200px;
			}
			#content .left{
				position: relative;
				left: -200px;
				margin-left: -100%;
				float: left;
				width: 200px;
				background: yellow;
			} 
			#content .right{
				position: relative;
				/*
				 * 往外扩为为负值，往里缩是正值
				 */
				right: -200px;
				margin-left: -200px;
				float: left;
				width: 200px;
				background: yellow;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

效果图：
在这里插入图片描述

圣杯布局（+伪等高布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 浮动：搭建完整的布局框架
			 * margin为负值来调整旁边两列的位置（使三列布局到一行上）
			 * 使用相对定位：调整旁边两列的位置（使两列位置调整到两头）
			 */
			*{
				margin: 0;
				padding: 0;
			}
			#header,#footer{
				height: 20x;
				text-align: center;
				border: 1px solid deeppink;
				background: gray;
			}
			/*伪等高布局*/
			#content .middle,#content .left,#content .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
				
			}
			#content{
				overflow: hidden;
				padding: 0 200px;
			}
			#content .left{
				position: relative;
				left: -200px;
				margin-left: -100%;
				float: left;
				width: 200px;
				background: yellow;
			} 
			#content .right{
				position: relative;
				/*
				 * 往外扩为为负值，往里缩是正值
				 */
				right: -200px;
				margin-left: -200px;
				float: left;
				width: 200px;
				background: yellow;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

效果图：
在这里插入图片描述

双飞翼布局（+伪等高布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			*{
				margin: 0;
				padding: 0;
				
			}
			body{
				min_width
				600px
			}
			#header,#footer{
				border: 1px solid;
				background: gray;
				text-align: center;
				
			}
			/*伪等高布局*/
			#content .middle,#content .left,#content .right{
				/*padding-bottom: 10000px;
				margin-bottom: -10000px;*/
				height: 50px;
				line-height: 50px;
				float: left;
			}
			#content{
				overflow: hidden;
			}
			/*双飞翼布局*/
			#content .middle{
				width: 100%;
				background: deeppink;
			}
			#content .m_inner{
				padding: 0 200px;
			}
			#content .left,#content .right{
				width: 200px;
				text-align:center;
				background: pink;
			}
			#content .left{
				margin-left:-100%;
			}
			#content .right{
				margin-left:-200px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<h4>header</h4>
		</div>
		<div id="content">
			<div class="middle">
				<div class="m_inner">
					middle
				</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">
			<h4>header</h4>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

圣杯布局和双飞翼布局实现的对比

两种布局的方式都是把主列放在文档流最前面，使主列优先加载
两种布局方式在实现上也有不同之处，都是让散列浮动，然后通过负外边距形成三列布局
两种布局方式的不同之处在于如何处理中间主列的位置：

圣杯布局是利用父容器的左、右内边距+两个从列相对定位
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

滚动条

如果html和body中只有其中一个含有overflow: scroll;，这个属性会作用给文档
如果html和body中都有overflow: scroll;，则html上的会作用给文档，body上的会作用给自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				margin: 30px;
				border: 1px solid;
				height: 100%;
				overflow: scroll;
			}
			body{
				margin: 30px;
				border: 1px solid pink;
				height: 80%;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div style="height: 1000px;"></div>
	</body>
</html>

禁止系统默认滚动条

如果html和body中只有其中一个含有overflow属性，则该属性作用给文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 如果html和body中只有其中一个含有overflow属性，则该属性作用给文档
			 */
			html,body{
				height: 100%;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div style="height: 1000px;"></div>
	</body>
</html>

使用绝对定位来模拟固定定位

怎么使用绝对定位来模拟固定定位
1、禁止系统滚动条
2、将滚动条加给body
3、让body的尺寸变为视口的尺寸：height:100%;

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