前端篇~~~css（4）

最新推荐文章于 2024-07-24 10:40:52 发布

小小前端工程师

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量559

点赞数 22

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_61912766/article/details/140384582

版权

各位小主们，小编今日准时点卯，更新码字使小编快乐~~~（ps：真的吗？小编自己都不信能说出这么大言不惭的鬼话O(∩_∩)O哈哈~）

小编先来说一说我们遗留的历史任务，然后昂首阔步再一次踏入我们css的征程

历史任务1 如何让一个块级元素居中

我们只需要应用我们前期说到的margin属性就好啦

margin:0 auto;

auto 自动计算在可用空间里左右距离保持相等

历史任务2 如何让有文本的容器和没有文本的容器对齐

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
    .box{
			font-size: 0;
		}
		.one,.two,.three,.four,.five{
			width: 200px;
			height: 20px;
			background-color: skyblue;
			display: inline-block;
			font-size: 16px;
        }
		.two{
			background-color: yellow;
		}
		.three{
			background-color: red;
		}
		.four{
			background-color: green;
		}
		.five{
			background-color: grey;
		}
	</style>
</head>
<body>
<div style="width: 1000px;" class="box">
	<div class="one">1</div>
	<div class="two" >2</div>
	<div class="three">3</div>
	<div class="four">4</div>
	<div class="five"></div>
</div>
</body>
</html>

如果我们按照上一期的思路来写的话，会出现什么情况呢？小主们请看

如果一个容器中有文字或是图片，另一个容器没有，则该容器会自动和文字的最后一行对齐，就会出现上面的现象

我们如何解决呢？需要在one到five的盒子里添加vertical-align: top这个属性哦

vertical-align:top 顶端对齐，这个属性只能用于行内元素和行内块元素

好啦，解决了历史遗留问题，我们要开始今天的两大重点，都是五星级大重点，各位小主一定要睁大眼睛不许走神哦~~~

2.9 浮动

我们先来说一说标准文档流和浮动的区别

标准文档流：元素会默认自动的从左到右，从上往下流式的排列方式

浮动：是我们页面布局的一种方式，会脱离标准文档流，也就是不再划分块级元素，行内元素和行内块元素

然后小编给各位小主举个浮动的小例子

span{
           width: 200px;
           height: 200px;
           background-color: red;
           float: left; 左浮动
       }
       .right{
           float: right; 右浮动
       }

各位小主看一下，我们用浮动也可以解决有文本的盒子和没有文本的盒子的对齐问题

各位小主再深入思考一下，如果我们右边的盒子里面有文本，那么这个文本对于right盒子来说是向左对齐还是向右对齐呢？

各位小主看到了嘛，我们只是盒子向右移动，但盒子里的文本仍然是向左对齐的

我们就这个例子来细说一下脱离标准文档流这一概念

各位小主们都知道，span标签是行内元素，不可以设置有效宽高，在没有浮动之前，我们只能将其转换为块级元素才能设置有效的宽高（ps:随堂检测如何把行内元素转变成块级元素？答案小编会发在评论区哦），但是我们观察上面的代码，我们并没有将行内元素转为块级元素，通过浮动也可以设置有效宽高，这就是脱离标准文档流，在浮动中我们不再去区分块级元素，行内元素和行内块元素。

接着，我们来看一看浮动带来了哪些问题

1）浮动会脱离标准文档流，元素不再分块级元素，行内元素和行内块元素啦

2）元素浮动后不会再撑开父级的高度啦

在标准文档流的情况下，我们可以不去设置父级的高度，通过内容去撑开父级的高度

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			background-color: black;
		}
		.content{
			width: 1000px;
			height: 50px;
			background-color: pink;
			margin: 0 auto;
		}
		
	</style>

</head>
<body>
	<div class="box">
		<div class="content"></div>
	</div>
</body>
</html>

但是当我们让content添加浮动 float：left 时，此时我们的box还会有高度吗？答案当然是否定的

此时我们的box高度为0，因为其子元素浮动，无法再撑开父元素的高度

3）浮动的元素和标准的文档流一起使用时会发生覆盖

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			background-color: black;
		}
		.content{
			width: 1000px;
			height: 50px;
			background-color: pink;
			margin: 0 auto;
			float: left;
		}
		.one{
			width: 300px;
			height: 300px;
			background-color: red;
		}
	</style>

</head>
<body>
	<div class="box">
		<div class="content"></div>
	</div>
    <div class="one"></div>
</body>
</html>

各位小主可以看出，这个半蓝色区域才是我们one的完整区域，但是被浮动的content盖住了一部分，这就是小编所说的浮动的元素和标准的文档流在一起会发生覆盖

另外，这里小编还要多说几句，浮动的元素只会影响后面的标准文档流，但不会影响前面的标准文档流，也就是说我们的one盒子写在box的上面就不会被覆盖了

那么这里各位小主再深入思考一下，如果我们的one盒子里有文本呢？那文本是否也会被覆盖呢，还是会挤到显示区域呢？小编给各位小主来看一下效果

所以浮动不会覆盖掉标准文档流的文字和图片，文字和图片会挤到可以显示的区域

说完了浮动的问题，我们来说一说浮动问题的解决方案

!!!前方高能-------前方高能!!!

小编在这里给各位小主几种解决方案，任各位小主挑选

原html结构

//child 浮动元素
<div class="child"></div>
</div>

//标准文档流one
<div class="one"></div>

法1 给父级设计有效地高度

但是有的时候我们并不知道父级的高度究竟设置多少才合适，我们就采用以下几种方法

.box{
           height: 100px;
           background-color: red;
       }

法2 隔墙法

隔墙法相当于在标准文档流和浮动元素之间建立一堵墙，隔开他们，进而解决互相产生的影响

隔墙法分为内墙法和外墙法

我们先来看内墙法

.clear{
clear: both;
}

clear 设置是否允许有浮动
       /*left 不允许左侧有浮动*/
       /*right 不允许右侧有浮动*/
       /*both 不允许左右有浮动*/

然后再来说一说外墙法

内墙法和外墙法只是html部分有所不用，css部分是相同的

法3 给浮动的父级元素设置超出隐藏

给浮动元素父级设置 overflow:hidden

.box{
           background-color: red;
           overflow: hidden;
       }

法4 伪元素配合隔墙法

.clearbox::after{
           content: ""; //伪元素必填属性可以向页面写入内容
           clear: both;
           display: block;
           visibility: hidden;
       }

.clearbox 是给浮动元素的父级添加的类名

各位小主只需要记住，当我们使用浮动时，把上面这个代码写在最上面（通配符选择器的下面）就可以啦

2.10 定位

定位这里很重要哦，各位小主一定要认真哦，小编通过例子来给各位小主说明白~~~

2.10.1 相对定位

position：relative 相对定位

只能同时作用于一个方向 left/right top/bottom

虽然元素移动，但是还占据了原来的空间

相对定位是参考自身的位置发生改变，使用相对定位的元素不会脱标

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;
			right: 30px;
			top: 10px;

		}
		.test{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
	</style>

</head>
<body>
	<div class="box"></div>
	<div class="test"></div>	
</body>
</html>

2.10.2 绝对定位

position：absolute 绝对定位

绝对定位会脱标不区分块级元素，行内元素，行内块元素

绝对定位的参考是有定位的父级，如果父级没有定位属性则会继续向上寻找直至找到body（整个页面），通常采用子绝父相来固定其参考点，不会受到页面大小的改变而改变

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		
	</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			position: absolute;
			left: 0;
			bottom: 0;

		}
		.test{
			width: 300px;
			height: 300px;
			background-color: blue;
			position: relative;		
           }
	</style>
</head>
<body>	
	<div class="test">
		<div class="box"></div>
	</div>

</body>
</html>

2.10.3 固定定位

position：fixed 固定定位

固定定位会脱离标准文档流参考点是浏览器首屏并且可以跟随浏览器滚动而滚动

固定定位多用于侧边栏，广告栏，返回顶部等

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 3000px;
		}
		.top{
			width: 50px;
			height: 150px;
			background-color: skyblue;
			position: fixed;
			right: 20px;
			bottom: 20px;
		}
	</style>
</head>
<body>
	<div class="top"></div>

</body>
</html>

2.10.4 粘性定位

position：sticky 粘性定位：相对定位和固定定位的结合

使用粘性定位 top left right bottom 必须使用其中一个粘性定位才生效，如果不加方向只是相对定位的效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		img{
			display: block;
			margin: 0 auto;
			width: 1000px;
		}
		.nav{
			width: 1000px;
			height: 50px;
			background-color: red;
			margin: 0 auto;
			margin-top: 100px;
			position: sticky;
			top: 20px;
		}
	</style>
</head>
<body>
<div class="nav"></div>
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
<img src="https://picsum.photos/1000/500">
</body>
</html>

当页面滚动时，屏幕范围内滚动到元素的距离小于20px之前 .nav为相对定位
当页面滚动时元素距离顶端即将小于等于20px时变为固定定位不在随页面的滚动而滚动

在这里小编要说明一点，无论是哪种定位，position之后必须要有四个方向中的其中一个方向，同时，也不能只写top或是bottom或是left或是right，一定要有position

另外给各位小主留到思考题，我们想实现鼠标移入橘色盒子时，蓝色盒子显示出来，鼠标未移入到橘色盒子，蓝色盒子隐藏这样的一个效果页面（如下），需要怎么做呢？下期小编来具体说一说

本期的内容就到这里啦~这一期干货满满，小主们要注意理解通彻哦（ps:小编自认为每一期都干货满满^_^ 不知各位小主意下如何）

大鹏一日通风起，扶摇直上九万里，小编在这里恭祝诸君所求皆所愿，所行皆坦途，我们下期再见！！！

小小前端工程师

关注

22
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
前端篇~~~css（4）

答案小编会发在评论区哦），但是我们观察上面的代码，我们并没有将行内元素转为块级元素，通过浮动也可以设置有效宽高，这就是脱离标准文档流，在浮动中我们不再去区分块级元素，行内元素和行内块元素。各位小主可以看出，这个半蓝色区域才是我们one的完整区域，但是被浮动的content盖住了一部分，这就是小编所说的浮动的元素和标准的文档流在一起会发生覆盖。另外，这里小编还要多说几句，浮动的元素只会影响后面的标准文档流，但不会影响前面的标准文档流，也就是说我们的one盒子写在box的上面就不会被覆盖了。
复制链接

扫一扫