怎样才能写好前端页面，css 书写顺序和布局真的有那么重要吗

css 基础篇（第五篇）

回顾

在上一讲中我们基本上了解了 css 中比较重要的清除浮动四种方式以及 float 怎么用会比较合理，以及在 css 中常见的普通流、浮动、定位等问题。除此之外在前端中掌握基本的 ps 技巧也是非常重要的。所以作为基础一定要熟练运用，熟练掌握。

在这一篇中我们就不说 css 的内容了，作为 css 的中间篇幅，我们就综合的说一说对于新手来说前端中布局的重要性以及对于初入职场中对于 css 来说应该遵守哪些规则，避免在工作期间踩坑等。

css 中的书写顺序

先来说一说为什么要出现书写顺序这个问题，其实对于开发人员来说在学习的过程中一般是可以有那么点书写自由的空间的，但是进入职场就是多人协作了，所以养成一个良好的写作习惯是非常值得肯定和赞扬的，给被人带来舒适的同时也会给自己加分。所以正确的书写 css 顺序是进入职场中称为“正规前端人员”重要的一环。

overflow: hidden;
// 内容content: ' ‘;
// 定位position: relative; top: 0;z-index: 1;
// 盒模型display: block;display: flex;justify-content: flex-start;align-items: center;flex-flow: column;
// 元素宽高width: 10px; height: 10x;// 元素间距padding: 0; margin: 0 auto 10px;
// 背景background: #FFF;// 边框border: 1px solid #000; border-radius: 10px;// 阴影box-shadow: 0 0 0 0;
// 文字font-size: 10px; font-weight: normal; font-family: serif;// 行设置line-height: 10px;color: #000;white-space: normal;
// 渐变、偏移transition: all 0.s ease;transform: scale(1);
// 光标等cursor: pointer;user-select: none;pointer-events: none;

当然这个我遵守的规范，不过每个人与每个人的书写习惯不太一样，但是样式上应该大差不差，例如说有些人习惯于将 元素的宽高 写成两行，宽一行、高一行，而有些人则习惯于将宽高写成一样都是可以的。或许对于刚开始学习前端的同学来讲还是比较麻烦的，但是如果理解完之后就不会觉得难了。

从上到下看，你会发现都是根据一个元素由内到外慢慢发散的，你可以看着这些顺序在心中有一个图，首先就是内容，然后将内容定位，然后的 top、left 等的偏移，然后塑造出来这个盒子的模型，用 flex 布局，紧接着就是盒子本身的大小然后盒子的 margin 和 padding 值，然后背景、边框、阴影等等。这样看上去是不是有些意思了呢！所以需要牢记这些 css 的书写顺序，在以后的工作上会给你带来很多意想不到的惊喜。

布局流程

在前几篇内容中就说到，对于初学前端的小白来讲，前端中的布局是非常重要的，虽然看上去是一个非常简单的问题，但是对于大多数小白来讲没有一个很好的构思，就更谈不上样式的书写了，如果结构写不准确，样式再好也没用。

所以这段内容我们会着重的讲解前端中的结构问题。

• 首先在一个页面的布局中，基本上都会有一个页面的版心，也称之为主内容区域。是放在页面中最中间和最能让人一眼都可以看到的区域，这个区域并不是乱定义的，很多的内容都是根据设计的眼里定义的，因为专业人干专业事，所以你也可以想想到黄金分割点，就是这个原理。

• 其次在主内容区域定义好之后，在每个内容区域肯定会有若干的小区域，这些区域就是放盒子的地方，也就是 div，在每个块中按照块本上一行行的罗列就好。

• 在制作前端的页面中一定需要记住，先有结构后有样式的原则，结构永远是最重要的，对于前端小白或者初始学前端的同学来讲，完全可以准备纸和笔 画出来，然后再去写会更好。

下面就带你来看看相关网页中的布局，你就会发现每个页面基本上都是这个原理

例如掘金的这个布局，在上图中我们会发现，整个板块可以分为上下的这种布局，上面就是一个导航栏，整个导航栏看上去会宽一点，当然也有是导航栏和内容区域是一样的宽度，然后下面是一个内容区域，内容区域是居中的，这个就称之为 版心/主内容区域。在版心的右上角部分也有会一个小盒子，盒子之内是若干的小盒子去包裹内容等等，基本上就是这样的情况，大多数新闻网页的布局都是这样的。

可以再来看看 infoq 的布局

以上 infoq 的布局也是同样的，上面是一个导航栏，接着下面是一个副导航栏，后面是一个主内容区域，不过 infoq 中整体的版心是一致的。宽度都是一致的，也是居中显示的。

所以在以后的前端学习中，一定要在脑海中首先形成一个结构的大致轮廓，然后才能书写样式，在书写样式中也需要记得样式书写的顺序。好了，这就是这一讲的全部内容了。有什么问题欢迎留言~