前端面试二（CSS）1. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优

1. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？

选择器的分类
- 元素选择器 a{}
- 伪元素选择器 ::before{}
- 类选择器 .link{}
- 属性选择器 [type=radio]{}
- 伪类选择器 :hover{}
- ID选择器 #id{}
- 组合选择器 [type=radio]+label{}
- 否定选择器 :not{.link}
- 通用选择器 *{}
哪些属性可以继承
```
font-size font-family color 
```
优先级算法如何计算?
- ID选择器 +100
- 类属性伪类 + 10
- 元素伪元素 +1
- 其他 +0
- 原则：不进位
内联和important哪个优先
- !important 优先级最高
- 内联的第二
- 相同权重后写的覆盖前面写的

2. CSS新增哪些伪类？

p:last-of-type 选取其父元素中的最后一次出现P元素

p:last-child 选取其父元素中的最后一个元素，这个元素必须是p，不然会为空

p:first-of-type 选取其父元素中的首个出现的P元素

P:first-child 选取其父元素中的第一个元素，这个元素必须是p，不然会为空 p:only-child 选择其父级元素中只有一个元素，且这个元素为p

p:only-of-type 选择其父级元素中只有一个p元素，其他元素可以有。
p:nth-child(n) 选择其父级元素中的第N个刚好是p元素
p:nth-last-child(n) 同上，但是是从后往前计算
:enabled、:disabled 控制表单控件的禁用状态
:checked，单选框或复选框被选中

3、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

1、居中块级元素如div，首先设置宽度，然后使用margin:0 auto 就居中了

 <style>
    .a{
        width:100px;
        margin:0 auto;
        background:red;
    }
</style>

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

1. 居中浮动元素有两种方式

<!--第一种 在外面加一层div 设置宽度 使用margin:0 auto-->
 <div class="content">
        <div class="outer">
            <div class="left"></div>
        </div>
 </div>
 <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .outer{
            width: 100px;
            margin:0 auto;
        }
        .left {
            height: 100px;
            width: 100px;
            border: 1px dashed blue;
            float: left;
        }
    </style>
 
 <!--第二种-->
 <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .left {
            height: 100px;
            width: 100px;
            border: 1px dashed blue;
            /*水平居中，但设置浮动后失效
            margin: 0 auto;*/
            float: left;
            /*水平居中  相对于父级宽度计算*/
            margin-left: 50%;
            position: relative;
            left: -50px; 
        }
 </style>
 <div class="content">
    <div class="left"></div>
 </div>

如何让绝对定位的div居中？

    <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            position: relative;
        }

        .absolute {
            background: black;
            width: 100px;
            height: 100px;
            position: absolute;
           
            
            <!--第一种方式  要知道元素的宽高-->
            <!-- left:50%;-->
            <!--top: 50%; -->
            <!--margin-left: -50px;-->
            <!--margin-top:-50px; -->
            <!--第二种方式-->
            <!--transform: translate(-50%, -50%); -->
            
             <!--第三种 当上下左右都为0时， margin: auto使用这个就自动居中了-->
             <!--position: absolute; left: 0; top: 0; right: 0; bottom: 0;-->
             <!--margin: auto;   -->
        }
    </style>
    <div class="content">
        <div class="absolute"></div>
    </div>
    
    第四种方式使用flex布局
     .content {
        display: flex;
        justify-content:center;
        align-items:center;
     }

4、为什么图片下面有空隙，怎么去除，原理是什么？

img是inline-block元素，遵守inline-box的原则，对齐是按照文字的基线对齐，基线离底线会有一段缝隙，缝隙大小大约为1/4 字体大小。
怎么去除：
1. 第一种方式就是改变img的对齐方式默认是基于基线改成 vertical-align:bottom
2. 第二种方式就是修改img的display方式，将inline-block改编成 block ，dispaly:block

5. 行高是基于什么组成的？要设置一段文字在容器中垂直居中怎写？

行高是是有line-box决定的，而line-box是有line-height决定的。
父容器不指定高度，设置子容器的lineheight超过字体大小font-size即可垂直居中

 <div style="border:solid 1px red;">
    <!-- 背景 blue 由字体的大小决定 底线和顶线-->
    <!-- line-height的高度大于字体的高度 其余的高度会均匀分布在两侧 垂直居中 -->
    <span style="background:blue;color:#fff;font-size:40px;line-height:60px;">
      居中xfmsp
    </span>
  </div>

6. 用纯CSS创建一个三角形的原理是什么？

原理是:均分原理。

<style>
 .c3{
        width:0px;
        /* height: 200px; */
        border-bottom:30px solid red;
        /* border-right:30px solid blue; */
        border-left:30px solid transparent;
        border-right:30px solid transparent;
    }
</style>

<div class="c3">

</div>

7. 怎么让一个很长的文本不换行?

white-space:nowrap;

8. 如何美化checkbox

使用label+input
隐藏input的原生样式
使用 input:checked+label {}

 <style>
        .checkbox{

        }
        .checkbox input{
            display: none;
        }
        .checkbox input + label{
            background:url(./checkbox1.png) left center no-repeat;
            background-size:20px 20px;
            padding-left:20px;
        }
        .checkbox input:checked + label{
            background-image:url(./checkbox2.png);
        }
    </style>
    
     <div class="checkbox">
        <input type="checkbox" id="handsome"/>
        <label for="handsome">我很帅</label>
    </div>

9. position的值relative和absolute定位原点是？

<style>
    div {
      background: red;
      width: 100px;
      height: 100px;
    }

    .p2 {
      /* 偏移相对于文档流元素本身
        不会因为偏移改变原来的计算 */
      position: relative;
      left: 10px;
      top: -10px;
      background: blue;
      z-index: 2;
    }

    .p3 {
      /* 脱离文档流 他的位置相对于最近的父级absolute或者relative  如果没有的话 最终会找到body*/
      position: absolute;
      left: 80px;
      top: 30px;
      background: green;
      /* z-index: 1; */
      /* 定位为absolute relative fixed的定元素可以设置 z-index */
      /* 子集不会被遮罩 */
    }

    .p4 {
      /* 脱离文档流  但是位置相对于可视区域*/
      position: fixed;
      left: 0;
      bottom: 10px;
    }
  </style>
  
   <div class="p1">
    position:static
    文档流
  </div>
  <div class="p2">
    position:relative

  </div>
  <div class="p3">
    position:absolute
    <div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
  </div>
  <div class="p4">
    position:fixed;
  </div>
  <div class="p5">
    p5
  </div>

absolute：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的,如果没有则为body。
fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，定位原点是元素本身所在位置。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit：规定从父元素继承 position 属性的值。

10. 为什么要初始化CSS样式?

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

11. 使用inline-block之后，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

原因:浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方法：
- 消灭标签之间的间距
- 将html的字符大小变成0 单独设置子元素的字符大小

12. 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化；box（名词）：通用的矩形容器。
旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
适用场景：
- 浮动布局
- 各种机型屏幕的适配
- 水平和垂直居中
- 自动分配宽度
- ......

13、一个满屏品字布局如何设计?


<!--方案一-->
<style>
   * {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */
   html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
   
   .header {height: 50%;width: 50%;background-color:  rgb(255,2545,167);margin: 0 auto;}
   .main {height: 50%;width: 100%;}
   .main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);}
   .main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>

<div class="header"></div>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>	

<!--方案二-->

<style>
	* {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */
    html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
    
    .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;}
    .header {height: 50%;}
    .header .div-up {width: 50%;height: 100%;background-color:  rgb(255,2545,167);margin: 0 auto;}
    .main {height: 50%;position: relative;}
    .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);}
    .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>

<div class="pinzi-flex">
    <div class="header">
	    <div class="div-up"></div>
    </div>
    <div class="main">
	    <div class="div-left"></div>
	    <div class="div-right"></div>
    </div>
</div>

<!--自己的方案 使用flex-->
<style>
        * {margin: 0;padding: 0;}
        html, body {height: 100%;}
        .box {
            width: 100%;
            height: 100%;    
        }
        .box_up {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
        }
        .box1 {
            width: 50%;
            background:red;
        }
        .box_down {
            width: 100%;
            height: 50%;
            display: flex;
        }
        .box2 {
            width: 50%;
            background:blue;
        }
        .box3 {
            width: 50%;
            background:green;
        }
    </style>
    
    <div class="box">
        <div class="box_up">
            <div class="box1"></div>
        </div>
        <div class="box_down">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </div>

14. 常见兼容性问题？怎么解决？

最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善。
IE6下浮动元素的双边距问题,需要给浮动元素的它设置display: inline。
chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：-webkit-text-size-adjust: none;。
上下margin重合问题，相邻的两个div margin-left margin-right不会重合，但相邻的margin-top margin-bottom会重合。

1.外层padding 2.透明边框border:1px solid transparent; 3.绝对定位postion:absolute 4.外层DIV overflow:hidden; 5.内层DIV&emsp;加float:left;display:inline; 6.外层DIV有时会用到zoom:1;

因为存在两种盒子模式：IE盒子模式和W3C标准模式，所以对象的实际宽度也要注意。
鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer。
消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。
有些时候图片下方会出现一条间隙，通常会出现在FF和IE6下面,一般给img添加vertical-align属性即可，比如 img{verticle-align:center;}。

15. CSS中visibility属性的collapse属性值有什么用？在不同浏览器下有什么区别？、

对于一般的元素，它的表现跟display:hidden是一样的。
但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

16. 如何适配移动端的适配?

首先在head里添加viewport --- 视口。
使用 em rem vw wh等单位。
使用媒体查询media query 珊栏布局等

        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }

在设计上,尽量的隐藏、折行、自适应。

17. 如何修改chrome记住密码后自动填充表单的黄色背景？

chrome表单自动填充后，input文本框的背景会变成黄色，原因在于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}

方法一: 使用足大的内阴影覆盖原来的颜色

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
}

关闭自动填充功能

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

18. 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

float脱离了文档流，但是不脱离文本流
为什么要清除：因为子元素为浮动空间不在父元素的浮动范围之内（不会占据父元素的浮动空间），有可能浮动的元素会超出父元素，造成父级高度塌陷，从而对其他元素造成影响。
方法: 父级元素加上 overflow：hidden（auto）, 在父级元素后面加上 ::after{clear:both,dispaly:block}

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

发布前压缩css代码，减少数据传输量
合并属性，比如margin-left margin-top 合并成一条。
移除不必要的选择器，尽量去除属性选择器，全局选择器等。
减少低效代码的使用，如滤镜，import等
对于小图片可以使用base64或者雪碧图等功能。

20. 全屏滚动的原理是什么？用到了CSS的那些属性？

原理：方法一是整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500% ，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现。
overflow：hidden;
transition：all 1000ms ease;
css滚动原理

21. font-style属性可以让它赋值为“oblique” oblique是什么意思？

oblique表示倾斜的文字
对于没有斜体字的文字使用oblique实现倾斜效果

22. overflow: scroll时不能平滑滚动的问题怎么处理？

主要是出现在iphone的浏览器上，以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。
还可以使用插件 iScroll

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

<style type="text/css">  
        html,
        body { height: 100%; padding: 0; margin: 0; }
 
         /* margin: 100 100 100 100
        上右下左
        margin 100 90 100
        上100 左右 90 下 100
        margin 100 80
        上下 100 左右 80 */
        /*方案一*/
      
        .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
        .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
        .B { height: 100%; background: #D9C666; }
 
        /*方案二*/
        /* .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
        .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
        .B { height: 100%; background: #D9C666; } */
 
        /* 方案三 */
        /* .outer { height: 100%; position: relative; }
        .A { height: 100px; background: #BBE8F2; }
        .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; } */
</style>    
    
 <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
 </div>

24. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

25. 元素竖向的百分比设定是相对于容器的宽度or高度？

height是基于容器的高度
margin-top 、margin-bottom是根据容器的宽度
line-height是根据容器的font-size

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

从右至左解析CSS选择器

27. 怎样实现3D变换？

首先要加上透视角度 perspective:500px;
然后要开启3D变换效果 transform-style: preserve-3d;
最后使用transform 进行3D的组合 transform： translate rotate .......

28.如何产生不占空间的边框

box-shadow box-shadow: 0 0 0 5px green;
box-sizing:border-box 这种情况容器的宽度包含边框

29. css动画的种类

补间动画 trasition:监控的属性动画的时间动画的function
关键帧动画

<style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* 动画的方向 */
            /* animation-direction: reverse; */
            /* 动画可以停在结束或者开始的状态 backward */
            /* animation-fill-mode: forwards; */
            /* 无限循环 或者指定数字即为循环的次数 */
            /* animation-iteration-count: infinite; */
            /* 播放状态 paused 为停止动画 */
            /* animation-play-state: paused; */
        }
        @keyframes run{
          /* from{width: 100px;} */
            0%{width: 100px;}
            50%{width: 800px;}
            100%{width: 100px;}
            /* to{width: 100px;} */
        }
    </style>
    
    <div class="container">
    </div>

逐帧动画去掉关键帧的补间使用 animation-timing-function: steps(1);

 <style>
        .container{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: url(./animal.png) no-repeat;
            animation: run 1s infinite;
            animation-timing-function: steps(1);
        }
        @keyframes run{
            0%{background-position: 0 0;}
            12.5%{background-position: -100px 0;}
            25%{background-position: -200px 0;}
            37.5%{background-position: -300px 0;}
            50%{background-position: 0 -100px;}
            62.5%{background-position: -100px -100px;}
            75%{ background-position: -200px -100px;}
            87.5%{background-position: -300px -100px;}
            100%{background-position: 0 0;}
        }
    </style>
    
     <div class="container">
    </div>

30. CSS动画的性能

性能不坏。
部分情况由于js
但是js可以做到更好
部分高危属性 box-shadow等性能较差

前端面试二（CSS）

1. CSS选择符有哪些？ 哪些属性可以继承？ 优先级算法如何计算？ 内联和important哪个优先？

2. CSS新增哪些伪类？

3、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

4、为什么图片下面有空隙，怎么去除，原理是什么？

5. 行高是基于什么组成的？要设置一段文字在容器中垂直居中怎写？

6. 用纯CSS创建一个三角形的原理是什么？

7. 怎么让一个很长的文本不换行?

8. 如何美化checkbox

9. position的值relative和absolute定位原点是？

10. 为什么要初始化CSS样式?

11. 使用inline-block之后，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

12. 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

13、一个满屏 品 字布局 如何设计?

14. 常见兼容性问题？怎么解决？

15. CSS中visibility属性的collapse属性值有什么用？在不同浏览器下有什么区别？、

16. 如何适配移动端的适配?

17. 如何修改chrome记住密码后自动填充表单的黄色背景 ？

18. 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

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

20. 全屏滚动的原理是什么？用到了CSS的那些属性？

21. font-style属性可以让它赋值为“oblique” oblique是什么意思？

22. overflow: scroll时不能平滑滚动的问题怎么处理？

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

24. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

25. 元素竖向的百分比设定是相对于容器的宽度or高度？

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

27. 怎样实现3D变换？

28.如何产生不占空间的边框

29. css动画的种类

30. CSS动画的性能

1. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？

13、一个满屏品字布局如何设计?

17. 如何修改chrome记住密码后自动填充表单的黄色背景？