如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Echarts 标签中文本内容太长的时候怎么办 ? 
- 1对文本进行倾斜 
在xAxis.axisLabe中修改rotate的值

 xAxis: {
            data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" }
        },

 grid:{//直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 right:"30px",
            borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // },

 axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */ // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循环每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串 }

                            } else { // 将旧标签的值赋给新标签 newParamsName = params;
                            } //将最终的字符串返回 return newParamsName
                }

            }

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里、

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。




容器属性：

flex-direction：（排列方向横向还是纵向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。



flex-wrap：（如何换行）
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow：（flex-direction和flex-wrap简称，默认值为row nowrap）

justify-content：（横向对齐方式）
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。



align-items：（纵向对齐方式）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。



align-content：（多根轴线的对齐方式）
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴。



 
box属性：

order：（排列顺序）
数值越小，排列越靠前，默认为0。

flex-grow：（剩余空间分配，box放大比例，默认为0，即如果存在剩余空间，也不放大）



flex-shrink：（box缩小比例，默认为1，即如果空间不足，该项目将缩小）



flex-basis：（box占据的宽度或高度）



align-self：（单个box的对齐方式，与其他box对齐方式）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、什么是BFC
       BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
    中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

二、如何触发 BFC

      上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
    满足下面任一条件的元素，会触发为 BFC ：
    1、浮动元素，float 除 none 以外的值
    2、绝对定位元素，position（absolute，fixed）
    3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
    4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC布局与普通文档流布局区别      
    普通文档流布局规则
    1.浮动的元素是不会被父级计算高度
    2.非浮动元素会覆盖浮动元素的位置
    3.margin会传递给父级
    4.两个相邻元素上下margin会重叠

    BFC布局规则
    1.浮动的元素会被父级计算高度（父级触发了BFC）
    2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
    3.margin不会传递给父级（父级触发了BFC）

    4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

   下面来说一下BFC的实际使用场景
   场景1：解决子盒子都浮动时 父盒子高度不参与计算问题
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。

    场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    场景3：实现左侧固定右侧自适应等类似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：

1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：

[javascript] view plain copy

1. let renderPass = new THREE.RenderPass(scene, camera);  

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：

[javascript] view plain copy

1. /*四个参数分别为粗糙程度，扫描线强度，扫描线数量，是否转换为灰度图*/  
2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
3. //将渲染结果输出到屏幕  
4. effectFilm.renderToScreen = true;  

3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：

[javascript] view plain copy

1. /*渲染效果组合器，每个通道都按照传入的顺序执行*/  
2. let composer = new THREE.EffectComposer(renderer);  
3. composer.addPass(renderPass);  
4. composer.addPass(effectFilm);  

本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。

实现效果：

代码：

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>shader_2_earth</title>  
6.     <style>  
7.         body{  
8.             margin: 0;  
9.             overflow: hidden;  
10.         }  
11.     </style>  
12. </head>  
13. <body>  
14. <script src="build/three.js"></script>  
15. <script src="js/libs/stats.min.js"></script>  
16. <script src="js/libs/dat.gui.min.js"></script>  
17. <script src="js/controls/OrbitControls.js"></script>  
18. <script src="js/Detector.js"></script>  
19.   
20. <script src="js/postprocessing/EffectComposer.js"></script>  
21. <script src="js/postprocessing/ShaderPass.js"></script>  
22. <script src="js/postprocessing/MaskPass.js"></script>  
23. <script src="js/postprocessing/FilmPass.js"></script>  
24. <script src="js/postprocessing/BloomPass.js"></script>  
25. <script src="js/postprocessing/RenderPass.js"></script>  
26.   
27. <script src="js/shaders/CopyShader.js"></script>  
28. <script src="js/shaders/FilmShader.js"></script>  
29.   
30. <div id="stats"></div>  
31. <div id="container"></div>  
32. <script>  
33.     //检测webgl的兼容性  
34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
35.   
36.    let scene;  
37.    let camera, renderer, sphere, controls, stats;  
38.    let ambientLight, spotLight;  
39.    let composer;  
40.    let clock;  
41.   
42.    main();  
43.    render();  
44.   
45.    function main() {  
46.        scene = new THREE.Scene();  
47.   
48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
49.        camera.position.set(-10, 15, 25);  
50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
51.   
52.        renderer = new THREE.WebGLRenderer({antialias:true});  
53.        renderer.setClearColor(new THREE.Color(0,0,0));  
54.        renderer.setSize(window.innerWidth, window.innerHeight);  
55.        renderer.shadowMapEnabled = true;  
56.   
57.        controls = new THREE.OrbitControls(camera);  
58.        controls.autoRotate = false;  
59.   
60.        clock = new THREE.Clock();  
61.   
62.        ambientLight = new THREE.AmbientLight(0x181818);  
63.        scene.add(ambientLight);  
64.   
65.        spotLight = new THREE.SpotLight(0xffffff);  
66.        spotLight.position.set(550, 100, 550);  
67.        spotLight.intensity = 0.6;  
68.        scene.add(spotLight);  
69.   
70.        //创建地球  
71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
72.        scene.add(sphere);  
73.   
74.        document.getElementById("container").appendChild(renderer.domElement);  
75.   
76.        /**  
77.         * 添加渲染通道  
78.         */  
79.        //在当前场景和摄像机的基础上渲染一个新场景  
80.        let renderPass = new THREE.RenderPass(scene, camera);  
81.        //通过扫描线和失真来实现模拟电视屏幕的效果  
82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
83.        //将渲染结果输出到屏幕  
84.        effectFilm.renderToScreen = true;  
85.   
86.        //渲染效果组合器，每个通道都按照传入的顺序执行  
87.        composer = new THREE.EffectComposer(renderer);  
88.        composer.addPass(renderPass);  
89.        composer.addPass(effectFilm);  
90.   
91.        //菜单栏元素  
92.        let guiFields = {  
93.            "扫描线数量": 256,  
94.            "灰度图像": false,  
95.            "扫描线强度": 0.3,  
96.            "粗糙程度": 0.8,  
97.            "updateEffectFilm": function () {  
98.                effectFilm.uniforms.grayscale.value = guiFields.灰度图像;  
99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
100.                effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;  
101.                effectFilm.uniforms.sCount.value = guiFields.扫描线数量;  
102.            }  
103.        };  
104.   
105.        //新建一个菜单栏  
106.        let gui = new dat.GUI();  
107.        gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);  
108.        gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);  
109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
110.        gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);  
111.   
112.        stats = initStats();  
113.    }  
114.   
115.    //创建一个Mesh  
116.    function createMesh(geometry) {  
117.   
118.        //初始化纹理加载器  
119.        let textureLoader = new THREE.TextureLoader();  
120.        //加载图片  
121.        let uniforms = {  
122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
125.        };  
126.   
127.        //创建phong材料，并进行相应图片的贴图  
128.        let planetMaterial = new THREE.MeshPhongMaterial();  
129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
131.   
132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
133.        planetMaterial.map = uniforms.planetTexture.value;  
134.   
135.        //新建一个mesh  
136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
137.   
138.        return mesh;  
139.    }  
140.   
141.    //渲染更新场景  
142.   
143.    function render() {  
144.        stats.update();  
145.        let delta = clock.getDelta();  
146.        controls.update(delta);  
147.        sphere.rotation.y += 0.002;  
148.        requestAnimationFrame(render);  
149.   
150.        //没有着色器通道系统默认为WebGLRenderer.render  
151.        //使用着色器通道后，应使用使用composer.render  
152.        composer.render(delta);  
153.    }  
154.   
155.    //左上角帧显示  
156.    function initStats() {  
157.        let stats = new Stats();  
158.        stats.setMode(0);  
159.        stats.domElement.style.position = 'absolute';  
160.        stats.domElement.style.left = '0px';  
161.        stats.domElement.style.top = '0px';  
162.        document.getElementById("stats").appendChild(stats.domElement);  
163.   
164.        return stats;  
165.    }  
166. </script>  
167. </body>  
168. </html>  

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

       单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。

         1、jQuery超级个性化的单线框和复选框

       今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。

                   在线演示  源码下载

         2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

       今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

                    在线演示  源码下载

        3、CSS3自定义美化复选框Checkbox组合

       今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。

                在线演示   源码下载

       4、jQuery实现美化版的单选框和复选框

       今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。

                          在线演示  源码下载

       5、纯CSS3 3D按钮 按钮酷似牛奶般剔透

       CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

                 在线演示  源码下载

        6、HTML5/CSS3开关按钮 立体3D按钮

        今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。

                  在下演示  源码下载

         7、CSS3自定义发光Radiobox单选框

       今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。

                   在线演示  源码下载

      8、CSS3实现自定义Checkbox动画

      今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。

                   在线演示  源码下载

         以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。

       本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一.include指令标记

     收集了一些比较常用的JavaScript函数。

     1、字符串长度截取函数

     function cutstr(str,len){

           var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";

           for(var i= 0;i<str.length;i++) {

                if (icount<len-1){

                    temp =str.substr(i,1);

                    if (patrn.exec(temp)==null){

                       icount =icount+1    

                  }else {

                     icount =icount+2

                 }

                    strre+=temp

              } else {

                   break;

               }

          }

           returen strre+"...";

      }

     2、替换全部

     String.prototype.replaceAll = function(s1,s2) {

            return this.replace(new RegExp(s1,"gm"),s2);

     }

     3、清除空格

     function trim = function() {

            var reExtraSpace = /^\s*(.*?)\s+$/;

            return this.replace(reExtraSpace,"$1");

     }

     4、清除左空格/右空格

      function  ltrim(s){

            return s.replace(/^(\s*| *)/,"");

      }

     function rtrim(s) {

           return s.replace(/(\s*| *)$/,"");

      }

      5、判断是否以某个字符串开头

      String.prototype.startWith = function(s) {

            return this.indexOf(s)==0;

      }

       6、判断是否以某个字符串结束 

      String.prototype.endWith = function(s) {

            var d = this.length - s.length;

            return (d >= 0 && this.lastIndexOf(s)==d);

        }

        7、转义HTML标签

       function HtmlEncode(text) {

             return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');

       }

        8、时间日期格式转换

       Date.prototype.Format = function(formatStr){

             var str = formatStr;

             var week =['日','一','二','三','四','五','六']；

             str = str.replace(/yyyy|YYYY/,this.getFullYear());

             str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));

             str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));

             str = str.replace(/w|W/g,week[(this.getDay()];

             str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());

             str = str.replace(/d|D/g,this.getDate());

             str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());

             str = str.replace(/h|H/g,this.getHours());

             str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());

             str = str.replace(/m/g,this.getMinutes());

             str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());

             str = str.replace(/s|S/g,this.getSeconds());

            return str;

        }

        9、判断是否为数字类型

        function isDigit (value){

             var patrn = /^[0-9]*$/;

             if (patrn.exec(value) == null || value=="" ) {

                   return false;  

             } else {

                  return true;

            }

        }

       10、设置cookie

       function setCookie(name,value,Hours){

              var d =new Date();

              var offset =8;

              var utc = d.getTime()+(d.getTimezoneOffset()*60000);

              var nd = utc+(3600000*offset);

              var exp = new Date(nd);

              exp.setTime(exp.getTime()+Hours*60*60*1000);

              document.cookie = name+"="+escape(value)+";domain=360doc.com;"

       }

       获取cookie值

       function getCookie(name){

             var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

             if (arr!=null){

               return unescape(arr[2]);

            }else {

             return null;

             }

       }

      11、加入收藏夹

       function AddFavorite(sURL,sTitle) {

            try{

               window.external.addFavorite(sURL,sTitle);

         }catch(e){

           try{

               window.sidebar.addPanel(sTitle,sURL,"");

            }catch(e){

                  alert("加入收藏夹失败，请使用Ctrl+D进行添加");

             }

          }

       }

      12、设为首页

      function setHomepage(){

             if(document.all){

               document.body.style.behavior='url(#default#homepage)';

               document.body.setHomePage('http://w3cboy.com')

         }else if (window.sidebar){

              if(window.netscape){

                 try{

                    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

              }catch(e){

                 alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入about:config，然后将

                 项 signed.applets.codebase_principal_support 值该为true");

             }

           }

               var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch); 

               prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');

         }

       }

       13、加载样式文件

             function LoadStyle(url) {

                 try { 

                     document.createStyleSheet(url); 

                    } 

                   catch(e) { 

                      var cssLink = document.createElement('link');

                      cssLink.rel = 'stylesheet'; 

                      cssLink.type = 'text/css'; 

                      cssLink.href = url; 

                     var head = document.getElementsByTagName('head')[0]; 

                     head.appendChild(cssLink);

                    } 

                 }

            14、返回脚本内容

            function evalscript(s) { 

                   if(s.indexOf('<script') == -1) return s; 

                   var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;

                   var arr = []; 

                   while(arr = p.exec(s)) { 

                   var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; 

                   var arr1 = []; 

                   arr1 = p1.exec(arr[0]); 

                   if(arr1) { 

                         appendscript(arr1[1], '', arr1[2], arr1[3]);

                    } else { 

                         p1 = /<script(.*?)>([^\x00]+?)<\/script>/i; 

                         arr1 = p1.exec(arr[0]); 

                         appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);

                          } 

                       } 

                      return s; 

                  }

            15、清除脚本内容

             function stripscript(s) { 

                      return s.replace(/<script.*?>.*?<\/script>/ig, ''); 

              }

              16、动态加载脚本文件

             function appendscript(src, text, reload, charset) {

                      var id = hash(src + text); 

                      if(!reload && in_array(id, evalscripts)) return; 

                      if(reload && $(id)) { $(id).parentNode.removeChild($(id));
                }

                evalscripts.push(id);

                var scriptNode = document.createElement("script"); 

                scriptNode.type = "text/javascript"; 

                scriptNode.id = id; 

                scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); 

               try { 

                    if(src) { 

                           scriptNode.src = src; 

                           scriptNode.onloadDone = false; 

                           scriptNode.onload = function () { 

                                       scriptNode.onloadDone = true;

                                      JSLOADED[src] = 1; 

                            }; 

                         scriptNode.onreadystatechange = function () {

                         if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) { 

                                   scriptNode.onloadDone = true; JSLOADED[src] = 1; 

                                  } 

                               }; 

                          } else if(text){ 

                                scriptNode.text = text; 

                         } 

                         document.getElementsByTagName('head')[0].appendChild(scriptNode); 

                     } catch(e) {} 

                   }

           17、返回按ID检索的元素对象
            function $(id) {

                    return !id ? null : document.getElementById(id); 

             }

           18、跨浏览器绑定事件

           function addEventSamp(obj,evt,fn){ 

                    if(!oTarget){

                           return;

                     } if (obj.addEventListener) { 

                              obj.addEventListener(evt, fn, false);

                         }else if(obj.attachEvent){ 

                             obj.attachEvent('on'+evt,fn); 

                           }else{

                               oTarget["on" + sEvtType] = fn; 

                            }

                    }

             19、跨浏览器删除事件

                function delEvt(obj,evt,fn){ if(!obj){

                        return;

               } if(obj.addEventListener){

                      obj.addEventListener(evt,fn,false); 

                 }else if(oTarget.attachEvent){ 

                    obj.attachEvent("on" + evt,fn); 

                 }else{ 

                     obj["on" + evt] = fn; 

                  } 

               }

            20、元素添加on方法

            Element.prototype.on = Element.prototype.addEventListener;

             NodeList.prototype.on = function (event, fn) {、

                     []['forEach'].call(this, function (el) { 

                           el.on(event, fn); 

                      });

                      return this; 

               };

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1.背景介绍


我们为什么要选择合适的网页设计单位


随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。


网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。


现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。


所以需要我们选择合适的单位来进行开发，设计。
2.知识剖析


1、px


px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。


是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。


特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。




2、em


参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
3、rem


rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。


优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。


4、%


一般来说就是相对于父元素的，


1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
5、vw


css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px


举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。


6、vh


css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px


举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。


7、vm


css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。


兼容性太差 ，现在基本上没人用，我试了一下Chrome就用不了。


3.常见问题


假如使用em来设置文字大小要注意什么？


4.解决方案


注意父元素的字体大小，因为em是根据父元素的大小来设置的。比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.


特别是在多重div嵌套里面更要注意。


5.扩展思考


css还有哪些长度单位？


in:寸


cm:厘米


mm:毫米


t:point，大约1/72寸


pc:pica，大约6pt，1/6寸


6.更多问题
1.pc pt ch一般用在什么场景?
这些我们网页设计基本上用不到，在排版上会有用处。


2.如何使 1rem=10px
在设置HTML{font-size：62.5%；}即可


3.如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比已经没有效果了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务