前端面试二（CSS）

爱被打了一巴掌 2022-01-20 07:11 172阅读 0赞

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

1.  **选择器的分类**
    
     *  元素选择器 a\{\}
     *  伪元素选择器 ::before\{\}
     *  类选择器 .link\{\}
     *  属性选择器 \[type=radio\]\{\}
     *  伪类选择器 :hover\{\}
     *  ID选择器 \#id\{\}
     *  组合选择器 \[type=radio\]+label\{\}
     *  否定选择器 :not\{.link\}
     *  通用选择器 \*\{\}
2.  **哪些属性可以继承**
    
        font-size font-family color 
        复制代码
3.  **优先级算法如何计算?**
    
     *  ID选择器 +100
     *  类 属性 伪类 + 10
     *  元素 伪元素 +1
     *  其他 +0
     *  原则：不进位
4.  **内联和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 就居中了

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

<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>
    复制代码

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

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

1.  img是inline-block元素，遵守inline-box的原则，对齐是按照文字的基线对齐，基线离底线会有一段缝隙，缝隙大小大约为1/4 字体大小。
2.  怎么去除：
    
    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;">
        
        
        <span style="background:blue;color:#fff;font-size:40px;line-height:60px;">
          居中xfmsp
        </span>
      </div>
    复制代码

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

*  原理是:均分原理。

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

white-space:nowrap;
    复制代码

## 8. 如何美化checkbox ##

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

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

*  `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>
    
    
    <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 加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滚动原理][css]

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

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

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

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

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

## 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变换？ ##