css基础动画以及小知识点的汇总

1. HTML5的新特性？

1.语法更简单

2.标签的语义化

3.语法更宽松

4.多设备跨平台

5.自适应网页设计

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

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

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

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

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

侧边栏：<aside></aside>

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

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

    email    邮箱

url      网址

date  日期

time  时间

month  月

week  周

number  数字

tel     手机号码

search 搜索框

color 颜色

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

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

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

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

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

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

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

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

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

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

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

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元素

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

transform:移动       旋转  缩放;

transform:translate  rotate  scale;

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

animation-name： 动画名称

animation-duration： 动画持续时间

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

animation-delay： 动画延迟

animation-iteration-count： 动画循环

animation-direction： 动画是否反向

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

animation-play-state：动画暂停

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

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

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

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

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

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

ease-in 动画以低速开始。

ease-out 动画以低速结束。

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

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

div {

   width: 200px;

    height: 200px;

   margin: 200px;

    transform: rotate(45deg);

    border-top: 1px solid #f00;

border-left: 1px solid #f00;

}

1. 设置一个盒子上下左右都居中。【考核知识点：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>

1. 怎么实现旋转的三角形【考核知识点：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>

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

animation-timing-function: steps(num)；

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

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

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

1. transform-style的作用及用法

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

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

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

1. 3D的特点

1.近大远小

2.物体和面遮挡不可见

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 传统盒子模型宽度计算。【考核知识点：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);

}