前端常考面试总结

最新推荐文章于 2024-07-15 21:11:11 发布

Joe佳

最新推荐文章于 2024-07-15 21:11:11 发布

阅读量191

点赞数

分类专栏：面试大纲文章标签：面试

本文链接：https://blog.csdn.net/weixin_58100683/article/details/119899874

版权

面试大纲专栏收录该内容

1 篇文章 0 订阅

订阅专栏

4.transtion和transform的含义及用法

10.清除浮动的方式有哪些？（最少三种，推荐使用：after）

11. hetml5有哪些新特性

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS

1.flex容器

flex-direction （属性决定主轴的方向（即项目的排列方向）。）

flex-wrap （默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。）

flex-flow （flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap）

justify-content （属性定义了项目在主轴上的对齐方式。(高度一致，width不同的对其)）

align-items （属性定义项目在交叉轴上如何对齐。（width一致，高度不一致的对其））

align-content （属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）

总结：felx的6个容器属性可以记忆成：一方向，一换行，一简写，三对其。

参考网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2.item属性

order（设置权重，默认为0）

flex-grow（将flex-item成比例放大）

flex-shrink（将flex-item成比例缩小）

flex-basis（设置flex-item的长度(覆盖width)，浏览器依据此值进行放大缩小）

flex（合并flex-grow fex-shrink flex-basis）

align-self (单独设置某flex-item的对齐方式)

3.rem和em有什么区别

对于rem和em区别一句话概括就是：rem相对于根元素，em相对于父元素

总结：

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

em 单位基于使用他们的元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响。

rem 单位可以从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

媒体查询中使用 rem 单位不要在多列布局中使用 em 或 rem ,改用%。

不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

4.transtion和transform的含义及用法

transform是转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如位移、缩放、旋转等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。

transition是过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的动效。而transform是没有动画效果，

1.transform基本用法：

 transform: [转换函数];

先说基本用法，transform接受一个转换函数，每个转换函数都会有不同的效果，下面是三个主要的2D转换函数

所以我们想移动当前元素的话就可以这样(往上移动 10 像素，往右移动 10 像素)

transform: translate(-10px, 10px);

如果想给当前元素配置多个转换效果怎么办，如下(向右下角移动 10 像素并顺时针旋转10°)：

transform: translate(10px, 10px) rotate(10deg);

transform只会影响当前元素的状态，达到类似position: relative;的效果，而且transform是默认基于元素的中心进行转换的，就算想改的话也可以使用transform-origin属性进行修改


.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}
 
.box:hover {
    transform: scale(1.2, 1.2);
}

接下来看一下transition的基本用法：

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：

transition: height 2s ease .5s;

或者一个属性不够，想要监听所有属性：

transition: all 2s ease .5s;

注意，这里的所有属性是指能进行动画过渡的属性，有很多属性是不能进行过渡的，比如display，你不能让一个div的显示模式慢悠悠的发生过渡。

有了上面的认识时候搭配:hover等可以引起属性值变化的伪类时就可以很轻松的做出一个动画效果：

.box {
    width: 10px;
    transition: width 0.4s ease;
}
 
.box:hover {
    width: 50px;
}

如果你想给多个属性指定同一个过渡的时候该怎么做？如下：同时监听宽度和高度进行过渡

transition: width 2s ease .5s
// 等同于
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;

如果你想给多个属性指定多个过渡的时候该怎么做？

transition: height 2s, width 3s;

5.@keyframe属性

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则，您能够创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:mymove 5s infinite;
            -moz-animation:mymove 5s infinite; /* Firefox */
            -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
            -o-animation:mymove 5s infinite; /* Opera */
        }
 
        @keyframes mymove
        {
            0%   {top:0px;}
            25%  {top:200px;}
            75%  {top:50px}
            100% {top:100px;}
        }
 
        @-moz-keyframes mymove /* Firefox */
        {
            0%   {top:0px;}
            25%  {top:200px;}
            75%  {top:50px}
            100% {top:100px;}
        }
 
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0%   {top:0px;}
            25%  {top:200px;}
            75%  {top:50px}
            100% {top:100px;}
        }
 
        @-o-keyframes mymove /* Opera */
        {
            0%   {top:0px;}
            25%  {top:200px;}
            75%  {top:50px}
            100% {top:100px;}
        }
    </style>
</head>
<body>
 
<div></div>
 
</body>
</html>

6.@media属性

使用@media属性可以针对不同的屏幕尺寸设置不同的样式，值得注意的就是需要设置响应式页面时@media属性是非常有用的，当重置浏览器大小的过程中，页面会更具浏览器的宽度和高度重新渲染页面。

简单CSS样式不同分辨率案例：

案列一：

1280分辨率以上（大于1200px）

@media (min-width:1200px) {
    .container{ width: 1100px; }
}

分析：浏览器宽度大于1200px时，.container样式设置宽度为1100px

1100分辨率（大于960px，小于1199px）

@media (min-width:960px) and (max-width:1199px) {
    .container{ width: 960px; }

分析：浏览器宽度大于960px时，小于1199px时，.container样式设置宽度为960px

7.栅格（col-lg-6）原理

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

8.垂直水平居中有哪些方法？

HTML代码：

<div id="container">
    <div id="box"></div>
</div>

方法一：定位 absolute + 负margin

#container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     
     position: relative;
 }
 #box {
     width: 100px;
     height: 100px;
     background: red;
     
     position:absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;  /* 左偏移量取其元素宽度的一半的负值 */
        margin-top: -50px;    /* 上偏移量取其元素高度的一半的负值 */
 }

解释：为父元素设置了相对定位之后，子元素的绝对定位就是相对于父元素盒子的左上顶点，所以定位之后我们需要回退盒子一半的距离。

方法二：定位absolute + margin auto

#container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
 
     position: relative;
 }
#box {
    width: 100px;
    height: 100px;
    background: red;
 
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

方法三：弹性盒子display: flex

#container{
    width:600px;
    height: 600px;
    border: 1px solid black;
 
    display: flex;
    justify-content: center;
    align-items: center;
}
#box{
    width: 100px;
    height: 100px;
    background: red;
}

方法四：利用transform

#container{
    width:600px;
    height: 600px;
    border: 1px solid black;
    
    position: relative;
}
#box{
    width: 100px;
    height: 100px;
    background: red;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

9.如何绘制一个三角形？

方法一：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle{
            width: 0px;     /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            height: 0px;
            border-bottom: 200px solid #00a3af;
            border-left: 200px solid transparent;    /*transparent 表示透明*/
            border-right: 200px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="content"></div>
</body>
 
<style>
    .content{
        width: 0px;
        height: 0px;
        border: 200px solid ;
        border-color: transparent transparent transparent red;
    }
</style>
</html>

10.清除浮动的方式有哪些？（最少三种，推荐使用：after）

为什么要清除浮动？

答：因为当父盒子高度为0时，子盒子不占位置，子盒子不会撑开父盒子，所以下面的标准流盒子，会跑到父盒子中的子盒子下面。

使用after伪元素清除浮动

.clearFix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";
   display: block;
   height: 0;
   clear:both;
   visibility: hidden;
}
.clearFix{
   *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
 
<div class="fahter clearFix">
   <div class="big">big</div>
   <div class="small">small</div>
</div>

父级添加overflow属性（父元素添加overflow:hidden）

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }
 双伪元素清除浮动

.clearFix:before, .clearFix:after { 
  content:".";
  display:table;
}
.clearFix:after {
 clear:both;
}
.clearFix {
  *zoom:1;
}

关于浮动的小知识：

浮动的盒子千万不要让他超出父盒子。

超出父盒子的部分会影响下面盒子中的浮动的子盒子。

浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。

11. hetml5有哪些新特性

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas;

用于媒介回放的 video 和 audio 元素;

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

Joe佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常考面试总结

目录一、CSS1.flex容器2.item属性3.rem和em有什么区别4.transtion和transform的含义及用法5.@keyframe属性6.@media属性7.栅格（col-lg-6）原理8.垂直水平居中有哪些方法？9.如何绘制一个三角形？10.清除浮动的方式有哪些？（最少三种，推荐使用：after）11. hetml5有哪些新特性提示：以下是本篇文章正文内容，下面案例可供参考一、CSS1.flex容器flex-direct.
复制链接

扫一扫