页面布局

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

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

image

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

在我们拿到设计稿之后，心里要先把这个页面划分好多大的块，这些块之间互不干扰，不管是定位也好，还是浮动也好，这些块都做自己的布局。头部、logo、内容、右侧悬浮。先分成四个块，这些块之间是不会有任何关联。

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

image

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

再看看手机端的

image

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

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

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

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

欢迎关注 Coding个人笔记 公众号