移动端-理论题

1.HTML5的新特性？

1.语法更简单

2.标签的语义化

3.语法更宽松

4.多设备跨平台

5.自适应网页设计

.2Html5新增的语义化标签。【考核知识点：语义化标签】  

    头部标签：<header></header> 

    导航标签：<nav></nav>

    内容区块表签：<section></section>

    页脚标签：<footer></footer>

    侧边栏：<aside></aside>

    页面内独立的内容区域：<article></article>

3.列举新增加的input的type属性值。【考核知识点：表单新增的属性】    

     email    邮箱

    url      网址

   date   日期

    time   时间

    month  月

    week   周

    number 数字

    tel     手机号码

    search 搜索框

    color   颜色

4.列举伪类选择器。【考核知识点：伪类选择器】

    :first-child  匹配父元素中的第一个子元素

    :last-child      匹配父元素中的最后一个子元素

    :nth-child(n)   匹配父元素中的第几个子元素

    :first-of-type泰普 指定类型E的第一个

    :last--of-type  泰普 指定类型E的最后一个

    :nth--of-type(n)    指定类型E的第n个

5.nth-child()和nth-of-type()的区别【考核知识点：伪类选择器】

    nth-child 选择父元素里面的第几个子元素，不管是第几个类型

    nth-of-type 选择指定类型的元素

6. 列举属性选择器。【考核知识点：属性选择器】

    E[att]     选择具有att属性的E元素

    E[att="val"]    选择具有att属性且属性值为val的E元素

    E[att^="val"]   选择具有att属性且属性值以val开头的E元素

    E[att$="val"]   选择具有att属性且属性值以val结尾的E元素

    E[att*="val"]   选择具有att属性且属性值中包含val的E元素

7. Transform的属性值。【考核知识点：transform】

transform:移动       旋转  缩放;

    transform:translate   rotate   scale ;

8. Animation的属性值。【考核知识点：animation】

    animation-name： 动画名称

    animation-duration： 动画持续时间

    animation-timing-function： 动画过渡类型

    animation-delay： 动画延迟

    animation-iteration-count： 动画循环

    animation-direction： 动画是否反向

    animation-fill-mode： 动画是否停留到最后

    animation-play-state：动画暂停

9.写出transition过渡动画的四个属性？

transition: 过渡属性名 过渡时间 过渡的形式 过渡延迟时间;

比如：transition:width 1s linear 1s;

10.动画的运动类型有几种？

linear  动画从头到尾的速度是相同的。   

ease    默认。动画以低速开始，然后加快，在结束前变慢。 

ease-in 动画以低速开始。   

ease-out 动画以低速结束。  

ease-in-out 动画以低速开始和结束。

11.如何使用纯css实现一个三角形？。【考核知识点：transform】

div {

   width: 200px;

    height: 200px;

   margin: 200px;

    transform: rotate(45deg);

    border-top: 1px solid #f00;

border-left: 1px solid #f00;

}

12.设置一个盒子上下左右都居中。【考核知识点：transfrom】（抄写1遍）

    CSS:

        div{

           width:500px;

           height:300px;

           border:1px solid;

           margin:0 auto;

           position:relative;

        }

        div>p{

           position: absolute;

           width:100px;

           height:100px;

           background:red;

           left:50%;

           top:50%;

           transform: translate(-50%,-50%);

        }

    HTML:

        <div>

           <p></p>

        </div>

13.怎么实现旋转的三角形【考核知识点：transform】

<style>

    div {

        position: relative;

        width: 249px;

        height: 35px;

        border: 1px solid #000;

    }

    div::after {

        content: "";

        position: absolute;

        top: 8px;

        right: 15px;

        width: 10px;

        height: 10px;

        border-right: 1px solid #000;

        border-bottom: 1px solid #000;

        transform: rotate(45deg);

        transition: all 0.2s;

    }

        /* 鼠标经过div ，里面的三角再旋转180deg （45+180=225）*/

    div:hover::after {

        transform: rotate(225deg);

    }

</style>

14.在animation帧动画中，如何实现让动画分步播放？

    animation-timing-function: steps(num)；

     /*num:代表动画执行的步数*/

15.在animation帧动画中，哪个属性必须单独写，不能与animation其他属性写在一起？

animation-play-state:  paused; 动画暂停

16.transform-style的作用及用法

    代码写给父级，但是影响的是子盒子，控制子元素是否开启三维立体环境。

    transform-style: flat 代表子元素不开启 3D 立体空间，默认的

    transform-style: preserve-3d 子元素开启立体空间

17.3D的特点

    1.近大远小

    2.物体和面遮挡不可见

18.TranslateZ与perspective的区别。【考核知识点：3D呈现】

perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小。

有多个子元素时，给各个子元素设置各自的translateZ 可以实现不同的3D效果。

19.简述左手法则沿X轴和Y轴旋转。【考核知识点：左手法则】

    X轴：左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的正方向。

    Y轴：左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的正方向。

20.简述三维坐标系。【考核知识点：三维坐标系】

    x轴：水平向右    注意：x右边是正值，左边是负值

    y轴：垂直向下    注意：y下面是正值，上面是负值

    z轴：垂直屏幕    注意：往外面是正值，往里面是负值

21. 分别写出浏览器私有前缀并标明浏览器名称。【考核知识点：私有前缀】

    -moz-:代表火狐浏览器私有属性

    -ms-:代表ie浏览器私有属性

    -webkit-:代表苹果、谷歌私有属性

    -o-:代表欧鹏私有属性

22.什么是视口【考核知识点：viewport】

在pc端中，视口指的是在pc端中浏览器的可视区域；

在移动端中，它涉及3个视口：1是布局视口，2是视觉视口，3是理想视口

移动端指的视口就是布局视口。

23.视口标签及属性及属性值？【考核知识点：视口】

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

24.关于背景的属性【考核知识点：背景】

    background-color       指定要使用的背景颜色

    background-image       指定要使用的一个或多个背景图像

    background-repeat      指定如何重复背景图像

    background-position 指定背景图像的位置

    background-size     指定背景图片的大小

    background-attachment   设置背景图像是否固定或者随着页面的其余部分滚动。

25.  传统盒子模型宽度计算。【考核知识点：CSS3盒模型】

    盒子的宽度=CSS中设置的width+border+padding

1. 决定CSS3盒模型的属性及属性值是？【考核知识点：CSS3盒模型】

    box-sizing： border-box；

1. 传统布局的特点。【考核知识点：布局概念】

    兼容性好、布局繁琐、局限性，不能再移动端很好的布局

1. 什么是flex布局？它有什么特点？【考核知识点：flex布局概念】

Flex 是弹性盒子的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

特点：

    操作方便，布局极其简单，移动端使用比较广泛。

    pc端浏览器支持情况比较差

    IE11或更低版本不支持flex或仅支持部分

1. 设置Flex布局后，哪些CSS样式失效。【考核知识点：flex属性】

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1. Flex父项常见属性。【考核知识点：flex属性】

    flex-direction：设置主轴的方向

    justify-content：设置主轴上的子元素排列方式

    flex-wrap：设置子元素是否换行

    align-content：设置侧轴上的子元素的排列方式（多行）

    align-items：设置侧轴上的子元素排列方式（单行）

    flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1. 哪个属性可以设置flex主轴上的对齐方式？

    justify-content：flex-start | flex-end | center | space-between | space-around；

1. 弹性盒的属性中有哪些属性可以用在父元素上？

display:flex;

flex-direction

justify-content

align-items

flex-wrap

1. 什么是rem。【考核知识点：rem】

rem 是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

1. 什么是媒体查询。【考核知识点：媒体查询】

    媒体查询是CSS3新语法。

    使用媒体查询，可以针对不同的媒体类型定义不同的样式。

    媒体可以针对不同的屏幕尺寸设置不同的样式。

    当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

    目前针对很多苹果手机、安卓手机，平板等设备都用得到多媒体查询。

1. 媒体查询语法规范。【考核知识点：媒体查询】

    @media mediatype and|not|only (media feature) {

        CSS-Code;

    }

1. 媒体查询中常用的关键字有哪些？分别代表什么意思？【考核知识点：媒体查询】

and：可以将多个媒体特性连接到一起，相当于“且”的意思

not：排除某个媒体类型，相当于“非”的意思，可以省略

only：指定某个特定的媒体类型，可以省略

1. Sass 变量可以存储以下信息。【考核知识点：sass变量】

    字符串、数字、颜色值、布尔值、列表、null值

1. Sass嵌套的规则是什么。【考核知识点：sass嵌套】

    选择器嵌套、属性嵌套、伪类嵌套、群组选择器嵌套

1. rgba()和opacity的透明效果有什么区别?

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或起背景色

设置rgba透明的元素的子元素不会继承透明效果

1. 怎么让Chrome支持小于12px 的文字？【考核知识点：兼容性】

p {

    font-size: 6px;

    -webkit-transform: scale(.5);

}