浮动与定位

最新推荐文章于 2022-11-26 15:03:35 发布

忘川茶社

最新推荐文章于 2022-11-26 15:03:35 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/weixin_44538225/article/details/86752780

版权

浮动即是脱离文档流。它有三大属性：1、position属性，2、display属性，3、float属性。
Position:定位 display:转为块级元素 float:设计浮动。
其中
Position中又可以分为static（默认）、absolute（绝对定位）、relative（相对定位）、fixed（固定定位）这四个属性。
Display中有block（块级元素）、inline-block（行内块级元素）等属性。
Float元素中可以被清除（clear-float）可清除浮动，可以为左右浮动（left，right）。
例如:浮动中：如果不设置display，元素就算是设置了样式也不显示。
 HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<div class="sowhat">
	<span></span>
</div>
</body>
</html>

 Css样式

@charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
}
.sowhat span{
	width: 200px;
	height: 200px;
	background: #F402A7;
margin: 1px auto;
}

显示的结果：前面我给span标签设置了一个紫色的背景颜色，但是没有显示出来
在这里插入图片描述
上面的是一张图片来的，只不过没有设置display这个属性，所以一片空白，我再加上一句代码，就可以把它显示出来，这句代码就是：

display：block；

显示结果：看，它就显示出来了
在这里插入图片描述
Position中，想让你要设置的盒子或者元素通过某种方式去设置，那么可以用到定位，而这个定位也可以有几种方式。举个简单的例子：
 HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<div class="sowhat">
	<span></span>
</div>
<div class="sowhat1">
	<span></span>
</div>
</body>
</html>

 Css部分

@charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
}
.sowhat span{
	display: block;
	width: 200px;
	height: 50px;
	background: #F402A7;
	margin: 1px auto;
/*	position: relative;*/
}
.sowhat1 span{
	display: block;
	width: 200px;
	height: 50px;
	background:#F93C07;
	margin: 1px auto;
/*	position: absolute;*/
}

我先把浮动的设置给注释掉，然后出来的样式：
在这里插入图片描述
然后把前面注释的去掉，出来的效果：

它就会根据紫色的那个盒子进行定位。
Float中
 HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<ul class="sowhat">
	<li>像</li>
	<li>蜗</li>
	<li>牛</li>
	<li>攀</li>
	<li>登</li>
</ul>
</body>
</html>

 Css部分

@charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
}
.sowhat li{
	display: block;
	font-size: 28px;
	color:#1301F8;
	list-style: none;
/*	float: left;*/
	font-family: 华文新魏
}

显示的效果：把浮动注释之前
在这里插入图片描述
把注释去掉之后

还可以设置为右浮动，可以自己动手试试。

忘川茶社

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与定位

浮动即是脱离文档流。它有三大属性：1、position属性，2、display属性，3、float属性。Position:定位 display:转为块级元素 float:设计浮动。其中Position中又可以分为static（默认）、absolute（绝对定位）、relative（相对定位）、fixed（固定定位）这四个属性。Display中有block（块级元素）、inli...
复制链接

扫一扫