试了下两种方式float和这个一浮动都得浮动而且还要设置margin值，这样的话本来就对称，所以设置margin也只用简单设置一下就可以了。但是为啥当初没有教呀
来源：3-10 编程练习
Vigorous阿炎
2020-11-29 18:07:11
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
background-color: black;
display: flex;
}
.logo{
width: 20%;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav{
width: 70%;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
list-style: none;
font-size: 20px;
}
.login{
width: 10%;
display: flex;
justify-content: space-around;
align-items: center;
}
.login input{
color: white;
background-color: orange;
font-size: 20px;
border-radius: 5px;
}
</style>
<body>
<!-- <script>
console.log(window.innerWidth)
</script> -->
<a class="iconfont" href=""></a>
<a class="iconfont" href=""></a>
<a class="iconfont" href=""></a>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
</body>
在这里输入代码，可通过选择【代码语言】突出显示
3回答
-
好帮手慕久久
2020-11-29
同学你好，问题解答如下：
1、margin可以和flex一起使用
2、pc端可以使用flex布局。只有特殊情况下，比如需要考虑兼容性问题时，例如让我们开发能兼容ie浏览器的页面时，就需要考虑flex布局是否可行了，此时为了更好的兼容浏览器，可以优先考虑使用float布局。
3、flex布局记住常用的即可。同学可以继续往后学，后面会用到flex布局。祝学习愉快！
0h020-11-29 -
好帮手慕久久
2020-11-29
同学你好，解答如下：
1、flex兼容性问题，由于移动端兼容性比较好，所以在移动端推荐使用flex布局。而pc端，当考虑兼容性问题时，则建议使用float布局。所以二者都要学习，并且都要会用。这也是将flex布局放在移动端这里讲的原因。
2、float布局是有用武之地的，喜欢用float布局的人还是比较多的，因此我们要学会它，这样才能看懂别人写的代码。
祝学习愉快！0h020-11-29 -
Vigorous阿炎
提问者
2020-11-29
有了这个之后那以后float还有用武之地吗？这样少些好多<div>这样的父盒子了。
0
相似问题