1. 该篇适用于从零基础学习前端的小白

2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

4. 本篇css我不会讲具体样式如何写，因为这些小细节，你只需搜索自己便可以学会。我侧重于css的核心概念

（盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放）

 一、实战：将百度网站首页补全

上一篇零基础学前端（三）重点讲解 HTML-CSDN博客我们已经将顶部两侧内容已经写完。

1. 接下来我们的目标如下图：分析对应的标签已经写在下面图片（我将百度logo涂上马赛克，主要是担心图片违规怕被封掉）

   <!-- 中间主体内容 --><div class="main"><div class="logoBox"><img class="logo" src="./img/logo.png" /><div class="inputBox"><input  /><button>百度一下</button></div></div></div>

<style>/*================================== 主体内容 =======================================*/.logoBox{}.logoBox .logo{width: 206px;height: 66px;}.inputBox{}/* 标签选择器：选中inputBox类下面的input */.inputBox input{width: 443px;height: 42px;border: 1px solid #ccc;}.inputBox button{              background-color: #4E6EF2;  /* 设置背景颜色  */color: #fff;                /* 设置文字颜色  */height: 44px;border: none;padding-left: 12px;padding-right: 12px;}
</style>

做出来的效果图 

 2. 确定需要改进的问题

1. 那个缝隙不该存在，百度一下按钮，需要靠在 input输入框

2. 百度图片的logo 应该在输入框和按钮的中间

<style>/* 设置整体居中 */.logoBox{display: flex;flex-direction: column;align-items: center;}/*让按钮贴近input输入框*/.inputBox button{               margin-left: -10px;          /*设置一个负值就方向贴近*/}</style>

3. 继续优化细节

我们可以看到
1. 按钮 和 输入框 贴近后，虽然高度是一样的，效果上还是有一点偏差
2. 输入框 和 按钮是有圆角的 

<style>
/*让输入框 和 按钮 对其*/.inputBox{display: flex;align-items: center;}
</style>

<style>.inputBox input{    border-radius: 5px 0 0 5px;  /*设置圆角：4个值分别代表  左上角、右上角、右下角、左下角*/}.inputBox button{              border-radius: 0 5px 5px 0; }
</style>

 效果图

六、结束语

没有任何一篇博客可以百分百将知识讲完、讲透，学习只能是一步一步实践才会学的更多更深入。我个人认为初学时，学的内容逻辑简单、思路清晰最重要，所以我只是挑取核心部分，初学者理解后，可直接上手项目，这就是我的思想逻辑。

css知识有很多，我不建议初学者去事无巨细的学每个知识点，我的看法是，带着问题，以实践的方式先将我博客逻辑跑通，让你对前端有个整体观念（从基础到最后发布网站，别人可以访问），到时你自己补充剩余。

记下来看我js更新吧

零基础学前端（五）重点讲解 JavaScript_tengyuxin的博客-CSDN博客