【面试】web前端经典面试题试题及答案（持续更新）-html/css

快来打我* 2022-02-28 07:50 220阅读 0赞

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

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

--------------------

css

理论

实践

标准制定

样式优先级

important

优先级顺序

选择器

有哪些

计算优先级

css对元素属性赋值的详细过程

指定值-计算值-应用值-实际值

css单位及含义区别

dpr适配/响应式

盒模型

外边距合并

块级盒/行内盒

文档流

常规流

浮动

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

*  ### *html* ###

# <table>   <tbody>    <tr>     <td align="left">Doctype作用? 严格模式与混杂模式如何区分？它们有何意义？</td>    </tr>   </tbody>  </table> #

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

*  ### *css盒模型* ###

# <table>   <tbody>    <tr>     <td align="left">css盒模型基本概念？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">css如何设置这两种模型？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">js如何设置获取盒模型对应的宽和高？</td>    </tr>   </tbody>  </table> #

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里用的就是这个方法

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

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

# <table>   <tbody>    <tr>     <td align="left">#sec的子元素是.child,说出下面的值？</td>    </tr>   </tbody>  </table> #

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（边距重叠解决方案）* ###

# <table>   <tbody>    <tr>     <td align="left">BFC的基本概念？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">BFC原理/ BFC渲染规则？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">如何创建BFC？</td>    </tr>   </tbody>  </table> #

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元素）

# <table>   <tbody>    <tr>     <td align="left">BFC的使用场景？</td>    </tr>   </tbody>  </table> #

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

--------------------

*  ### *css浮动* ###

# <table>   <tbody>    <tr>     <td align="left">css浮动原理？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">浮动元素引起的问题？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">css清除浮动的方法？</td>    </tr>   </tbody>  </table> #

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

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

# <table>   <tbody>    <tr>     <td align="left">清除浮动的方式有哪些?比较好的是哪一种?</td>    </tr>   </tbody>  </table> #

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

.clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
    
    
    
    
    .clearfix:before, .clearfix:after {
        content:"";
        display:table;
    }
    .clearfix:after{
        clear:both;
        overflow:hidden;
    }
    .clearfix{
        zoom:1;
    }

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

# <table>   <tbody>    <tr>     <td align="left">容器包含若干浮动元素时如何清理浮动?</td>    </tr>   </tbody>  </table> #

参考答案  
容器元素闭合标签前添加额外元素并设置`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经典布局* ###

# <table>   <tbody>    <tr>     <td align="left">三栏布局：左右各300px,中间自适应？</td>    </tr>   </tbody>  </table> #

1、浮动float

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布局

<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）两栏布局  
①左宽度固定，右自适应  
②右宽度固定，左自适应  
③上高度固定，下自适应  
④下高度固定，上自适应

# <table>   <tbody>    <tr>     <td align="left">圣杯布局？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">双飞翼布局？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">css水平、垂直居中的写法，请至少写出4种？</td>    </tr>   </tbody>  </table> #

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

--------------------

*  ### *自适应* ###

# <table>   <tbody>    <tr>     <td align="left">经常遇到的css兼容性的问题在哪些？如何解决的？</td>    </tr>   </tbody>  </table> #

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兼容* ###

# <table>   <tbody>    <tr>     <td align="left">经常遇到的css兼容性的问题在哪些？如何解决的？</td>    </tr>   </tbody>  </table> #

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

--------------------

*  ### *css hack* ###

# <table>   <tbody>    <tr>     <td align="left">什么是CSS hack？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">CSS hack的原理？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">CSS hack分类？</td>    </tr>   </tbody>  </table> #

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

// 1、条件hack

// 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*/

# <table>   <tbody>    <tr>     <td align="left">CSS hack书写顺序？</td>    </tr>   </tbody>  </table> #

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

--------------------

*  ### *html、css基础* ###

# <table>   <tbody>    <tr>     <td align="left">display: block;和display: inline;的区别</td>    </tr>   </tbody>  </table> #

参考答案  
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属性生效

# <table>   <tbody>    <tr>     <td align="left">display,float,position 的关系</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">css sprite 是什么,有什么优缺点</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">如何水平居中一个元素？</td>    </tr>   </tbody>  </table> #

参考答案  
如果需要居中的元素为常规流中 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>

# <table>   <tbody>    <tr>     <td align="left">link和@import的区别？</td>    </tr>   </tbody>  </table> #

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，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

# <table>   <tbody>    <tr>     <td align="left">calc, support, media各自的含义及用法？</td>    </tr>   </tbody>  </table> #

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

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

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

# <table>   <tbody>    <tr>     <td align="left">如何理解标签语义，它有哪些好处？</td>    </tr>   </tbody>  </table> #

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		视频

# <table>   <tbody>    <tr>     <td align="left">css的选择符有哪些，优先级如何计算，哪些属性可以继承？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">行内元素和块级元素举几个例子？</td>    </tr>   </tbody>  </table> #

行内元素：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

# <table>   <tbody>    <tr>     <td align="left">伪类和伪元素？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">placeholder的实现？</td>    </tr>   </tbody>  </table> #

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。

# <table>   <tbody>    <tr>     <td align="left">写出ul、ol、dl三种列表的html结构？</td>    </tr>   </tbody>  </table> #

ul：unordered list, 无序列表

ol：ordered list, 有序列表

dl：definition list, 定义列表，

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

# <table>   <tbody>    <tr>     <td align="left">svg和canvas的区别？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">flex实现原理？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">src与href的区别？</td>    </tr>   </tbody>  </table> #

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

# <table>   <tbody>    <tr>     <td align="left">css模块化？</td>    </tr>   </tbody>  </table> #

待完善

# <table>   <tbody>    <tr>     <td align="left">css其他？</td>    </tr>   </tbody>  </table> #

理论篇  
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？  
太多了一时半会儿想不全…

## <table>   <tbody>    <tr>     <td align="left">分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景</td>    </tr>   </tbody>  </table> ##

结构：  
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* ###

# <table>   <tbody>    <tr>     <td align="left">css其他？</td>    </tr>   </tbody>  </table> #

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

--------------------

*  ### *css3 transform* ###

# <table>   <tbody>    <tr>     <td align="left">画一个三角形</td>    </tr>   </tbody>  </table> #

方法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

# 图片 #

## <table>   <tbody>    <tr>     <td align="left">如何选择图片格式，例如 png, webp[头条]</td>    </tr>   </tbody>  </table> ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20220228/570a5d58d22a4356b9d2cd52d5c71a18.png