html/ css
css盒模型、BFC、css浮动、css经典布局、css兼容、css hack、html/ css基础

• css盒模型
• BFC
• css浮动
• css经典布局
• 自适应
• css兼容
• css hack
• html/ css基础
• css3 transform
• css实战
• 图片

---

CSS 标准的制定过程是怎样的？(对标准的理解)
CSS 层叠样式优先级怎么计算？(考察层叠的顺序以及 important 的影响)
CSS 有哪些选择器？如何计算优先级？(基础题，答错死)
CSS 对元素属性赋值的详细过程？(指定值-计算值-应用值-实际值)
CSS 有哪些单位以及含义区别？(再结合 dpr 适配/响应式一起问)
CSS 盒模型的理解？(继续拓展外边距合并，块级盒行内盒)
CSS 如何处理文档流？(常规流，浮动，定位，BFC，IFC，GFC…理解这块许多面试题迎刃而解)
CSS 可视化效果，如何处理裁剪和溢出？overflow 和 clip？display 和 visibility?
CSS 字体匹配策略？字体族？文字效果？

• html

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义？

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

• css盒模型

css盒模型基本概念？

1、margin、border、padding、content。在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。
2、分类：标准模型、IE模型
IE盒子模型，width表示content + padding + border这三个部分的宽度
标准的盒子模型中，width指content部分的宽度

标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？

width:100px; 如果是IE，100px包括border和padding

css如何设置这两种模型？

box-sizing:content-box;
box-sizing:border-box; /*IE模型*/
box-sizing默认属性是content-box

js如何设置获取盒模型对应的宽和高？

1、dom.style.width/height // 只能取到内联样式
2、dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 运行后的宽度。①getBoundingClientRect用于获取某个元素相对于视窗的位置集合。getBoundingClientRect()能得到top/right/bottom/left/width/height，②bounding:范围,rect:矩形。③淘宝自适应js里用的就是这个方法

• 实例题（根据盒模型解释边距重叠）

边距重叠：父子元素，兄弟元素，空元素上下边距

#sec的子元素是.child,说出下面的值？

1、#sec{background:#f00;}
.child{background:#0f0;height:100px;margin-top:10px;}
问：#sec的高度是多少？
100px
2、#sec{background:#f00;overflow:hidden;}
.child{background:#0f0;height:100px;margin-top:10px;}
问：#sec的高度是多少？
110px

---

• BFC（边距重叠解决方案）

BFC的基本概念？

Block Formatting Context，块级格式化上下文
IFC(CSS2.1)：Inline Formating Contexts，内联元素格式化上下文，不过面试问的比较多的是BFC
GFC(CSS3):GridLayout Formating Contexts，网格布局格式化上下文
FFC(CSS3):Flex Formatting Contexts，自适应格式化上下文

BFC原理/ BFC渲染规则？

1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
3、BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
4、计算BFC高度的时候，浮动元素也会参与计算。

如何创建BFC？

1、float值不为none，即为left, right
2、position的值不为static(默认值),relative，即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible，overflow为auto,hidden，scroll ;
5、使用fieldset元素（可以给表单元素设置环绕边框的html元素）

BFC的使用场景？

1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

---

• css浮动

css浮动原理？

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动元素引起的问题？

1、父元素的高度无法被撑开，影响与父元素同级的元素
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

css清除浮动的方法？

1、使用空标签
给所有浮动标签后面添加一个空标签，定义CSS clear:both.
但是这种方法会增加一个无意义的标签。
2、设置父级元素为BFC元素
3、使用after伪元素清除浮动
这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

清除浮动的方式有哪些?比较好的是哪一种?

参考答案
常用的一般为三种.clearfix, clear:both,overflow:hidden;
比较好是 .clearfix,伪元素万金油版本,后两者有局限性.

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<!--
为毛没有 zoom ,_height 这些,IE6,7这类需要 csshack 不再我们考虑之内了
.clearfix 还有另外一种写法,
-->


.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    zoom:1;
}

<!--
用display:table 是为了避免外边距margin重叠导致的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->

clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

容器包含若干浮动元素时如何清理浮动?

参考答案
容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理

/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
*   contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
    *zoom: 1;
}

---

• css经典布局

三栏布局：左右各300px,中间自适应？

1、浮动float

    <style>
    html * {
      padding:0;
      margin:0;
    }
    .layout{
      margin-top:20px;
    }
    .layout article div{
      min-height:100px;
    }
  </style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float">
  <style media="screen">
    .layout.float .left{
      float:left;
      width:300px;
      background:red;
    }
    .layout.float .right{
      float:right;
      width:300px;
      background:blue;
    }
    .layout.float .center{ /*块元素自动撑开*/
      background:yellow;
    }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
  </article>
</section>

2、绝对定位position:absolute

<!--绝对定位解决方案-->
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position:absolute;
    }
    .layout.absolute .left{
      left:0;
      width:300px;
      background:red;
    }
    .layout.absolute .center{
      left:300px;
      right:300px;
      background:yellow;
    }
    .layout.absolute .right{
      right:0;
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

3、flex布局

 <!--flexbox解决方案-->
<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top:140px;
    }
    .layout.flexbox .left-center-right{
      display:flex;
    }
    .layout.flexbox .left{
      width:300px;
      background:red;
    }
    .layout.flexbox .center{
      flex:1; /*中间自适应原理*/
      background:yellow;
    }
    .layout.flexbox .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>flexbox解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

4、表格布局table-cell

<!--表格布局解决方案-->
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      display:table;
      height:100px;
    }
    .layout.table .left-center-right>div{
      display:table-cell;
    }
    .layout.table .left{
      width:300px;
      background:red;
    }
    .layout.table .center{
      background:yellow;
    }
    .layout.table .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
  </article>
</section>

5、网格布局grid

<!--网格布局解决方案-->
<section class="layout grid">
  <style media="screen">
    .layout.grid .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background:yellow;
    }
    .layout.grid .right{
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

1、延伸
（1）这5种方案的优缺点
①浮动：清除浮动，兼容性比较好。
②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差。
③flex布局，解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。
④表格布局：表格布局的兼容性非常好
⑤网格布局：新出的
（2）如果“高度已知”去掉，中间内容高度撑开了，需要左右的高度也自动撑开，哪些方案仍适合，哪些方案不再适用。
①flex、table能用
②flex左边有遮挡，所以显示在右边，没有遮挡的时候，就会显示在最左边。创建bfc
（3）5种方案的兼容性，如果是实际项目中，最优方案是什么？
（4）三栏布局
①左右宽度固定，中间自适应
②上下高度固定，中间自适应。
（5）两栏布局
①左宽度固定，右自适应
②右宽度固定，左自适应
③上高度固定，下自适应
④下高度固定，上自适应

圣杯布局？

1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
2、.left， .right的margin-left是为了让.main .left .right在同一行。
3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。

 <style>
    .container{
      padding-left: 50px; /*设置左右padding，防止main的字被左右两块遮挡*/
      padding-right:100px;
    }
 	.main{
      float:left;
      width:100%;
      height:200px;
      background-color:blue;
    }
    .left{
      float:left;
      width:50px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      position:relative;
      left:-50px; /*抵消container的左padding，防止文字被压住*/
      background-color:red;
    }
    .right{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100px; /*右栏移到和左中一行*/
      position:relative;
      right:-100px;
      background-color:yellow;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores error incidunt iste iure nisi numquam porro reiciendis, suscipit veniam vero.</div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

双飞翼布局？

1、双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同。
2、既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了。
3、需要注意的是，需要在main后面加一个元素来清除浮动。

 <style>
    .main{
      float:left;
      width:100%;
    }
    .content{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .main::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右栏移到和左中一行*/
      background-color:yellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

css水平、垂直居中的写法，请至少写出4种？

1、水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position: absolute +left:50%+ transform:translateX(-50%)
display: flex + justify-content: center
2、垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display: flex + align-items: center

---

• 自适应

经常遇到的css兼容性的问题在哪些？如何解决的？

1、rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
2、em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
3、vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
4、px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

---

• css兼容

经常遇到的css兼容性的问题在哪些？如何解决的？

基本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小，新出的css3样式。
aSuncat：如此老旧浏览器终究会被市场放弃，不花时间在这上面。

---

• css hack

什么是CSS hack？

针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack

CSS hack的原理？

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类？

3种：条件hack、属性级hack、选择符hack。

// 1、条件hack
<!--[if IE]>
<style>
	.test{color:red;}
</style>
<![endif]-->

// 2、属性hack（类内部hack）
.test{
	color:#090\9; /*For IE8*/
	*color:#f00; /*For IE7 and earlier*/
	_color:#ff0; /*For IE6 and earlier*/
}

// 3、选择符hack（选择器属性前缀法）
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/

CSS hack书写顺序？

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

---

• html、css基础

display: block;和display: inline;的区别

参考答案
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
7.浮动或绝对定位时会转换为block
8.vertical-align属性生效

display,float,position 的关系

参考答案
如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display

css sprite 是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

如何水平居中一个元素？

参考答案
如果需要居中的元素为常规流中 inline 元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置text-align: center;,再给子元素恢复需要的值

<body>
  <div class="content">
  aaaaaa aaaaaa a a a a a a a a
  </div>
</body>

<style>
  body {
      background: #DDD;
      text-align: center; /* 3 */
  }
  .content {
      width: 500px;      /* 1 */
      text-align: left;  /* 3 */
      margin: 0 auto;    /* 2 */

      background: purple;
  }
</style>

如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1

<body>
  <div class="content">
  aaaaaa aaaaaa a a a a a a a a
  </div>
</body>

<style>
  body {
      background: #DDD;
  }
  .content {
      width: 500px;         /* 1 */
      float: left;

      position: relative;   /* 2 */
      left: 50%;            /* 3 */
      margin-left: -250px;  /* 4 */

      background-color: purple;
  }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

<body>
  <div class="content">
  aaaaaa aaaaaa a a a a a a a a
  </div>
</body>

<style>
  body {
      background: #DDD;
      position: relative;
  }
  .content {
      width: 800px;

      position: absolute;
      left: 50%;
      margin-left: -400px;

      background-color: purple;
  }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto

<body>
  <div class="content">
  aaaaaa aaaaaa a a a a a a a a
  </div>
</body>

<style>
  body {
      background: #DDD;
      position: relative;
  }
  .content {
      width: 800px;

      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;

      background-color: purple;
  }
</style>

link和@import的区别？

1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

calc, support, media各自的含义及用法？

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

如何理解标签语义，它有哪些好处？

1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处：
（1）html结构清晰，代码可读性较好。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

// 常用的语义化标签
h1-h6
p
ul
ol
dl
thead
tbody

// html5中新增的语义化标签
header	section或page的页眉
nav			导航栏
footer		section或page的页脚
progress	进度条
video		视频

css的选择符有哪些，优先级如何计算，哪些属性可以继承？

1、css选择符类型

1、通用选择器：*
2、类别选择器：.class
3、id选择器：#id
4、标签选择器：p
5、后代选择器：div p
6、子选择器：div > p
7、群组选择器：div , p
8、相邻同胞选择器：div +p
9、伪类选择器：:link :visited :active :hover :focus :first-child
10、伪元素选择器：:first-letter :first-line:before :after :lang(language)
11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

2、优先级计算
!important > 内联样式 > id > class > tag
3、属性继承
（1）所有元素可继承：visibility、cursor
（2）块级元素可继承：text-indent、text-align
（3）内联元素可继承：
①字体系列属性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性：
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction

扩展：
一、不可继承的样式属性：
1、display
2、文本属性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before

行内元素和块级元素举几个例子？

行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

伪类和伪元素？

伪类：:active :focus :hover :link :visited :first-child
伪元素：:before :after :first-letter :first-line

placeholder的实现？

3种方案：
1、为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。
2、为添加一个属性phText=“手机号码/邮箱地址”。默认状态下，value值为提示文本并且颜色为灰色；获得焦点时，若value值等于phText属性值，则value值置空；失去焦点时，若value值为空，则value值为提示文本。
3、把placeholder值赋给并且颜色置为灰色，然后获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createTextRange和this.setSelectionRange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于<input type="password">要为其新增一个<input type="text">用来显示提示文本，当发生输入操作时，需要把<input type="text">隐藏，然后把<input type="password">显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。

写出ul、ol、dl三种列表的html结构？

ul：unordered list, 无序列表

<ul>
	<li></li>
</ul>

ol：ordered list, 有序列表

<ol>
	<li></li>
</ol>

dl：definition list, 定义列表，

<dl>
	<dt>计算机</dt>
	<dd>用来计算的仪器...</dd>
	<dt>显示器</dt>
	<dd>以视觉方式显示信息的装置...</dd>
</dl>

svg和canvas的区别？

1、canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制 ；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

flex实现原理？

1、容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

src与href的区别？

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

css模块化？

待完善

css其他？

理论篇
CSS 标准的制定过程是怎样的？(对标准的理解)
CSS 层叠样式优先级怎么计算？(考察层叠的顺序以及 important 的影响)
CSS 有哪些选择器？如何计算优先级？(基础题，答错死)
CSS 对元素属性赋值的详细过程？(指定值-计算值-应用值-实际值)
CSS 有哪些单位以及含义区别？(再结合 dpr 适配/响应式一起问)
CSS 盒模型的理解？(继续拓展外边距合并，块级盒行内盒)
CSS 如何处理文档流？(常规流，浮动，定位，BFC，IFC，GFC…理解这块许多面试题迎刃而解)
CSS 可视化效果，如何处理裁剪和溢出？overflow 和 clip？display 和 visibility?
CSS 字体匹配策略？字体族？文字效果？
好了我先写这么多吧
实践篇
如何实现物理 1px 效果？
如何实现水平垂直居中？
常见布局方案？浮动布局？流式布局？弹性布局？Flex 布局？网格布局？
无线端响应式适配方案？
CSS 模块化/组件化设计？
CSS 多边框的实现方案？
如何实现 CSS 埋点统计？
CSS 硬件加速？性能优化方面？
CSS 预处理器和后处理器？autoprefixer？postCSS？
太多了一时半会儿想不全…

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见

---

• css3 transform

css其他？

height: 1px;
transform: scale(0.5);

---

• css3 transform

画一个三角形

方法1：border设置透明度

 .a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="a"></div>

方法2：正方形transform

图片

如何选择图片格式，例如 png, webp[头条]

图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
JPEG	有损压缩	不支持	不支持	所有	复杂颜色及形状、尤其是照片
GIF	无损压缩	支持	支持	所有	简单颜色，动画
PNG	无损压缩	支持	不支持	所有	需要透明时
APNG	无损压缩	支持	支持	FirefoxSafariiOS Safari	需要半透明效果的动画
WebP	有损压缩	支持	支持	ChromeOperaAndroid ChromeAndroid Browser	复杂颜色及形状浏览器平台可预知
SVG	无损压缩	支持	支持	所有（IE8以上）	简单图形，需要良好的放缩体验需要动态控制图片特效