zoukankan      html  css  js  c++  java
  • 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  匹配任何空白字符,相当于[ fv]  
    S  匹配任何非空白字符,相当于[^ fv]  
    w  匹配任何字母数字字符,相当于[a-zA-Z0-9_]  
    W  匹配任何非字母数字字符,相当于[^a-zA-Z0-9_] 

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

    兼容性的渐变背景效果
    相关代码如下:
    .gradient{
        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> 
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    关于模态/非模态对话框不响应菜单的UPDATE_COMMAND_UI消息(对对WM_INITMENUPOPUP消息的处理)
  • 原文地址:https://www.cnblogs.com/yangyang63963/p/9009149.html
Copyright © 2011-2022 走看看