前端面试题集锦（2）

目录

1、CSS3动画知道吗，怎么实现的

2、定位知道吗，说下几种不同的定位分别有什么特点，详细说明

3、知道渐变嘛，说下你的了解

4、行内元素有那些。块级元素有那些。空元素有哪些

5、Flex的横向平铺填充

6、flex用法场景

7、父元素visibility：hidden；子元素设置 visibility：visible，子元素显示吗

---

1、CSS3动画知道吗，怎么实现的

🍀  知道的，CSS3 动画主要是通过 animation 这个属性来进行实现，使用动画的时候需要先进行声明动

画然后再去调用，哪里需要产生动画效果哪里就使用 animation 进行调用

🍀  基本语法：

<style>
*{margin:0;padding:0}
div{
width:200px;
height:200px;
background-color:red;
/*调用动画*/
animation:movers 20s linear infinite alternate
}
/*声明动画*/
@keyframes movers{
form{
width:200px;
height:200px;
background-color:red;
}
to{
width:400px;
height:400px;
background-color:green;
border-radius:50%;
}
语法注意事项
16、CSS3新增了哪些东西
CSS3里面的新增主要有：CSS选择器，盒子中的修饰，背景，文本效果，字体，2D/3D，过渡动画，
多列布局等等
CSS选择器
盒子修饰
CSS新增背景模块
CSS文本效果模块
}
</style>
<div></div>

语法注意事项 ：

🍀  animation:复合属性

🍀  animation-name 规定需要绑定到选择器的 keyframe 名称。。

🍀  animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

🍀  animation-timing-function 规定动画的速度曲线。

🍀  animation-delay 规定在动画开始之前的延迟。

🍀  animation-iteration-count 规定动画应该播放的次数。

🍀  animation-direction 规定是否应该轮流反向播放动画。

🍀  form 初始状态

🍀  to 结束装填

🍀  可以替换成

🍀  0% 初始状态

🍀  100% 结束状态

🍀  后面的百分比可以称之为关键帧动画

2、定位知道吗，说下几种不同的定位分别有什么特点，详细说明

🍀  定位的含义是将元素放在指定的位置上，在css 中特指 position 属性，他一共有 5 种属性值。

🍀  分别是：

         static 静态定位，是元素自带的默认的定位方式。

         relative 是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。

         fixed 是固定定位是基于浏览器窗口进行定位的，会脱离文档流。

         absolute 是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流，常用的场景是子绝父相。

         sticky 是粘性定位，是 css 新增的属性值；可以说是相对定位 relative 和固定定位 fixed 的结合；它主要用在对scroll 事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位 要求时； position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

🍀  使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有四个：top；right；bottom；left；定位的属性决定了定位的偏移参照物

🍀  参照物问题:

         静态定位不会发生位置的调整所以不存在参照物的问题

         相对定位添加偏移属性后，相对于自己原来的位置进行位置调整

         绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角（body左

         上角）进行位置的调整；如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整；绝对定位             的参照物就是所谓的包含块的意思

         固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响

         粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

3、知道渐变嘛，说下你的了解

🍀  CSS3 渐变 （gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（ gradient ）是 由浏览器生成的 。

🍀  CSS3 定义了两种类型的渐变（gradients）：使用都是 background 属性

一、线性渐变 （Linear Gradients） - 向下 / 向上 / 向左 / 向右 / 对角方向

       基本语法 :background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

二、径向渐变 （Radial Gradients） - 由它们的中心定义

       基本语法 :background-image: radial-gradient(shape size at position, start-color, ..., last-color);

       为了创建一个径向渐变，你也必须至少定义两种颜色节点。

       颜色节点即你想要呈现平稳过渡的颜色。

        同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center （表示在中心点），渐变的形状是 ellipse （表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）

       size 的取值 closest-side ， farthest-side ， closest-corner ， farthest-corner

三、重复渐变

🍀  repeating-linear-gradient() 函数用于重复线性渐变：

<style>
  #grad {
     /* 标准的语法 */
     background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>

🍀  repeating-radial-gradient() 函数用于重复径向渐变：

<style>
   #grad {
       background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
 }
</style>

4、行内元素有那些。块级元素有那些。空元素有哪些

🍀  行内元素：不能实现宽度高度，横向显示

              a,span,i,em,var,b,strong,sup,sub,s,del,label,font,mark

🍀  块级元素：能设置宽度高度，纵向显示，并且默认站宽一整行

              h1~h6,p,div,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend,marquee,iframe,header,nav,footer,sectio                 n,main,figure,figcaption,hgroup,aside,article

                                                                                         

🍀  行内块元素：能设置宽度高度，并且横向显示

             input,img,select,textarea

🍀  空元素：就是单标签

             input,img,br,meta,link,hr

🍀  置换元素：因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容

             input,img,select,textarea

5、Flex的横向平铺填充

🍀  让父元素触发弹性和也就是display:flex; 然后让所有的子元素均分使用 flex:1; 代码如下:

<div style="width: 1000px;height: 500px;display: flex;">
     <span style="flex:1;">1</span>
     <span style="flex:1;">2</span>
     <span style="flex:1;">3</span>
     <span style="flex:1;">4</span>
     <span style="flex:1;">5</span>
</div>

6、flex用法场景

🍀  场景一：移动端和PC 端布局中；能够高效解决间距调整的问题（移动端布局和 PC 端布局）

🍀  场景二：能快速高效实现元素水平垂直居中（点击删除的弹窗）

🍀  场景三：能够实现快速元素均分，避免了百分比设置的不确定性

🍀  场景四：快速实现多列布局，能高效实现瀑布流布局

🍀  场景五：后台管理系统的两栏和三栏布局

7、父元素visibility：hidden；子元素设置 visibility：visible，子元素显示吗

🍀  这时候子元素是显示的，原理如下：

🍀  当只是给父元素添加visibility ： hidden ，子元素会继承父元素的 visibility ： hidden 的值，也会跟着父元素隐藏。

🍀  如果给父元素添加visibility ： hidden ；同时在给子元素添加 visibility ： visible ，子元素是显示的。 原 因： 添加给子元素 visibility ： visible 是大于父元素添加的 visibility ： hidden 的。所以优先执行子元素的visibility ： visible 属性。