以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。

哪些操作会引起页面回流（Reflow）

谈谈重绘(repaint)和回流(reflow)

比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇

你应该能感觉到，回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。

1.由于display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。

2.尽量避免使用表格布局，当我们不为表格td添加固定宽度时，一列的td的宽度会以最宽td的宽作为渲染标准，假设前几行td在渲染时都渲染好了，结果下面某行的一个td特别宽，table为了统一宽，前几行的td会回流重新计算宽度，这是个很耗时的事情。

结合上面的解释，引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。documentFragment用来批量更新。

image.png

标准盒模型和怪异盒模型，怎么控制x2

只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式

box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

盒子模型，以及标准情况和IE下的区别

而标准盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border

css3触发怪异盒子模型

absolute的containing block计算方式跟正常流有什么不同？

image.png

CSS里的visibility属性有个collapse属性值？

在通常情况下，使用visibility: collapse;和使用visibility:hidden值没有什么区别。
在非谷歌且是在table的tr上使用collapse，效果同display:none;
在ie低版本（如7）下使用visibility: collapse;没有效果。

`
对于CSS里的visibility属性，相信你用过不下几百次。大多时候，你会把它的值设置成visible(这是所有页面元素的缺省值)，或者是hidden。后者相当于display: none，但仍然占用页面空间。其实visibility可以有第三种值，就是collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

display哪些取值

display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(类似于<table>)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于<table>)，表格前后没有换行符。
8、flex 多栏多列布局，火狐可以直接使用，谷歌和opera需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

设置元素浮动后，该元素的display值是多少？

都是block

display:none与visibility：hidden的区别？

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

1如果元素的display为none,那么元素不被渲染,position,float不起作用,
2如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.
3如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
4有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

display:inline-block 什么时候会显示间隙？

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?#####阐述一下CSS Sprites

一行或多行文本超出隐藏

position有那些，各自效果

以下只是常用的属性值

inherit 规定应该从父元素继承 position 属性的值。

static：默认值；
不脱离文档流，top，right，bottom，left等属性不生效。

绝对定位：absolute

绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：

1.参照物和绝对定位元素必须是包含与被包含关系；
2.该参照物必须具有定位属性；
如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。

注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为auto将会失效；我们通过 left、top、bottom、right来决定元素位置。

相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin为auto仍然有效、并且不会脱离文档流。

固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；

当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动。

sticky粘性定位:该定位基于用户滚动的位置

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。也就是说是relative和fixed的合体。

button {
        position: sticky;
        top: 10px;
    }

1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

介绍position属性包括CSS3新增

sticky粘性定位:该定位基于用户滚动的位置

position:fixed;在android下无效怎么处理？

发现原来使用isscroll.js滚动库以及在移动端设置-webkit-overflow-scrolling属性时也会出现同样的问题。

前两种情况下，fixed失效的原因是使用的插件时给该元素的父级元素设置了transform： translate（0, 0）属性，该属性设置之后，子元素固定定位失效。

失效的解决办法是：对父级元素设置transform: none; 或者display：inline,后一种方法规避这种设置

介绍css3中position:sticky

对BFC规范(块级格式化上下文：block formatting context)的理解？

https://www.jianshu.com/p/7f82ab2542bd

image.png

什么是BFC，如何触发

image.png

image.png

上下margin重合的问题

https://www.jianshu.com/p/58a6edeff0f2
a、全部都为正值，取最大者；
b、在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加,此例的结果即为: 100px + (-50)px =50px;
c、没有正值，取绝对值最大的。
总而言之 取绝对值最大的相加

有哪些DOM接口可以获取一个元素的尺寸（宽度和高度）

1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

   
   
   image.png

scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。包括滚动条

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

为什么出现浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。问题出现了，父元素高度塌陷了。一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

清除浮动的两大基本方法：

方法1：脚底插入clear:both;
方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

1. 在父元素的最后加一个冗余元素并为其设置clear:both
   此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

2.采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）

<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>

.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

image.png

右边宽度固定，左边自适应

position布局 flex布局 BFC原理 calc

css如何实现高度自适应

用padding撑开
js
calc

css垂直居中

https://www.cnblogs.com/clj2017/p/9293363.html

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
通过verticle-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
flex align-items
line-height
position absolute

居中方式

水平垂直居中

https://www.jianshu.com/p/907f99004c3e

flex
postion
calc

居中为什么要使用transform（为什么不使用marginLeft/Top）

https://blog.csdn.net/callmeCassie/article/details/89290945

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销

对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧

两个元素块，一左一右，中间相距10像素

上下固定，中间滚动布局如何实现

fixed
sticky
flex

meta viewport 移动端适配

CSS实现宽度自适应100%，宽高16:9的比例的矩形

padding-bottom
position absolute
calc
js

元素竖向的百分比设定是相对于容器的高度吗？

对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。

一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此

什么是响应式设计？响应式设计的基本原理是什么？如何兼容

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种 设计方案满足所有情况？

基本原理: 媒体查询 @media，页面头部必须有meta声明viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

兼容IE可以使用JS辅助一下来解决

响应式布局原理

rem、flex的区别（root em）

image.png

全屏滚动的原理是什么？

fullpage插件
我们可以通过js获取窗口可视区的大小，并为其设置overflow: hidden属性，使得窗口不出现滚动条，只显示窗口大小的一页内容；top属性实现不同页面的切换

CSS优化、提高性能的方法有哪些？

image.png

为什么css写顶部，js写最下面

CSS和JS的位置会影响页面效率，为什么？

style标签写在body后与body前有什么区别？

写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考
http://blog.csdn.net/wozaixia...
写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

浏览器是怎样解析CSS选择器的？

按照从上到下，从右到左的顺序解析。

.list a {color:blue;}

先解析到 a 标签，并将页面上所有 a 标签的字体颜色都按照 color:red 进行渲染（蓝色），再解析到 .list ，将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色。是的，你没有看错，浏览器解析CSS从来就是这么苦逼。

image.png

在网页中的应该使用奇数还是偶数的字体？为什么呢？

好多人说对浏览器解析有影响，这个我也不清楚，自己试试，也没试出来什么。别说是奇数了，小数都可以解析。

还有的说11px 在谷歌中打开会自动转换成12px,这个纯属扯淡呢，连小数的数值之间都有明显的区别。

但是根据程序员的习惯一般是写偶数，在使用移动端布局，和百分比布局的时候，换算单位和数值更加的方便精准

margin和padding分别适合什么场景使用？

image.png

低版本的IE？

视差滚动效果？

所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了。

【视差滚动原理一】

| 1 | background-attachment: fixed || scroll || local |

默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。

::before 和 :after中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

伪元素和伪类的区别

image.png

image.png

image.png

image.png

:before 和 :after 解释一下这2个伪元素的作用

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

让页面里的字体变清晰，变细用CSS怎么做？

CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。

image.png

px和em的区别

image.png

渲染页面，构建DOM树。

渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。

若在构建DOM树的过程中，当 HTML 解析器遇到一个 script 标记时，即遇到了js，将立即阻塞DOM树的构建，将控制权移交给 JavaScript 引擎，等到 JavaScript 引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。
其根本原因在于，JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。譬如，若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。

若在HTML头部加载JS文件，由于JS阻塞，会推迟页面的首绘。为了加快页面渲染，一般将JS文件放到HTML底部进行加载，或是对JS文件执行async或defer加载。

实现一个css框架你有什么思路吗

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

渐进jpg了解过吗

渐进式：从模糊变清晰，有利于用户体验，但是低版本IE不支持，会在图片完全加载完之后，突然显示！
基线式：支持所有浏览器，从上到下加载，用户体验一般！
*使用渐进式jpg，在ps中选择“另存为web格式”，在右侧勾选上“连续”！在fw中，图像选项，勾选上“渐进式增强”！

1. 你用永不知道基本式图片内容，除非他完全加载出来；
2. 渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成回流——提高的渲染性能；
3. 渐进式图片也有不足，就是吃CPU吃内存。

image.png

data-属性的作用

image.png

css预处理，后处理

[Sass](http://caibaojian.com/t/sass "View all posts in Sass")、LESS、Stylus 是目前最主流的 CSS 预处理器。

image.png

css3新特性

2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
4.形状转换 transform:适用于2D或3D转换的元素
rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);
5.选择器
6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size

1.（background-clip: border-box;）默认情况（从边框开始绘制）
2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！
3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！
9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
10.文字换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
12.渐变

13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
14.弹性布局 Flex
15.栅格布局 grid
16.多列布局
17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

选择器优先级

image.png

谈谈css预处理器机制

image.png

贝塞尔曲线

贝塞尔曲线在线取值

image.png

使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

网页的渲染

image.png

改变placeholder的字体颜色

    ***只适用于pc端
    input::-webkit-input-placeholder { 
        /* WebKit browsers */ 
        font-size:14px;
        color: #333;
    } 
    input::-moz-placeholder { 
        /* Mozilla Firefox 19+ */ 
        font-size:14px;
        color: #333;
    } 
    input:-ms-input-placeholder { 
        /* Internet Explorer 10+ */ 
        font-size:14px;
        color: #333;
    }

如何写一个CSS库,要注意哪些东西?
总是类名优先
组件代码放在一起
使用一致的类命名空间
维护命名空间和文件名之间的严格映射
避免组件外的样式泄露
避免组件内的样式泄露
遵守组件边界
松散地整合外部样式

移动端的边框0.5px,你有几种方式实现？

建议自己百度; 伪类缩放：

devicePixelRatio:它是window对象中有一个devicePixelRatio属性，设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素;

box-shadow:网上看到说使用box-shadow模拟边框，box-shadow: inset 0px -1px 1px -1px #06c;

Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由掘金大神 (licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}