澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:关于做Vue的一个demo遇到

欲练JS,必先攻CSS——前端修行之路

2018/01/04 · CSS · CSS

原文出处: 子慕大诗人   

  今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。

关于css的总结,css

  写在前面  ,学好css,需要长期的推敲和积累  ,细节是不断完善的,逐渐形成自己的风格    让自己的css更加接近优雅.

  下面来总结一些我觉得比较好的css代码风格 :

CSS 巧用 :before和:after

2016/02/14 · CSS · 1 评论 · after, before

原文出处: 野兽'   

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。
什么是:before和:after? 该如何使用他们?
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
下面我们先跑个简单的代码测试下效果:

XHTML

<style> p:before{ content: "H" /*:before和:after必带技能,重要性为满5颗星*/ } p:after{ content: "d" /*:before和:after必带技能,重要性为满5颗星*/ } </style> <p>ello Worl</p>

1
2
3
4
5
6
7
8
9
<style>
    p:before{
        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
    }
  </style>
  <p>ello Worl</p>

以上的代码将会在页面中展现的是”Hello World”。我们通过浏览器的”审查元素”看到的内容是:

XHTML

澳门新浦京娱乐场网站:关于做Vue的一个demo遇到的问题和总结,前端修行之路。<p> ::before "ello Worl" ::after </p>

1
2
3
4
5
<p>
  ::before
  "ello Worl"
  ::after
</p>

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是”H”;而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是”d”。作为一只合格的程序猴子,捍卫”Hello World”的完整存在是必要的。
既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。
1.结合border写个对话框的样式。
本兽将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

XHTML

<style> .triangle{ width: 0; height: 0; border-left:50px solid red; border-bottom:50px solid blue; border-top:50px solid black; border-right:50px solid purple } </style> <div class="triangle"></div>

1
2
3
4
5
6
7
8
9
10
11
<style>
    .triangle{
        width: 0;
        height: 0;
        border-left:50px solid red;
        border-bottom:50px solid blue;
        border-top:50px solid black;
        border-right:50px solid purple
    }
  </style>
  <div class="triangle"></div>

以上代码将会在页面上展示一个正方形,左边是个红色的三角形,右边是紫色的三角形,上面是黑色的三角形,下面是蓝色的三角形。那么有人就会问,我们要的不是三角形么?野兽你画个正方形逗我呢?
我们对上面的样式做些修改:

CSS

.triangle{ width: 0; height: 0; border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/ border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/ /*border-bottom-color: black; /*这里设置底部边框色为黑色*/ border-left-color: black; /*这里设置左边边框色为黑色*/ border-right-color:black*/ /*这里设置右边边框色为黑色*/ }

1
2
3
4
5
6
7
8
9
.triangle{
      width: 0;
      height: 0;
      border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/
      border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/
      /*border-bottom-color: black; /*这里设置底部边框色为黑色*/
      border-left-color: black;  /*这里设置左边边框色为黑色*/
      border-right-color:black*/ /*这里设置右边边框色为黑色*/
  }

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。
接下来我们加上:before:

CSS

<style> .test-div{ position: relative; /*日常相对定位*/ width:150px; height:36px; border-radius:5px; border:black 1px solid; background: rgba(245,245,245,1) } .test-div:before{ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ display: block; position: absolute; /*日常绝对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; left:-12px; border-right-color: rgba(245,245,245,1); } </style> <div class="test-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height:36px;
        border-radius:5px;
        border:black 1px solid;
        background: rgba(245,245,245,1)
    }
    .test-div:before{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
        left:-12px;
        border-right-color: rgba(245,245,245,1);
    }
  </style>
  <div class="test-div"></div>

通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?让召唤:after穿着棉大衣来救场吧~
完整代码:

CSS

<style> .test-div{ position: relative; /*日常相对定位*/ width:150px; height: 36px; border:black 1px solid; border-radius:5px; background: rgba(245,245,245,1) } .test-div:before,.test-div:after{ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ display: block; position: absolute; /*日常绝对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; } .test-div:before{ left:-11px; border-right-color: rgba(245,245,245,1); z-index:1 } .test-div:after{ left:-12px; border-right-color: rgba(0,0,0,1); z-index: 0 } </style> <div class="test-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~ (本兽不喜欢贴图片,体谅下额,需要的可以拷贝代码直接运行看效果,造轮子不仅仅是造轮子,也能让人加深印象,更好的理解)
2.作为内容的半透明背景层。
比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

CSS

<style> body{ background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/ } .test-div{ position: relative; /*日常相对定位(重要,下面内容也会介绍)*/ width:300px; height: 120px; padding: 20px 10px; font-weight: bold; } .test-div:before{ position: absolute; /*日常绝对定位(重要,下面内容也会略带介绍)*/ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ top:0; left: 0; width: 100%; /*和内容一样的宽度*/ height: 100%; /*和内容一样的高度*/ background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/ z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/ } </style> <!--这里容兽偷个懒,布局简单写写--> <div class="test-div"> <table> <tr> <td>Name</td> <td><input placeholder="your name" /></td> </tr> <tr> <td>Password</td> <td><input placeholder="your password" /></td> </tr> <tr> <td></td> <td><input type="button" value="login" /></td> </tr> </table> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
      body{
          background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/
      }
      .test-div{
          position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/
          width:300px;
          height: 120px;
          padding: 20px 10px;
          font-weight: bold;
      }
      .test-div:before{
          position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/
          content: "";  /*:before和:after必带技能,重要性为满5颗星*/
          top:0;
          left: 0;
          width: 100%;  /*和内容一样的宽度*/
          height: 100%;  /*和内容一样的高度*/
          background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/
          z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/
      }
  </style>
  <!--这里容兽偷个懒,布局简单写写-->
  <div class="test-div">
      <table>
          <tr>
              <td>Name</td>
              <td><input placeholder="your name" /></td>
          </tr>
          <tr>
              <td>Password</td>
              <td><input placeholder="your password" /></td>
          </tr>
          <tr>
              <td></td>
              <td><input type="button" value="login" /></td>
          </tr>
      </table>
  </div>

上面的代码拷贝过去,加上张图片可测试效果。
当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectIdeas
说完了:before和:after,我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意,从而导致一些布局和样式出问题)。
position 定位的问题
position属性规定了元素的定位类型,默认为static。
该属性还可以有下值:
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。
代码:

CSS

<!--position:absolute--> <style> body{ height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/ } .test-div{ position:absolute; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:fixed--> <style> body{ height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/ } .test-div{ position:fixed; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:relative position:absolute--> <style> .out-div{ width: 300px; height: 300px; background: purple; /*这里定义个背景,让我们知道这个div在哪*/ margin:50px 0px 0px 50px; position: relative } .in-div{ position:absolute; left:50px; top:50px } </style> <div class="out-div"> <div class="in-div">Hello World</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--position:absolute-->
  <style>
      body{
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
      }
      .test-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class="test-div">Hello World</div>
<!--position:fixed-->
  <style>
      body{
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
      }
      .test-div{
          position:fixed;
          left:50px;
          top:50px
      }
  </style>
  <div class="test-div">Hello World</div>
<!--position:relative position:absolute-->
  <style>
      .out-div{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/
          margin:50px 0px 0px 50px;
          position: relative
      }
      .in-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class="out-div">
      <div class="in-div">Hello World</div>
  </div>

z-index 元素堆叠排序
z-index用于设置或检索对象的堆叠顺序,对应的脚本特性为zIndex。
z-index的数值越大,该元素的堆叠层级越高。
代码:

CSS

<style> .first-div{ width: 300px; height: 300px; background: purple; /*这里定义个背景,让我们知道这个div在哪*/ position: absolute; left:50px; top:50px; z-index: 1 } .second-div{ position:absolute; left:80px; top:80px; width:50px; height: 50px; background: white; z-index: 2 } </style> <div class="first-div"></div> <div class="second-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
      .first-div{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/
          position: absolute;
          left:50px;
          top:50px;
          z-index: 1
      }
      .second-div{
          position:absolute;
          left:80px;
          top:80px;
          width:50px;
          height: 50px;
          background: white;
          z-index: 2
      }
  </style>
  <div class="first-div"></div>
  <div class="second-div"></div>

这里我们将第一个div和第二个div位置放到一起,方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index,所以能显示出,当我们把.first-div的z-index设置为3,这时候就看不到白色的小正方形了,它被紫色的大正方形无情的挡掉了…
zoom 元素缩放比例
zoom适用于所有元素,用于设置或检索对象的缩放比例,对应的脚本特性为zoom,原比例的值是1。
代码:

CSS

<style> div{ width: 100px; height: 100px; float: left } .first-div{ background: purple; zoom:1.5 } .second-div{ background: black; zoom:1 } .third-div{ background: red; zoom:.5 } </style> <div class="first-div"></div> <div class="second-div"></div> <div class="third-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
      div{
          width: 100px;
          height: 100px;
          float: left
      }
      .first-div{
          background: purple;
          zoom:1.5
      }
      .second-div{
          background: black;
          zoom:1
      }
      .third-div{
          background: red;
          zoom:.5
      }
  </style>
  <div class="first-div"></div>
  <div class="second-div"></div>
  <div class="third-div"></div>

以上代码将会展示的依次是紫色-黑色-红色的div,大小分别是100px的1.5倍,1倍,0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸,数值的改变意味着字体大小的调整。em 有继承这个特性,也就是说,外部父元素定义了字体的em大小,内部子元素会继承这一属性的样式。
rem = root em 。顾名思义,root即根部的,顶部的。也就是根部的em,这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码:

CSS

<style> body{ font-size: 12px; } /*html{ font-size: 12px; }*/ div{ width: 200px; height: 100px; float:left } .first-div{ font-size: 1em } .second-div{ font-size: 2em } .third-div{ font-size: 1rem } .fourth-div{ font-size: 2rem } </style> <div class="first-div">Hello World</div> <div class="second-div">Hello World</div> <div class="third-div">Hello World</div> <div class="fourth-div">Hello World</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
      body{
        font-size: 12px;  
      }
      /*html{
          font-size: 12px;
      }*/
      div{
          width: 200px;
          height: 100px;
          float:left
      }
      .first-div{
          font-size: 1em
      }
      .second-div{
          font-size: 2em
      }
      .third-div{
          font-size: 1rem
      }
      .fourth-div{
          font-size: 2rem
      }
  </style>
  <div class="first-div">Hello World</div>
  <div class="second-div">Hello World</div>
  <div class="third-div">Hello World</div>
  <div class="fourth-div">Hello World</div>

以上代码分别展示了不同大小的字体,em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。

1 赞 8 收藏 1 评论

澳门新浦京娱乐场网站 1

一.关于stylus装不上的问题

报错:npm WARN stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
这是我在做Vue的一个demo时遇到的问题,在pckage.json中添加“stylus-loader”:"^2.1.1" npm install之后在控制台运行npm run dev报错,发现是因为少了依赖
查了一下解决办法有两个:

个人的css历史:

说说自己的css学习的历史,12年,当时是老师手把手1对1教我div float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的web,做完整个毕业设计后,我就决定出来要做前端,感觉自己更喜欢。14年出来工作,那时候还不会用什么less,就是直接写css,那时候主要还是写固定布局的pc页面,14年底自己在项目里折腾,用了一下JQmobile,超级难用。15年做一个移动端项目的时候,调研了几个css库,学习了bootstrap和它部分源码,还用到了webfont,使用流式布局这一次提升很大再后来学习了rem,并用到了项目中,至此我的css就到了一个缓慢成长期,或者说就没有特意学习css了。

  1. 一般网页中的背景 用背景时 设置为行内样式><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .container{ position: relative; width: 50%; margin: 0 auto; } .left{ width: 300px; height: 300px; position:absolute; left: 0; top: 0; background: red; } .right{ box-sizing: border-box; width: 100%; height: 300px; padding-left: 300px; background: #ccc; } </style> <body> <div class="container"> <div class="left"></div> <div class="right"> 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 </div> </div> </body> </html>

   2.父容器width100%   左边盒子宽度固定   左浮动   右边盒子 overflow:hedden(原理暂不清楚)   代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
        }
        .left{
            float: left;
            width: 300px;
            height: 300px;
            background: red;
        }
        .right{
            overflow: hidden;
            background: #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">我是左边固定盒子</div>
        <div class="right">
            我就是左边自适应的内容        我就是左边自适应的内容        我就是    左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        
        </div>
    </div>
</body>
</html>
1.eslint-config-standard@6.2.1的提示解决方案

找到项目中的package.json文件,对应修改位置:
第一步:把eslint-config-standard 改成"^6.2.1" 比如: "eslint-config-standard": "^6.2.1",
第二步:把eslint-plugin-promise 改成 "^3.4.0" 比如: "eslint-plugin-promise": "^3.4.0",
如果再次安装的时候 提示update失败,可以先从插件中删除 eslint-plugin-promise的文件夹 然后在执行安装命令

干货

下面来说一些,我平时比较注意的细节、技术点,和一些大家可能不是很熟悉的知识点。

    3.元素的上下间距

2.stylus-loader@2.4.0的提示解决方案

第一步:把stylus-loader 改成 "^2.4.0" 比如: "stylus-loader": "^2.4.0", 如果没有这条记录就自行添加一条
第二步:需要多添加一条插件 "stylus": "0.52.4" 在package.json里面增加就好 然后执行安装命令 即可解决

1.box-sizing: border-box

box-sizing主要有两个值content-box和border-box,先看下官方的解释:澳门新浦京娱乐场网站 2

 

通俗一点来说,默认情况下,padding和border是会额外占据空间的,假如元素宽是10px,如果设置了1px border边框,实际的宽就是12px,padding同理。那么这样会导致,布局的宽高不好控制,计算也特别麻烦。所以我们会给全局的元素用上border-box, 只要设置了宽高,那么border和padding无论怎么变化,元素的宽高都不会变,这样方便布局和计算。

澳门新浦京娱乐场网站 3

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

二.浏览器自动出现兼容性写法

澳门新浦京娱乐场网站 4

图片.png

这是因为node-mdules文件夹里有一个postcss的文件夹

澳门新浦京娱乐场网站 5

图片.png

vue-loader依赖了这个插件,这个插件可以抹平一些兼容性写法。

2.左边固定 右边自适应

在布局的时候,比如一些列表页,常常左边是一个固定大小的缩略图,右边剩余部分展示标题,如图

澳门新浦京娱乐场网站 6

那我们就叫左边固定右边自适应的布局吧,我的方法 100%宽的div用padding-left把左边图片的位置留出来,div元素内容的部分就是标题,图片绝对定位到padding-left区域,这样就实现了左固定右自适应,(前提是box-sizing必须是border-box,否则padding加上100%宽会超出屏幕宽度),大致代码如下:

澳门新浦京娱乐场网站 7

    4.字体颜色透明

三.关于1像素border的实现

3.伪类的 content attr

伪类before,after的content属性,是用来插入内容的,我们可以通过attr 传入一个当前元素的属性名,把属性值,载入进伪类内容,这个是一种写法,但实际应用场景可能并不多,就当了解一下吧

澳门新浦京娱乐场网站 8

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

办法:用伪元素 缩放巧妙地实现

给父元素增加一个伪类after,把after设置成一条线,在dpr为2或者3的手机的手机上通过meta进行缩放
1.定义一个mixin,这是css预处理器提供的一个方法,如定义一个函数,这个函数定义的是css的代码,这样写比较通用,可以在任意需要这段代码的地方调用这个函数,但是这里的写法跟直接写border-bottom:1px solid black是一样的,并没有实现缩放

border-1px($color)
 position:relative
 &:after
    display:block
    position:absolute
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    content:' '
 &:before
    display:block
    position:absolute
    left:0
    top:0
    width:100%
    border-top:1px solid $color
    content:' '

2.给我们刚刚设置的伪类实现缩放,使它真正的实现1像素边框

  • 给父元素添加一个特殊样式,class=“border-1px”,这个class要全局定义,因为要多处使用啊。
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
 .border-1px
   &::after
    -webkit-transform:scaleY(0.7)
    transform:scaleY(0.7)

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
 .border-1px
   &::after
    -webkit-transform:scaleY(0.5)
    transform:scaleY(0.5)

<b >总结一下1像素的实现:</b>主要是利用了<b>伪类</b>和<b>缩放</b>的功能。
1.在需要画边框的元素(就叫父元素啦)上定义一个伪类,伪类是相对于父元素是absolute定位(元素当然得是relative啦,只要不是static就行哈),通过伪类画出一个1像素的边框,定位到父元素的下面,当然就会呈现出父元素的下边框啦
2.应用一个class把伪类做缩放,根据设备的最小dpr指定缩放的比例,如dpr是2就缩放0.5倍,如dpr是1.5就缩放0.7倍

4.中文符号居中效果

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

澳门新浦京娱乐场网站 9

    5.命名

5.元素的上下间距

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

澳门新浦京娱乐场网站 10

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

      nav-botton-float-right

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

       nav-btn-fr

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

      约定  fr为 float right

6.字体颜色透明

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

澳门新浦京娱乐场网站 11

澳门新浦京娱乐场网站 12

    6. 0.5px边框的理解误区

7.命名

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

澳门新浦京娱乐场网站 13

 

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

澳门新浦京娱乐场网站 14

 

如果用缩略命名,可以约定文档,有约定和熟悉成本,但是熟悉以后更高效,类的命名也会变得更规范和统一
澳门新浦京娱乐场网站 15

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

8. 0.5px边框的理解误区

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

澳门新浦京娱乐场网站 16

当我使用scale缩放50%的时候,颜色变成了c5c5c5,但是实际仍然有1px。如图,

澳门新浦京娱乐场网站 17

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

    7.rem布局的文字大小

9.user-select:none

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

澳门新浦京娱乐场网站 18

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

10.js-class

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

澳门新浦京娱乐场网站 19

    8.没有必要过分的去兼容低版本的IE

11.公共类组合写法

好吧,这是我自己命名的,我们先看下第一种写法,这很常规,所有样式写在一个class里

澳门新浦京娱乐场网站 20

再看下第二种,定义一个公共类,通过less在样式里直接引入这个类,第二种效率会高一点(少写几个字母),但是需要熟悉和维护公共类

澳门新浦京娱乐场网站 21

再看第三种,把公共类写在元素的class里,这一种比较灵活,比如我现在要写两个item的元素,一个左浮动,一个右浮动,那么这种就能不改动item,而直接使用不同的类实现不同的样式,就像JS的代码去重一样,传入一个不同的参数进行区分,一样的地方共用。

澳门新浦京娱乐场网站 22

第四种公共类全部写在元素里, 在写dom的时候都不用去写css了,直接把想要的类写进dom,是不是有点像JS里的组件化,这种写法在特定情况下比较高效,比如PC后台类项目,对UI要求不高,就比较适合,这个高效也取决于公共class类是否全面,对项目中的class是否熟悉,但是也要注意不要让元素的长度太长,尽量保持在4个类以内,超出的话就不应该用这种写法。

澳门新浦京娱乐场网站 23
这四种写法其实都可以,在一个项目中,针对不同的部分都可以用不同的写法,可以非常灵活的选择想要的方式。

    兼容IE就是甚至浪费人力成本,比如说IE8不支持圆角,得用图片代替,没有没有placeholder,得用JS来模拟。对于个人来说,技术的更新换代是大势所趋,我们要往前看,有的是东西给你学,不要在这个地方浪费青春。

12.rem布局的文字大小

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

澳门新浦京娱乐场网站 24

    总结:

13.object-fit: cover

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

澳门新浦京娱乐场网站 25

  要做好css,写好页面,和设计师的沟通也是很重要的一个技能,因为设计师决定页面最终要呈现的样子,要通过项目验收,也必须要设计师验收通过才行。

  设计师给过来一个交互效果,前端拿到,一想交互效果还可以,但是实现成本比较高,功能都做不完,不想做这么细,然后就直接说没时间这个做不了,设计师一想这个交互很难吗,别人都能做,你为什么不做,就这样来回几句就闹矛盾了,闹到产品那里去了,最后可能交互效果还得做,时间也耽误了。其实这个是很多前端会遇到的问题,时间压得紧,功能可能都要延期,还来做这些交互,自然会有点抱怨,情绪一上来,把产品和设计都得罪了,最后还是要做,久而久之矛盾越来越深,沟通就越来越困难。 换个思路想问题,设计师大部分时候时间也很紧,要对产品和设计领导有所交代,前端又在催,好不容易做出来了,你这也不能实现那也不能实现,你这样我也没法交代啊。那么我们换个沟通方式,比如这样说:我们这边时间确实有点紧,这个交互比较麻烦,比较费时间,我做是可以做,只是可能会影响项目进度,你看要不我先做简单点,等到提测的时候有时间再加上这个交互,实在不行能不能等到上线之后,我单独再优化一下这个地方,很快就能上线。

  设计师们还是讲道理的,根据web上的一些特性,设计师设计出来的一些样式一些想法或许没法实现,又或者实现成本太高,我们就得说服他们这个地方为什么不能实现,因为他们不懂,所以害怕你忽悠他们(实际有时候就有人忽悠他们),所以要想说服别人,自己一定要把问题搞清楚,把知识点理清楚,不能实现的理由对设计师说清楚,并且要有理有据,同时最好网上找到相关博客或者官方解释进行佐证。有很多矛盾和问题,就在于我们疏忽了沟通,又或者说是我们自己偷懒了,其实当自己把知识点能给外行说清楚了,这也说明是理解透了,也是对自己能力的提升。设计师辛苦设计的稿子一定要尽量达到他们的效果,也要考虑扩展性和可实现性,态度很重要,不要让人觉得是在敷衍他们,什么是敷衍,不解释清楚就说不做,就是敷衍,否则碰一鼻子灰只有怪自己。技术点要搞清楚,要不解释不清楚,别人不买单,在发现设计稿有问题的时候,耐心提醒其中一些不合适的地方,多帮别人承担一点,前端和设计师要友好相处

写在前面 ,学好css,需要长期的推敲和积累 ,细节是不断完善的,逐渐形成自己的风格 让自己的css更加接近优雅. 下面来总结...

14.图片的约定

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

小结

总得来说,学好css,需要长期推敲,长期注重和完善代码的细节,在每一次项目实战中,抽出一点点时间优化、尝试,日积月累成为个人的体系,
个人的风格。这种体系和风格,一般来说你自己都习惯了,会习以为常,甚至总结的时候都不知道应该说什么,但是当你去维护或者看别人的代码的时候,你就能体会出,
原来这个地方别人可能会这样用,你提出自己的见解,就能对团队和周围的同事产生好的影响,如果自己的有问题同事指出来,也可以反过来,提升自己的认识。

和设计师。。。

要做好css,写好页面,和设计师的沟通也是很重要的一个技能,因为设计师决定页面最终要呈现的样子,要通过项目验收,也必须要设计师验收通过才行。

情景1:
设计师给过来一个交互效果,前端拿到,一想交互效果还可以,但是实现成本比较高,功能都做不完,不想做这么细,然后就直接说没时间这个做不了,设计师一想这个交互很难吗,别人都能做,你为什么不做,就这样来回几句就闹矛盾了,闹到产品那里去了,最后可能交互效果还得做,时间也耽误了。其实这个是很多前端会遇到的问题,时间压得紧,功能可能都要延期,还来做这些交互,自然会有点抱怨,情绪一上来,把产品和设计都得罪了,最后还是要做,久而久之矛盾越来越深,沟通就越来越困难。 换个思路想问题,设计师大部分时候时间也很紧,要对产品和设计领导有所交代,前端又在催,好不容易做出来了,你这也不能实现那也不能实现,你这样我也没法交代啊。那么我们换个沟通方式,比如这样说:我们这边时间确实有点紧,这个交互比较麻烦,比较费时间,我做是可以做,只是可能会影响项目进度,你看要不我先做简单点,等到提测的时候有时间再加上这个交互,实在不行能不能等到上线之后,我单独再优化一下这个地方,很快就能上线。

设计师们还是讲道理的,根据web上的一些特性,设计师设计出来的一些样式一些想法或许没法实现,又或者实现成本太高,我们就得说服他们这个地方为什么不能实现,因为他们不懂,所以害怕你忽悠他们(实际有时候就有人忽悠他们),所以要想说服别人,自己一定要把问题搞清楚,把知识点理清楚,不能实现的理由对设计师说清楚,并且要有理有据,同时最好网上找到相关博客或者官方解释进行佐证。有很多矛盾和问题,就在于我们疏忽了沟通,又或者说是我们自己偷懒了,其实当自己把知识点能给外行说清楚了,这也说明是理解透了,也是对自己能力的提升。设计师辛苦设计的稿子一定要尽量达到他们的效果,也要考虑扩展性和可实现性,态度很重要,不要让人觉得是在敷衍他们,什么是敷衍,不解释清楚就说不做,就是敷衍,否则碰一鼻子灰只有怪自己。技术点要搞清楚,要不解释不清楚,别人不买单,在发现设计稿有问题的时候,耐心提醒其中一些不合适的地方,多帮别人承担一点,前端和设计师要友好相处

再随便聊聊

不要兼容IE低版本(我觉得兼容11以上就行了),特别是创业公司,对创业公司来说,性价比极低,本身创业公司没技术、没沉淀、活下去都是一个问题,兼容IE就是甚至浪费人力成本,比如说IE8不支持圆角,得用图片代替,
没有placeholder,得用JS来模拟。对于个人来说,技术的更新换代是大势所趋,我们要往前看,有的是东西给你学,不要在这个地方浪费青春。

有空大家都去看看bootstrap源码,看一些核心的部分就够了,比如变量variable等一些最常用的部分,源码其实不难,能得到很多启发。

澳门新浦京娱乐场网站 26

最后附上码易直播回放地址  看不了的话,复制链接在微信打开吧!

1 赞 5 收藏 评论

澳门新浦京娱乐场网站 27

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:关于做Vue的一个demo遇到