原因：开发了一个类似门户网站的小系统，只有两个界面，卡片列表和点击列表跳转的详细界面.两个界面是这样的：看到我觉得很简单吧？灵活大法走遍了世界各地。作为一个从事前端8个月的菜鸟级前端，两天就画出了这个页面布局样式。我认为布局已完成70%。想一想，这才刚刚开始。.....项目背景：本项目使用React开发，需要兼容IE11及低版本chrome。思考：本来以为有了webpack和babel，这种兼容问题分分钟的事。我是在开发过程中才明白自己是菜鸟还是菜鸟。没有大量的经验积累，总会有坑。并且因为过去只有半年的开发经验，之前大部分都是B端产品，而且都是以功能和快速开发为主。使用。所以导致在接受这种开发的时候不能很好的适应。为避免再次踩坑，也记下血泪经历，特写一篇文章作为记录，总结开发过程中遇到的CSS陷阱。系统开发需要考虑的风格问题在系统开发之前，明确业务需求和交互需求是基础。所有的系统都有一定的业务需求支撑，只要是页面，大部分都会有交互。对于一个前端开发者来说，除了这两点之外，界面风格也是需要注意的。界面风格是用户对系统最直观的感受。如果样式排版错误，不及时影响系统功能，容易流失用户。导致系统利用率无法达到预期效果。在这个系统（xue）系统（lei）开发（bing）开发（cun）中，我总结了一些系统开发需要考虑的风格问题。个人开发经验和经验有限。问题可能考虑的不够全面，同时也可能会出现一些错误。欢迎看过文章的朋友指正，帮助完善。对于系统开发中的界面开发，首先要考虑的就是布局问题。选择合适的布局方案是系统界面的基础。虽然不同的布局方案可以达到相似的效果，但是还是要考虑兼容性或者细节方面的问题。会有一些差异。选择好实现布局的方法之后，可以说页面的原型就可以画出来了，但是作为一个友好的系统，很多细节是不能忽略的，所以各种神奇的布局bug以及很多作为菜鸟都没见过但是令人惊讶的有用的css属性浮出水面。当然，不管怎样，渣做成的系统，bug可能会迟到，但绝对不会缺席。在写css的过程中，由于对各种属性的理解不全面，遇到了令人吃惊的兼容性问题，bug也遇到了不少。最后在开发过程中，发现了一些非常常用的开发技巧。同时也抱着大哥的大腿从大哥那里学了很多套路，一起记录下来。结论是：本文主要分为四个部分：1.布局问题，主要讨论目前主流的css布局方法及其优缺点2.细节，主要讨论系统中一些容易被人忽略的细节（我)问题3.bug问题主要是讨论css中可能因为兼容性或者属性之间的相互作用而出现的一些样式bug。4.技巧题主要总结了一些常用的排版技巧。说了一大堆废话，开始进入正题：1.布局问题我习惯了react中画h5的flex布局，所以刚开始开发的时候就胡乱用了flex。虽然查过ie11在flexlayout中的兼容性问题，但我觉得大部分问题应该是通过babel-polyfill来避免的，而CANIUSE上说是兼容的，结果就是设计稿的还原度很差，而且在ie【委屈脸】里是看不到的。中间拼命尝试了网格布局，结果应该不会太酸。后来老大帮我换成自适应布局试试，但是自适应布局不理想，UI给的交互稿还原度还是差了点，于是老大摆摆手改了系统布局。它已成为静态布局。虽然有些地方还是有点不尽如人意，比如小屏下会有左右滚动条，但是布局效果比前面几种布局好了很多。经过这节课，我总结了五种当前流行的css布局；1.静态布局静态布局可以说是最简单的布局方式，只要给根节点设置min-width，其他一切按照设计稿给定的样式就可以了整套照搬，不考虑可能的布局在不同尺寸屏幕上的变化，更不用说整体布局的兼容性了。但缺点恰恰是无法考虑不同尺寸屏幕的布局变化，导致当屏幕宽度小于min-width时，系统会显示滚动条。静态布局注意事项：2.流式布局流式布局实际上是按照百分比来布局元素的宽度，这样样式会随着屏幕的变化而变化，布局会一直和当前保持相同的百分比关系屏幕。但是流体布局的问题是，虽然宽度是按照百分比布局的，但是文字大小和这些元素都是px固定的，所以字体不会变，图片和卡片的宽度会变。当屏幕太小或屏幕太大时，都容易出现布局混乱。流式布局注意事项：3.自适应布局对于静态布局只有一个宽度。自适应布局为其添加了几种常见的屏幕宽度。不同的宽度使用不同的布局。其实在同一个设备上看到的布局是不会改变的，只是在屏幕尺寸差异较大的情况下，保证不同的屏幕能够有对应的更好的布局。但问题是需要根据不同的布局进行不同的设计。同时，使用px固定大小元素的文本大小仍然是固定的，不能随屏幕变化。自适应布局注意事项：4.响应式布局自适应布局对应不同屏幕下的静态布局，响应式布局对应多屏幕分辨率下的流体布局，继承了流体布局的优点。缺点，但是对于简单的流式布局来说，多种布局的适应性更强，但是工作量也会增加，因为不同的版本需要针对不同的布局进行设计，Bootstrap是基于响应式设计的，elementUI的布局也参考了Bootstrap的响应式设计，预设了五种响应式尺寸：xs、sm、md、lg和xl。响应式布局需要注意的事项：5.弹性布局弹性布局是目前针对屏幕分辨率较好的一种布局方式。Elastic布局使用em/rem作为元素的单位，页面的主要划分区域仍然使用百分比和px，但是可以将px转换为em。比如常见的px2rem就很好的进行了这种转换，非常适合移动端的自适应布局。弹性布局最大的缺点就是兼容性问题。早期的浏览器对弹性布局的支持不是很好。灵活布局需要注意的事项：2.细节说完布局，系统的大体框架就搭好了，接下来就是细节了。俗话说，细节决定成败，尤其是这类门户系统。功能主要是显示和页面跳转。用户更注重系统体验。如果细节处理不当，会对用户体验造成非常不好的影响。以下是本系统遇到的问题的总结，只有两页。问题的一些细节，以及相应的解决方案。1.鼠标样式很重要，也是最基本的，但是完全没有考虑（因为很多组件已经帮我们做好了），鼠标显示的图标，一般情况下，鼠标显示的是箭头样式，在可以点击的部分，比如按钮，鼠标一般显示手势点击样式。在一些可以复制的文本部分，鼠标一般会显示文本选择的效果。如果遇到比较复杂的系统，也可以根据场景选择样式。定义鼠标样式：{cursor:default;//默认箭头cursor:pointer;//Gesture//更多样式请查看文档}这其实是一个很基础的知识点。经过观察，我发现工作几年的同事都会有意识地注意这个细节，在写了一个可点击的div之后，加上一个cursor:pointer，但是对于习惯使用组件的我来说，需要复制直接在样式库中编码，完全不用考虑样式问题，这样的细节自然被忽略了。2、字体风格很重要。之前没有考虑过字体的问题。之前做的项目大部分都是b端的，不用考虑太多字体长什么样子，还是h5的小项目。一个很大的变化，所以当我以为开发完成的时候，因为开发是用MAC的，UI设计稿也是MAC的，PingFang的字体应该不会太酷。到了windows系统就全变成宋体了，字体粗细都一样。视觉效果很差。我也从这里学到了一个技巧。为了兼容不同的操作系统，最好设置几种默认字体。同时，在界面开发过程中，需要在多种环境下查看页面效果。字体样式效果关键代码如下：{font-family:MicrosoftYahei,PingFangSC-Medium,sans-serif;//微软雅黑，PingFangSC-Medium，sans-serif;//微软雅黑、Pingfang、W3C建议在定义字体时，以字体的类别结尾，如“sans-serif”，以保证在不同的操作系统下，网页字体都能显示出来。字体粗细：600；//字体的粗细，400等于normal，700等于粗体}3.bug问题1.子元素浮动后父元素撑不住解决方法：给子元素一个after伪类,清除Float:after{content:"";clear:both;/\*clearfloat\*/display:block;/\*确保元素是块级元素\*/}4.技术问题
