CSS面试

作者: 逸軒 | 来源:发表于2020-01-30 23:22 被阅读0次

1.css3有哪些新特性？

实现圆角border-radius、阴影box-shadow、border-image；
对文字加特效text-shadow、线性渐变gradient、旋转transform；
transform：旋转rotate（9deg）、缩放scale（0.85,0.9）、定位translate（0px，-30px）、倾斜skew（-9deg、0deg）；
增加了更多的css选择器、多背景、rgba
在css3中引入为一个的伪类：：selection
媒体查询、多栏布局

2.为什么要清除浮动？怎么清除浮动？

产生原因：子盒子浮动导致的父盒子内高度为 0 ，父级盒子不能被撑开，发生高度塌陷的情况。

带来的负作用：

背景不能显示
边框不能撑开
margin和padding值不能正确显示

清除浮动的方法：

给父盒子设置合适的高度；
给父盒子添加样式 overflow:hidden/auto;（这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子）（为了去除兼容性问题，会添加zoom:1;）
在父盒子里面的子盒子后面添加一个子盒子，如div，添加样式 .clear{ clear:both; }；
采用伪元素，给父元素追加:after，给父元素添加一个类.clearfix{content:"";clear:both;}

BFC块级格式化上下文的特征：

内部的Box会在垂直方向，从顶部开始一个接一个地放置；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。

创建块级格式化上下文：

浮动 (元素的 float不为 none）
绝对定位元素 (元素的 position为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
overflow的值不为 visible的元素(元素的 overflow: hidden，overflow: auto)
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

3.怎么让文本不自动换行？怎么让超过文本部分变成省略号？

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

4. css中怎么使盒子上下居中（面试官说水平居中太简单了）？

方法一：

设置垂直居中的时候要注意，先给祖先元素html和body的高度设置为100%（默认是0）；并且清除默认样式（margin和padding都设置为0，否则浏览器就会出现滚动条），然后给子盒子相对定位和位移position：relative;top:50%;，然后减去本身宽度的一半即可（margin-top：负自身高度的一半 // transform：translateY(-50%)向上偏移自身高度的一半；

注意：top、bottom、left、right的百分比值都是相对于包含块(上一父级)的高度、宽度的；

html,body{
    height:100%;
    /*防止出现滚动条*/
    padding:0;
    margin:0;
}
.son{
    position:relative;
    top:50%;
    margin-top:-50px;/*子盒子自身高度的一半*/
    /*不知道高度的情况下*/
    transform:translateY(-50%);
}

方法二：

弹性盒子。给父元素设置display:flex; align-items:center;设置body里的元素垂直居中；（justify-content:center;定义body里的元素水平居中）

.father{
    display:flex;
    align-items:center;/*垂直居中*/
    justify-content:center;/*水平居中*/
}

5.app适配怎么写？使用的单位是什么？（rem）

解答：①视口viewPort适配，PC和手机屏幕不匹配的问题。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no,maximum-scale=1.0,minimum-scale=1.0">

②图片不清晰问题，使用大一倍的图片，通过css的width和height进行强制压缩到原来大小；

背景图使用background-size：contain单边填充或者background-size：cover按比例填充适配。

③流体布局（宽度百分比）

.menu {
    width:25%;
    heigth:100px;/*高度给定*/
    boxing-size：border-box;
}

④响应式布局（根据屏幕大小动态调整页面布局）

.menu {
    width:23%;
    height:100px;
    float:left;
    margin:30px 1%;
}
@media (max-with:800px){
    .menu {
        width:46%;
        margin:30px 2%;
    }
}
@media (max-with:500px){
    .menu {
        width:90%;
        margin:30px 5%;
    }
}

6.子盒子在父盒子中水平垂直居中有几种方法？（定位、弹性盒子）

水平垂直居中：

1.定位position+margin外边距（需要知道子盒子的宽高）

/*父盒子*/
position: relative;

 /*子盒子*/
 position: absolute;            
 top: 50%;            
 left: 50%;            
 margin-top: -50px;            
 margin-left: -50px;

2.定位position+transform（不需要知道宽高）

/*父盒子*/
position: relative;

/*子盒子*/
position: absolute;            
top: 50%;            
left: 50%;            
transform: translate(-50%,-50%);

优点：1. 内容可变高度 2. 代码量少

缺点： 1. IE8不支持 2. 属性需要写浏览器厂商前缀 3. 可能干扰其他transform效果 4. 某些情形下会出现文本或元素边界渲染模糊的现象

3.使用弹性盒子flex布局（不需要知道宽高）

/*父盒子*/ 
display: flex;
justify-content: center; 
align-items: center;

4.margin：auto（不需要知道宽高）

设置margin自动适应，然后设置定位的上下左右都为0，就如四边均衡受力从而实现盒子的居中；

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

如果父子元素都有设置宽高：margin: 150px auto;

5.table-cell

将父盒子设置为table-cell(能够使元素呈单元格的样式显示)，并设置text-align: center(使内容水平居中)；vertical-align: middle(使内容垂直居中);。子盒子设置为inline-block可以使其内容变为文本格式，也可设置宽高；

.father{    
    display: table-cell;    
    width: 400px;    
    height: 400px;    
    vertical-align: middle;     
    text-align: center;
}
.child{    
    display: inline-block;    
    vertical-align: middle;
}

7.定位有哪几种属性？是否占位？相对定位是相对于什么进行定位的？（相对于本身）

Position有四个属性值，分别是static 、fixed、 relative 、absolute；

static	fixed	relative	absolute
默认属性，让定位的元素恢复到正常文本流中	固定定位，fixed是相对于window窗口的定位	相对定位；相对于自己本身的定位，一般是和absolute属性值一起用	绝对定位；相对于父级元素的定位，如果没有父级元素时相对于窗口的定位；
比如，在媒体查询页面当中，正常页面当中需要给元素加position属性，但是在响应式页面中不需要，这是就只能用position：static；无论页面如何滚动，这个盒子显示的位置不变。	例如置顶、侧边广告、顶部导航等	相对定位不会破坏元素的文本流，但是会改变元素的视觉效果	绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
不会破坏元素的文本属性	会改变元素的文本流，有float的效果	不脱标，不会破坏元素的文本属性	脱标，会改变元素的文本流，有float的效果；

子绝父相意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。

只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

8.css中的动画特性可以用js实现，那为什么还要用css来实现？

当您为 UI 元素采用较小的独立状态时，使用 CSS。 CSS 变换和动画非常适合于从侧面引入导航菜单，或显示工具提示。最后，可以使用 JavaScript 来控制状态，但动画本身是采用 CSS。用CSS制作动画是让元素在屏幕上移动的最简单方法。

在需要对动画进行大量控制时，使用 JavaScript。 Web Animations API 是一个基于标准的方法，现已在 Chrome 和 Opera 中提供。该方法可提供实际对象，非常适合复杂的对象导向型应用。在需要停止、暂停、减速或倒退时，JavaScript 也非常有用。

那么如何从两者中抉择？

根据 Google Developer，渲染线程分为主线程 (main thread) 和合成线程 (compositor thread)。如果 CSS 动画只是改变transforms 和opacity，这时整个 CSS 动画得以在合成线程完成（而JS动画则会在主线程执行，然后触发合成线程进行下一步操作），在 JS 执行一些昂贵的任务时，主线程繁忙，CSS 动画由于使用了合成线程可以保持流畅。

在许多情况下，也可以由合成线程来处理 transforms 和 opacity 属性值的更改。

对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码。

CSS动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS则需要自己写事件。

如果有任何动画触发绘画，布局或两者，则需要 “主线程” 才能完成工作。 这对于基于 CSS 和 JavaScript 的动画都是如此，布局或绘制的开销可能会使与 CSS 或 JavaScript 执行相关的任何工作相形见绌，这使得问题没有实际意义。

CSS3有兼容性问题，而JS大多时候没有兼容性问题。

9.左边固定，右边自适应

float方法，BFC方法，CSS3的flex布局与grid布局。

常用的宽度自适应的方法思路：

1、通常是利用了block水平的元素宽度能随父容器调节的流动特性

2、另外一种思路是利用CSS中的calc()方法来动态设定宽度

3、还有一种思路是利用CSS3中的新型布局flex layout与grid layout。

接下来详细说一下几种方法

先给出html标签

<div class="outer">    
    <div class="sidebar">固定宽度区(sideBar)</div>     
    <div class="content">自适应区(content)</div>
</div>

①将左侧div浮动，右侧div设置margin-left：左侧固定宽度

.sidebar{
    float: left;
    width:200px;
}
.content{
    margin-left:200px;
}
/*清除浮动*/
.outer{overflow:hidden;}    
/*清除浮动*/
.outer:after{            
    content: "";            
    height: 0;            
    line-height: 0;            
    display: block;            
    visibility: hidden;            
    clear: both;        
}

②固定区采用绝对定位，自适应区设置margin-left:左侧固定宽度

缺点:使用了绝对定位，若是用在某个div中，需要更改父容器的position；没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度（绝对定位后脱标），因此只能通过设置父容器的min-height来放置这种情况。

.outer{
    position: relative;
}
.sidebar{
    position: absolute;
    left: 0;
    top:0;
    width:200px;
}
.content{
    margin-left:200px;
}

③table布局的方法：

注意：要给父级width：100%；否则元素按照内容大小撑开；元素高度按照最大值展示；

.outer{
    display: table;
    width:100%; 
}
.sidebar{
    display:table-cell;
    width:200px;
    height:150px;
}
.content{
    display:table-cell;
    height:100px;
}

④双float + calc()计算属性，左侧宽度需已知

.sidebar{
    float:left;
    width:200px;
}
.content{
    float:left;
    width:calc(100% - 200px);
}

⑤双inline-block + calc()计算属性：左侧宽度需固定

缺点：需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing；需要消除空格字符的影响；需要设置vertical-align: top满足顶端对齐。

.outer{
    box-sizing: content-box;
    font-size: 0; 
    border: 1px solid red;
}
.sidebar,.content{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 200px; 
    height:150px; 
    font-size: 14px;
}
.outer .content{
    width:calc(100% - 200px);
    height:100px;
}

⑥float + BFC方法：

缺点：左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示

.sidebar{
    float: left;
}
.content{
    overflow:auto;
}
/*清除浮动两种方法*/
.outer{overflow:hidden;}        
.container:after{content: "";height: 0;line-height: 0;display: block; visibility: hidden;clear: both;}

⑦flex布局

注意：flex容器的一个默认属性值：align-items: stretch;导致了列等高的效果。为了让两个盒子高度自动，需要设置: align-items: flex-start；

flex.outer{
    display: flex;
}
.sidebar{
    flex:0 0 200px;
}
.content{
    flex: 1;
}

flex属性是【flex-grow，flex-shrink 和 flex-basis】的简写，默认值为0 1 auto。后两个属性可选。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

⑧grid布局

.outer{
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows:100px;
    /* grid-template-columns: 200px 1fr; 这个也可以*/}
.sidebar{}
.content{
    word-break: break-all;
    overflow: hidden;
}