页面布局

做为前端，静态页面很考验一个css的功底，看一些大牛视频书写基础静态页面的时候，很是舒服，由于整个页面布局的结构很是好，不只语义化，每个块之间也分的很清楚。今天就讲讲页面布局怎么去划分结构。

以天猫为例，咱们先看看PC端的

整个页面看起来东西不少很复杂，其实不是的，只要你划分好了模块，而后一个一个去开发，整个页面结构够清晰，你会发现书写这些并不复杂。看天猫PC端，在不考虑可点开的那些，这个页面也没什么东西。

在咱们拿到设计稿以后，内心要先把这个页面划分好多大的块，这些块之间互不干扰，无论是定位也好，仍是浮动也好，这些块都作本身的布局。头部、logo、内容、右侧悬浮。先分红四个块，这些块之间是不会有任何关联。

头部、logo、内容、直接都宽度百分百，任何悬浮的直接定位最右边，这几个块划分完了就独自开发本身。划分好了大块，就开发里面的小块，头部、logo、右侧悬浮就不说了，看看内容这一块。

说白了也是左右两个块，并无多少东西。任何给整个块一个相对定位，那些显示隐藏的东西绝对定位，那么这个大块内容也就这些。

再看看手机端的

手机端也是同样，先划分大块，再细分小块，这个页面结构清晰。每个大块之间也彻底没有耦合。

很不理解那些块与块之间有干扰的布局，须要用margin来设置一个负数来调整距离。任何页面，几乎都是每个大块一个一个排列下去，真的要用到定位的时候，给自身的大块设置相对定位relative，而后里面的内容设置绝对定位absolute，这样绝对定位的内容就以这个大块为界限。

在书写一些上下左右有距离的时候，不要一味的使用margin或者padding，二者结合使用，更合理的去布局。

写静态页面真的很简单，只要把整个块划分好了，使用合理的标签，标签嵌套合理，css多使用弹性布局，往能最少代码量写出合理布局的方向去书写。

欢迎关注 Coding我的笔记 公众号