css的一些细节

1、中文符号居中效果

对于动态输出文字可以不用在意，某些页面可能会有类似提示文案的地方，用英文标点符号，对于居中效果比较友好。

2、元素的上下间距

布局的时候从上往下开始写页面，一般都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽量不要又是写margin-top又是写margin-bottom，如果混着用，后期不好维护，比如某一块区域需要摞位置，或者是一个组件可能会被很多地方共用，混着写的话后期在改的时候，可能会麻烦一点，这里导致的问题可以说不痛不痒，但是不管是js还是css，注重细节并养成好的习惯，是代码能力的一种体现。

3、字体颜色透明

有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不同的颜色，比如主色是#000，浅灰色#000 80%的透明度，这种情况下不建议web写透明度，而是让设计师给到对应的颜色值，因为透明色会根据背景的不同，比如现在看到的这种情况，这样扩展性就比较差。

4、命名 

    命名是一个让人最纠结的事情，先看第一种,这样命名的更详细可以一目了然的知道当前类的意思，但是长度比较长，增加代码量。 

eg: .nav-btn-float-right

第二种使用缩略命名，会使代码更短，写起来更快，但是不易读。

    eg: .nav-btn-fr

    如果用缩略命名，可以约定文档，有约定和熟悉成本，但是熟悉以后更高效，类的命名也会变得更规范和统一.

5、0.5px边框的理解误区 

我之前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，所以当设计师问我为什么边框看起来比较粗的时候，我都告诉他们颜色调浅一点就好了，这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%，可以实现0.5px边框，我一直很奇怪，1px实际是物理的最小单位，怎么可能实现0.5px，就这样我做了个实验，我设置了1px颜色为000的边框（黑色）。

当使用scale缩放50%的时候，颜色变成了c5c5c5，但是实际仍然有1px。我用的是拾色工具会精确到像素，确实还是1px，所以这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展示，所以这种方式可以让2px缩放为1px，让1px的边框变得更淡，这种方式确实能让边框变细，但不能说是0.5px。

6、user-select:none 

   该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容，比如下面我只希望用户复制6655验证码，除了6655我都设置了user-select:none，长按其他部分并不会出现复制按钮，按钮数字就可以，并且第三幅图的左右下标只能在6655间拖动 

7、js-class

在为dom绑定事件的时候，大家可能会直接绑定当前有样式的class，这样会因为修改或者替换class名称，影响JS，而如果定义一个无样式的js前缀的类 专门用来绑定事件，这样就解除了样式和逻辑的耦合，在读代码的时候，也能一下子看出哪些元素绑定了事件的。 eg: <div class="item js-item"></div>

8、rem布局的文字大小

   大家都知道浏览器一般不会让文字小于12px，如果设置小于12px浏览器都会显示12px， 我们在用到rem布局的时候，元素是会根据屏幕宽度等比例缩放的，比如设计师给到750px的设计稿，如果某一个元素文字是22px，那么当用户的屏幕宽度是375的时候，文字会缩放为11px，实际浏览器就会显示为最小12像素，那么其他非字体元素比例仍然会缩小，这个时候字体可能和其他元素的比例就不是原设计稿的比例了，如果用户屏幕是320px，那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师，在宽是750像素的设计稿里，字体最小应该是多少像素。 

eg: 设计稿 750px, 文字 22px

      设计稿 375px, 文字 11px(12px)

9、object-fit: cover

我们在做列表页的时候，图片都是固定的大小，比如是一个100px*100px的正方形图片，但是很有可能拿到的图片并不是正方形的，这个非正方形图片放到正方形的img标签里，就会变形如果使用object-fit：cover  可以裁剪超出比例的部分，这样图片看起来就不会是变形或者拉伸的了，但是这样会导致图片残缺，根据图片的不同，可能裁剪掉关键部分的内容，但是鉴于列表本来就是缩略图，所以还是可以加上这个属性的,是一个比较折中的办法。

10、图片的约定 

说到图片拉伸的问题, 就要说说对于图片的约定，因为不管是拉伸还是裁剪都会导致图片的残疾，拉伸影响视觉，裁剪害怕关键部位丢失，如果不严格按照约定的规范来，肯定是不能兼容所有情况的，因此在做项目的一开始就要和产品运营们约定好图片比例，建议约定为正方形。

11、只在不得已时使用 !important 

在一个类上定义 !important 是一种使代码被有动覆盖的方法，特别是当你试图处理 media 查询时。而且这对于移动端来说很麻烦。比如说，如果你希望在手机屏幕显示某些内容，则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。我没有找到一个合理的借口来使用 !important ，除非你是在重写别人之前放错位置的 !important 类。

12、box-sizing的最佳实践 

在这里主要回答三个问题：

问题一：box-sizing的值，取content-box好，还是取border-box值好？

   如果最低需要兼容IE6、7，那么box-sizing不可使用，只能使用W3C盒模型；

   如果最低只需兼容IE8，那么使用content-box在功能上完全没有问题，只是在一些弹性布局和响应式布局实现上，会稍微麻烦一点；而border-box虽然在这些方面表现更好，但是不能和IE8的min-width、min-height、max-width和max-height四个属性一同使用，使用的话就要稍微注意一下；

   如果最低只需兼容IE9，那么本人觉得，全局配置取content-box更为合适，局部配置二者均可。原因如下：

      CSS3提供了calc函数（IE9+），使得W3C盒模型有了强有力的助攻，在弹性布局和响应式布局的表现，与IE盒模型无异；

      默认优于配置原则：我个人认为，“默认优于配置”，特别是在reset.css这种架构级、平台级的配置文件，要尽量避免对未来可能引入的模块有侵入性。譬如，我们在一个项目中时常需要引入第三方组件，如果这个组件没有强声明box-sizing,那么其默认使用的就是W3C标准盒模型，如果在全局的reset.css中设置box-sizing的值为border-box以选用IE盒模型，那么就会影响到这一类默认基于W3C盒模型的第三方组件的样式。这里也给我们提了一个醒，在封装组件时，记得强声明box-sizing，哪怕你使用默认的content-box。

     总之，大部分场景二者可以互换，只是使用理念不一样。小部分场景border-box更具优势，但随着calc函数的支持，这种优势已经不再，相反content-box是默认值的优势愈加明显。

     我个人建议是：全局使用默认W3C盒模型（你的CSS代码最低能够兼容IE6/7，在IE8也可以和min-和max-一起使用），局部场景二者均可（仅把IE盒模型当作是一种布局技巧来使用）。你喜欢全局使用IE盒模型也是可以的，只要确认项目只需要兼容到IE8，即便有可能影响到引入的第三方组件，也是有办法处理的。

问题二：如果想要全局使用IE盒模型，那么在reset.css中，该怎样设置box-sizing？

这里提供一个参考：

html {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

*, *:before, *:after {

    -webkit-box-sizing: inherit;

    -moz-box-sizing: inherit;

    box-sizing: inherit;

}

这样设置的好处有：

子元素的盒模型类型，默认由父元素决定，方便组件统一设置；

支持低版本的浏览器：Safari (< 5.1), Chrome (< 10), and Firefox (< 29);

问题三：Bootstrap3开始，全局使用IE盒模型（box-sizing取border-box），又是基于怎样的考虑？怎么协调好与基于标准盒模型开发的第三方组件的关系？

   众所周知，BS2还考虑对IE7的兼容，而BS3彻底放弃了对IE7的兼容，并将box-sizing设置为border-box。

 知识点

正则小专场：

\d  匹配任何十进制数，相当于[0-9]  

\D  匹配任何非数字字符，相当于[^0-9]  

\s  匹配任何空白字符，相当于[\t\n\r\f\v]  

\S  匹配任何非空白字符，相当于[^\t\n\r\f\v]  

\w  匹配任何字母数字字符，相当于[a-zA-Z0-9_]  

\W  匹配任何非字母数字字符，相当于[^a-zA-Z0-9_] 

-------------------------------------------------------------------------------------------------------------

兼容性的渐变背景效果

相关代码如下：

.gradient{

    width:300px;

    height:150px;

    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);

    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/

    background:red; /* 一些不支持背景渐变的浏览器 */  

    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  

    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  

    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 

}

<div class="gradient"></div>