float布局与flex布局

最新推荐文章于 2024-01-21 18:46:41 发布

吃饭不带钱

最新推荐文章于 2024-01-21 18:46:41 发布

阅读量385

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/m0_62738649/article/details/133218909

版权

float布局：

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

清除浮动：我们可以用clear 属性指定元素两侧不能出现浮动元素。

flex布局（弹性布局）：

采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目，简称“项目”。

设置在容器上的属性有6种：

flex-direction属性：决定主轴的方向（即项目的排列方向）

lex-wrap属性：定义换行情况

flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap

justify-content属性：定义项目在主轴上的对齐方式。

align-items属性：定义在交叉轴上的对齐方式

align-content属性：定义多根轴线的对齐方式

下面用示例展示一下它的基本用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>float与flex用法</title>
		<link rel="stylesheet" href="./css/new_file.css">
	</head>
	<body>
		<div class="box">
			<div class="menu">
				<ul>	
					<li><a href="#">222222</a>
					  <dl>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
					  </dl>
					</li> 
					<li><a href="#">333333</a>
					  <dl>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
					  </dl>
					</li>
					<li><a href="#">444444</a>
					  <dl>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
					  </dl>
					</li> 
					<li><a href="#">555555</a>
					  <dl>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
					  </dl>
					</li>
					<li><a href="#">666666</a>
					  <dl>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
						  <dd><a href="#">123456</a></dd>
					  </dl>
					</li>
				</ul>
		</div>
		
		</div>
		<div class="ga">
			<div>
			<p>前路浩浩荡荡 万物皆可期待。</p>
			</div>
			<div>
			<p>知足且上进</p>
			</div>
			<div>
			<p>温柔且坚定</p>
			</div>
		</div>
	</body>
</html>

css样式：

 *{margin: 0; padding: 0;}/*取消盒子的内外边距 */
.box{
   width: 100%;          /*将内容宽度设置为屏幕宽度并居中内容*/
   margin: 0 auto; 
}
.box .menu{
    height: 97px;
	width: 100%;
	background-color: rgb(112, 189, 164);
}
.box .menu a{
    text-decoration: none;/*取消链接默认的下划线*/
    font-size: 20px;
    color: antiquewhite;/*设置字体的大小和样式*/
}
.menu ul a:hover{     		/*设置二级菜单栏样式*/
	width: 55px;
	display: block;			/*当鼠标经过时才显示二级菜单*/
	color: black;
	border-bottom: 2px solid wheat;  /*字体下划线样式*/
}
.menu ul li{
	height: 40px;
	float: left;     /*浮动效果*/
	list-style-type: none;
	margin-left: 8%;
	position: relative;		/*相对定位*/
	top: 15px;
}
.menu ul li dl{
	display: none;
}
.menu ul li:hover dl{
	display: block;
}
.menu ul li dl{
	width: 400px;
	height: 50px;
	position: absolute;/*绝对定位*/
	top: 35px;
	left: -60px;
}
.menu #ff{
	width: 400px;
	height: 50px;
	position: absolute;
	top: 35px;
	left: -80px;
}
.menu #flf{
	width: 400px;
	height: 50px;
	position: absolute;
	top: 35px;
	left: -120px;
}
.menu ul li dl dd{
	display: block;
	float: left;
	margin-left: 10px;
	width: 85px;
	height: 30px;
}
.ga{
	width: 100%;
	height: 50px;
	background-color: aliceblue;
	display: flex;        /*弹性布局*/
	flex-direction: row;  /*布局内元素排列方向*/
	flex-wrap: wrap;      /*若布局内元素大于宽度向下排列*/
	line-height: 50px;
}
.ga div{
	width: 400px;
	height: 50px;
	background-color: bisque;
	text-align: center;     /*文字居中*/
}

图片：

放大后：

吃饭不带钱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
float布局与flex布局

<title>float与flex用法</title><dl></dl></li><dl></dl></li><dl></dl></li><dl></dl></li><dl></dl></li><p>前路浩浩荡荡万物皆可期待。</p></div><div><p>知足且上进</p>
复制链接

扫一扫