web前端导航条练习(包含弹性盒）

<!DOCTYPE html>
<html lang="en">
     <head>
        <meta charset="utf-8">
        <!--设置最佳适配窗口-->
        <meta name="viewpoint" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-">
        <link rel="stylesheet" href="css/reset.css">
        <title>
      
        </title>
        <style>
           .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            margin:50px auto;
            background-color: #E8E7E3;
            /*设置为弹性容器，这样可以解决高度塌陷的问题*/
            display:flex;
           }
           .nav li{
            /*设置增长系数*/
            /*完全可以根据元素的多少进行分布*/
            flex-grow:1;
           }
           /*a本身是行内元素*/
           .nav a{
               display:block;/*把a设置为块级元素*/
               color:#808080;
               text-decoration: none;
               font-size:16px;
               text-align: center;
           }
           .nav a:hover{
            background-color: #636363;;
           }
        </style>
     </head>
     <body>
        <ul class="nav">
         <li><a href="#">HTML/CSS</a></li>
         <li><a href="#">Browser Side</a></li>
         <li><a href="#">Server Side</a></li>
         <li><a href="#">Programming</a></li>
         <li><a href="#">XML</a></li>
         <li><a href="#">Web Building</a></li>
         <li><a href="#">Reference</a></li>
        </ul>
     </body>
</html>

给父容器设置为弹性容器，可以解决高度塌陷的问题

display:flex;

给子元素设置增长系数

flex-grow:1;

div独占一行，实际占用宽度为一整行，而不是子容器的设置的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<titile></titile>
		<style>
			#fu{
				border:1px black solid;
			}
			.zi{
				width:400px;
				height:300px;
				background-color:skyblue;
				margin:10px;
			}
		</style>
	</head>
	<body>
		<div id="fu">
			<div class="zi"></div>
			<div class="zi"></div>
			<div class="zi"></div>
		</div>
	</body>
</html>

子元素设置浮动之后，父容器会出现高度塌陷的问题

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<titile></titile>
		<style>
			#fu{
				border:1px black solid;
			}
			.zi{
				width:400px;
				height:300px;
				background-color:skyblue;
				margin:10px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="fu">
			<div class="zi"></div>
			<div class="zi"></div>
			<div class="zi"></div>
		</div>
	</body>
</html>

给父容器设置弹性盒模型，就会消除高度塌陷。display:flex;

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<titile></titile>
		<style>
			#fu{
				border:1px black solid;
				display:flex;
			}
			.zi{
				width:400px;
				height:300px;
				background-color:skyblue;
				margin:10px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="fu">
			<div class="zi"></div>
			<div class="zi"></div>
			<div class="zi"></div>
		</div>
	</body>
</html>

给子元素设置弹性增长系数，子元素会均匀地占满父元素的空间

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<titile></titile>
		<style>
			#fu{
				border:1px black solid;
				display:flex;
			}
			.zi{
				width:400px;
				height:300px;
				background-color:skyblue;
				margin:10px;
				float:left;
				/*设置弹性增长系数*/
				flex-grow:1;
			}
		</style>
	</head>
	<body>
		<div id="fu">
			<div class="zi"></div>
			<div class="zi"></div>
			<div class="zi"></div>
		</div>
	</body>
</html>