锚点定位的妙用/常用的清除浮动的方法/实现页面的水平垂直居中

Tang_jibin

已于 2023-03-05 10:08:53 修改

阅读量100

点赞数

分类专栏： Css专栏文章标签： css css3 html

于 2023-03-04 23:13:03 首次发布

本文链接：https://blog.csdn.net/Tang_jibin/article/details/129340801

版权

Css专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.利用锚点定位制作图册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0 auto;
				padding: 0;
			}
			h2{
				height: 48px;
				line-height: 48px;
				text-align: center;
				color: red;
			}
			.pic{
				width: 470px;
				height: 365px;
				background-color: deepskyblue;
			}
			.pic-all{
				width: 421px;
				height: 324px;
				border: 2px solid #cccccc;
			}
			.pic-boxLeft{
				width: 316px;
				height: 276px;
				float: left;
				border: 2px solid #cccccc;
				border-bottom: none;
				border-left: none;
				background-color: aqua;
				overflow: hidden;
			}
			.pic-boxLeft>div{
				width: 314px;
				height: 276px;
			}
			.pic-boxLeft>div img,.pic-boxRight>div img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
			.pic-boxRight{
				width: 103px;
				height: 276px;
				float: right;
				overflow: hidden;
				background-color: antiquewhite;
			}
			.pic-boxRight:hover{
				overflow: auto;
				overflow-x: hidden;
			}
			.pic-boxRight::-webkit-scrollbar {
			   /*高宽分别对应横竖滚动条的尺寸*/
			    width: 5px;  
			  }
			
			  /*滚动条里面小方块*/
			.pic-boxRight::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background: pink;
			  }
			  /*滚动条里面轨道*/
			.pic-boxRight::-webkit-scrollbar-track {
			    border-radius: 10px;
			    background: #EDEDED;
			  }
			.pic-boxRight>div{
				width: 90px;
				height: 75px;
				margin:5px;
				border: 2px solid #cccccc;
			}
		</style>
	</head>
	<body>
		<div class="pic">
			<div class="pic-all">
				<h2>美女图册</h2>
				<div class="pic-boxLeft">
					<div id="leftBox1">
						<img src="../img/mn1.jpg" alt="">
					</div>
					<div id="leftBox2">
						<img src="../img/mn2.jpg" alt="">
					</div>
					<div id="leftBox3">
						<img src="../img/mn3.jpg" alt="">
					</div>
					<div id="leftBox4">
						<img src="../img/mn4.jpg" alt="">
					</div>
					<div id="leftBox5">
						<img src="../img/mn5.jpg" alt="">
					</div>
					<div id="leftBox6">
						<img src="../img/mn6.jpg" alt="">
					</div>
					<div id="leftBox7">
						<img src="../img/mn7.jpg" alt="">
					</div>
					<div id="leftBox8">
						<img src="../img/mn8.jpg" alt="">
					</div>
				</div>
				<div class="pic-boxRight">
					<div id="rightBox1">
						<a href="#leftBox1"><img src="../img/c1.jpg" alt=""></a>
					</div>
					<div id="rightBox2">
						<a href="#leftBox2"><img src="../img/c2.jpg" alt=""></a>
					</div>
					<div id="rightBox3">
						<a href="#leftBox3"><img src="../img/c3.jpg" alt=""></a>
					</div>
					<div id="rightBox4">
						<a href="#leftBox4"><img src="../img/c4.jpg" alt=""></a>
					</div>
					<div id="rightBox5">
						<a href="#leftBox5"><img src="../img/c5.jpg" alt=""></a>
					</div>
					<div id="rightBox6">
						<a href="#leftBox6"><img src="../img/c6.jpg" alt=""></a>
					</div>
					<div id="rightBox7">
						<a href="#leftBox7"><img src="../img/c7.jpg" alt=""></a>
					</div>
					<div id="rightBox8">
						<a href="#leftBox8"><img src="../img/c8.jpg" alt=""></a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：

2.了解浮动的影响和清除浮动的方法

1.浮动的影响：元素浮动后会脱离文档流，在父元素没有设置高度的情况下会引起高度塌陷。

2.解决办法：

（1）.给父元素设置overflow：hidden；（缺点：溢出内容会被隐藏）
（2）.给父元素设置高度；（缺点：不灵活）
（3）.在需要清浮动的后面加上一个标签；给标签加上clear：both；（缺点：造成代码冗余）
（4）.万能清除浮动法：

.clear-fix::after{
                   content:"";
                   display:block;
                   width:100%;
                   height:0;
                   overflow:hidden;
                   clear:none;
                   visibility:hidden;    <!-- 隐藏 -->
                 }

用法：（未浮动前）

<style>
	body,div{
		margin: 0 ;
		padding: 0 ;
	}
	.bigbox{
		background-color: yellow;
	}
	.box1{
		width: 200px;
		height: 200px;
		background-color: aqua;
	}
	.box2{
		width: 400px;
		height: 400px;
		background-color: red;
	}		
</style>

<div class="bigbox">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

运行结果：

box2浮动后（出现高度塌陷）

解决办法：（万能清除浮动法）

<style>
	body,
	div {
		margin: 0;
		padding: 0;
	}

	.bigbox {
		background-color: yellow;
	}

	.box1 {
		width: 200px;
		height: 200px;
		background-color: aqua;
	}

	.box2 {
		float: left;
		width: 400px;
		height: 400px;
		background-color: red;
	}

	.clear-fix::after {
		content: "";
		display: block;
		width: 100%;
		height: 0;
		overflow: hidden;
		clear: none;
		visibility: hidden;
	}
</style>

<div class="bigbox clear-fix">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

3.实现元素在页面上垂直居中的方法

方法一：

<body>
  <div></div>
</body>

div{
      width: 200px;
      height: 200px;
      /* 四个定位值为0 */
      top: 0;left: 0;right: 0;bottom: 0;
      /* margin设为auto */
      margin: auto;
      background-color: red;
      /* 不止适用于固定定位,绝对定位相对于父元素相对定位居中同样适用 */
      position: fixed;
}

运行结果：

方法二：

<body>
  <div></div>
</body>

div{
      width: 200px;
      height: 200px;
      /* 四个定位值为0 */
      top: 0;left: 0;right: 0;bottom: 0;
      /* margin设为auto */
      margin: auto;
      background-color: aqua;
      /* 不止适用于固定定位,绝对定位相对于父元素相对定位居中同样适用 */
      position: fixed;
}

运行结果：