欲练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>

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

XHTML

澳门新浦京娱乐场网站：关于做Vue的一个demo遇到的问题和总结，前端修行之路。<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>

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

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*/ /*这里设置右边边框色为黑色*/ }

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在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>

通过以上代码，我们将会看见一个类似微信/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>

好了，完整的一个对话框样式呈现在眼前了，至于对话框的小三角形的方向，相信大家看了上上段对于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>

上面的代码拷贝过去，加上张图片可测试效果。
当然，: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>

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>

这里我们将第一个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>

以上代码将会展示的依次是紫色-黑色-红色的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>

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

1 赞 8 收藏 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，先看下官方的解释：

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

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

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

图片.png

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

图片.png

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

2.左边固定 右边自适应

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

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

　　　　4.字体颜色透明

三.关于1像素border的实现

3.伪类的 content attr

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

　　有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不同的颜色，比如主色是#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.中文符号居中效果

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

　　　　5.命名

5.元素的上下间距

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

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

　　　　　　nav-botton-float-right

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

 　　　　　　nav-btn-fr

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

　　　　　　约定  fr为 float right

6.字体颜色透明

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

　　　　6. 0.5px边框的理解误区

7.命名

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

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

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

　　之前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，所以当设计师问我为什么边框看起来比较粗的时候，我都告诉他们颜色调浅一点就好了，这个技巧我一直在实际使用。网上有博客说通过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的边框（黑色）,如图，

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

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

　　　　7.rem布局的文字大小

9.user-select:none

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

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

10.js-class

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

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

11.公共类组合写法

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

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

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

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

这四种写法其实都可以，在一个项目中，针对不同的部分都可以用不同的写法，可以非常灵活的选择想要的方式。

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

12.rem布局的文字大小

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

　　　　总结:

13.object-fit: cover

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

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

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

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

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

14.图片的约定

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

小结

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

和设计师。。。

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

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

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

再随便聊聊

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

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

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

1 赞 5 收藏 评论

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