我的前端布局方法

Posted 2022-04-22 itzhangsiyuan

前些日子无聊的时候学了下前端，说实话没有美感前端和搬砖没有区别，唯一值得一提的就是他的布局方法。我的这个方法用于写死网页，不含各种框架的自适应性功能，而且主要想记录一下思想。

    写前端不同于算法优化，算法中经常是能少一个数组就少一个数组，而前端只要保证不乱，多套几个div没有任何关系，也没人会深究你浪费了几个div。所以基本上是每一个模块都套一个div，兄弟也好后代也好，有意义就套，只要自己不嫌麻烦就行。而且始终秉持一个思想，先布局后写内容，写每一块思路都要清晰，多写几遍谁都会熟练，再多总结把用的多的组件封装一下，不用动脑两三个小时出一套前端不成问题。

    布局思想方面，弹性盒子布局会减掉许多麻烦，主要是由于他的排列以及居中方式可以代替各种边距和浮动设置。手机端只需适应各种手机屏幕即可，所以稍微关注一下电脑端即可。分辨率最窄1024px，最宽1920px，写出的网页要想适应所有屏幕，最好的方法就是内容部分给一个最小宽度，然后两边留白，其实这也是当下淘宝等网页采用的方法。具体来说，就是整体内容外面包一个div，宽度一般1000左右，然后使用margin:0 auto;水平居中，当然也可以再做些媒体查询。

    对于整体布局，我这里封装了两种宽度，百分比式宽(fluidwidth)和固定长度式宽(containerwidth)。百分比式宽电脑端整体布局基本不用，只用于部分布局；移动端整体部分布局都用，但要防止有东西挤下来。固定长度式宽电脑、移动端都用于整体布局。

    对于div内部，我这里使用了center-all、justify、align等三种居中方式，能不用边距对齐就不用。至于div之间的排列，横向的有latitude-spacearound、spacebetween，纵向的有longitude，足以应付绝大多数排列。

    而网页中模块之间，我使用外边距来隔开。还有，每次写网页，布局时一般都给个底色，我这里是第一层底色用红黄绿蓝，第二层用粉棕。

    写完静态网页后，剩下的就是动态网页了。用的最多的轮播图用swiper最好，其余我只写过一些原生js，js水很深再加上我也没兴趣做个前端工程师没有往深走，所以也就不多叙述了。。

 

下面奉上我的布局框架：

/*------------------------公共样式表----------------------------*/
*
margin: 0px;
padding: 0px;
border: 0px;

a
text-decoration: none;

p
text-indent: 16px;
font-size: 15px;
color: #333333;

.center-all
display: flex;
justify-content: center;
align-items: center;

.center-align
display: flex;
align-items: center;

.center-justify
display: flex;
justify-content: center;

.latitude-spacearound
display: flex;
align-items: center;
justify-content: space-around;

.latitude-spacebetween
display: flex;
align-items: center;
justify-content: space-between;

.longitude
display: flex;
flex-direction: column;

.fixedwidth
width: 1349px;
margin: 0 auto;
padding: 0 6%;
box-sizing: border-box;

/*百分比式布局栏*/
.fluidwidth
width: 100%;
box-sizing: border-box;

首先很感谢前些日子带过我的zzw同学，让我无聊的日子看起来不那么无聊。老实说bootstrap4其实也学的差不多了，理论上写一个出来也没什么问题，可是我实在没有写一个出来的动力。。这几个月想了很多，并非程序上的问题，而是关于自己为什么敲码，以及人生方面的问题。不做个前端的话，那我写bootstrap4好像除了浪费大脑内存，没什么别的卵用了，如果真要写个前端，现学也不成问题。相比之下，我想做一些自己喜欢的、擅长的、对自己而言有意义的事。。

 

非常抱歉。。
---------------------
作者：Flynn_curry
来源：CSDN
原文：https://blog.csdn.net/Flynn_curry/article/details/93312235
版权声明：本文为博主原创文章，转载请附上博文链接！