开发一个系统需要注意的css问题

起因：开发了一个类似于门户网站的小系统，只有两个界面，一个卡片列表以及点击列表跳转的详情界面，两个界面看上去长这样：

看上去就觉得很简单对不对，flex大法走遍天下，作为一个从事前端工作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，虽然有查过flex布局有ie11的兼容性问题，但是想着通过babel-polyfill应该可以避免大部分问题，而且CANIUSE里面说可以兼容的，结果就是设计稿还原度差，而且到了ie没法看[委屈脸]。中间还作死的尝试了grid布局，结果不要太酸爽。后来大佬帮我试着改成自适应布局，结果自适应布局也并不太理想，和UI给的交互稿还原度还差那么移一点点，于是大佬大手一挥，把系统的布局改成了静态布局，虽然说某些地方还是有点不尽如人意，比如小屏幕下会出现左右的滚动条，但是比起之前的几次布局效果已经好很多了，经过这次教训之后，我总结了目前比较流行的五种css布局；

1.静态布局

静态布局可以说是布局方式当中最简单的一种了，只要给根节点设置了min-width，其他的一切就可以按照设计稿给的样式全套照搬，丝毫不用考虑在不同尺寸屏幕上布局可能的变化，更加不用考虑整体布局的兼容问题。但是缺点恰恰在于不能考虑不同尺寸屏幕的布局变化，使得屏幕宽度小于min-width时系统会出现滚动条，屏幕过大时屏幕左右的留白可能会增多，导致布局看起来不是特别的和谐。
静态布局需要注意的事项：

2.流式布局

流式布局实际上就是将元素的宽度按照百分比进行布局，这样样式会随着屏幕的变化而变化，布局永远都和当前屏幕保持一样的百分比关系。但流式布局的问题在于，虽然宽度按照百分比进行布局，但是文字大小这些元素都是用px来固定，因此会出现字体不变，图片以及卡片宽度发生变化的情况，在屏幕过小或者屏幕过大时容易出现布局混乱。
流式布局需要注意的事项：

3.自适应布局

对于静态布局只有一种宽度的情况，自适应布局给它多加了几种通用的屏幕宽度，不同的宽度采用不同的布局，实际上在同一个设备上看到的布局不会变，但是在屏幕大小差别较大的情况下，保证不同的屏幕都能有对应的较佳的布局。但是问题在于需要按照不同的布局进行不同的设计，同时，文字大小这些利用px固定大小的元素仍然是固定的，不能随屏幕改变而改变。
自适应布局需要注意的事项：

4.响应式布局

自适应布局对应的是不同屏幕下的静态布局，响应式布局对应的就是多种屏幕分辨率下的流式布局，继承了流式布局的优缺点，不过对于单纯的流式布局而言，多种布局下适应性布局更强，但是工作量也会随着变大，因为需要为不同的布局设计不同的版本，Bootstrap就是基于响应式进行设计的，elementUI的布局里也参照了Bootstrap的响应式设计，预设了五个响应尺寸：xs、sm、md、lg和xl。
响应式布局需要注意的事项：

5.弹性布局

弹性布局算是目前来说对屏幕分辨率比较好的一种布局方式，弹性布局利用em/rem作为元素的单位，页面的主要划分区域还是使用百分数以及px进行，但是可以将px转化为em，比如常见的px2rem 就很好的进行了这种转化，很适合移动端的自适应布局。弹性布局最大的缺点就是兼容性问题，早期的浏览器对弹性布局的支持性不太好。
弹性布局需要注意的事项：

2.细节问题

聊完布局之后，系统的大体框架也就搭好了，接下来就是细节的问题，俗话说细节决定成败，特别是对于这种门户类型的网站系统，功能主要是展示和页面跳转，用户更注重的是系统体验，细节问题处理不好，会对用户体验造成很不好的影响，下面就来总结一下在这个只有两个页面的系统中遇到的一些细节问题，以及对应的解决方案。

1.鼠标样式很重要

最基础但是平时又完全都没有考虑过（因为很多组件都帮我们做好了）的问题，鼠标显示的图标问题，正常情况下鼠标显示箭头样式，在可以进行点击的部分，比如按钮，鼠标一般显示手势点击样式，在某些可以进行复制操作的文字部分，鼠标一般显示文本选择的效果，如果遇到更加复杂的系统，还可以根据场景进行样式选择，同时还能自定义鼠标样式：

{
 cursor:default; // 默认箭头
 cursor:pointer; // 手势
 // 更多样式请查文档
}

这个其实是很基础很基础的知识点，观察过后发现工作几年的同事都会有意识的去注意这个细节，在写了一个可以点击的div之后顺手就加上一个cursor:pointer ，但是对使用习惯组件的我来说，需要什么直接在样式库中复制一下代码，完全不用考虑样式问题，这种细节也就自然被忽略。

2.字体样式很重要

字体的问题也是以前没有考虑过的，之前做的项目b端居多，不用太过考虑字体长什么样，或者是小型的h5项目，在手机上看字体也不会有太大的变化，因此在自以为开发完成的阶段时，由于开发用的是MAC，UI的设计稿也是MAC，pingFang字体用得不要太爽，到了windows系统全部变成了宋体，字体粗细一个样，视觉效果很不好。从这里也学习了一个技巧，为了兼容不同的操作系统，最好设置几种默认字体，同时，在界面开发过程中，需要在多种环境下查看页面效果，字体样式效果的关键代码如下：

{
   font-family: Microsoft Yahei, PingFangSC-Medium, sans-serif; 
   //微软雅黑，苹方，W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
   font-weight: 600; 
   //字体的粗细，400 等同于 normal，而 700 等同于 bold
}

3.bug问题

1.子元素float后父元素无法撑起

解决方案：给子元素一个after伪类，清除浮动

:after{
    content:""; 
    clear:both;/\*清除浮动\*/ 
    display:block;/\*确保该元素是一个块级元素\*/
}

4.技巧问题