居中五环，两栏布局，经典bug，伪元素，包裹浮动元素

最新推荐文章于 2024-07-18 17:34:14 发布

Hermioneee_

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量143

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_36936831/article/details/107115310

版权

居中五环，两栏布局，经典bug，包裹浮动元素

居中五环:

z-index: 3;越大越靠上
HTML:

 <!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="plat">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
	</div>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10px solid black;
    border-radius: 50%  ;
}
.circle1{
    border-color: red;
    left: 0;
    top: 0;
}
.circle2{
    border-color: green;
    left: 130px;
    top: 0;
    z-index: 3;
}
.circle3{
    border-color: yellow;
    left: 260px;
    top: 0;
}
.circle4{
    border-color: blue;
    left: 65px;
    top: 70px;
}
.circle5{
    border-color: purple;
    left: 195px;
    top: 70px;
}
.plat{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -93px;
    border: 0px solid black;
    height: 186px;
    width: 380px;
}

在这里插入图片描述
两栏布局:

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="right"></div>
	<div class="left"></div>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
.right{
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.left{
    height: 100px;
    margin-right: 100px;
    background-color: blue;
}

在这里插入图片描述
两个bug：
margin塌陷：
垂直方向的margin 父子是关联在一起取最大值
解决方法：让父级变成BFC
BFC（块级格式化上下文）
触发BFC的三种方法

    position: absolute;
    display: inline-block;
    overflow: hidden;

包裹浮动元素

float

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
	</div>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.content{
    float: left;
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}

没加float：
在这里插入图片描述
加上float :left：

加上float :right：

1.浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本(inline)都能看到的浮动元素

clear: both;清除周围的浮动流

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<p></p>
	</div>
</body>

CSS:

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    border: 1px solid black;
}
.content{
    float: left;
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}
p{
    border-top: 0 solid black;
    clear: both;
}

在这里插入图片描述
伪元素
伪元素存在每个标签里.
一个标签在逻辑最前和最后有两个伪元素
条用前面的伪元素用例如 span::before
条用后面的伪元素用例如 span::after
在元素里加content:"输入"； 输入伪元素内容
伪元素是行级元素，给他定义其他属性需要加display: inline-block;
可以利用伪元素来清除浮动

span::after{
    content: "";
    clear: both;
    display: block;
}

设置position:abolute; float: left/right; 把内部元素自动转化成inline-block；

文字环绕图片

在图片的CSS里写一个 float: left; 变成文字环绕图片型

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<img class="img1" src="1.PNG">
	举个例子。。。。
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
.img1{
    float: left;
}

在这里插入图片描述
HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<ul class="nav">
		<li class="list-item">
			<a href="#">天猫</a>
		</li>
		<li class="list-item">
			<a href="#">聚划算</a>
		</li>
		<li class="list-item">
			<a href="#">天猫超市</a>
		</li>
	</ul>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    color: #424242;
    font-family: arial;
}
.nav{
    list-style: none;  /*控制圆点*/   
}
a{
    text-decoration: none;
}
.nav::after{
    content: "";
    display: block;
    clear: both;
}
.nav .list-item{
   float: left;
   margin: 0 10px;
   height: 30px;
   line-height: 30px;

}
.nav .list-item a{
    color: #f40;
    font-weight: bold;
    height: 30px;
    padding: 0 5px;
    display: inline-block;
    border-radius: 15px;
}
.nav .list-item a:hover{
    background-color: #f40;
    color: #fff;
}

在这里插入图片描述

Hermioneee_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
居中五环，两栏布局，经典bug，伪元素，包裹浮动元素

居中五环，两栏布局，经典bug，包裹浮动元素居中五环:z-index: 3;越大越靠上HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head&gt
复制链接

扫一扫