个人前端布局方法

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

    写前端不一样于算法优化，算法中常常是能少一个数组就少一个数组，而前端只要保证不乱，多套几个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
版权声明：本文为博主原创文章，转载请附上博文连接！