前端常考面试总结

目录

一、CSS

1.flex容器

2.item属性

3.rem和em有什么区别

4.transtion和transform的含义及用法

5.@keyframe属性

6.@media属性

7.栅格(col-lg-6)原理

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值