H5C3常用知识点

1.H5C3和Html，css相比有什么变化

H5：

(1) H5新增的常用标签：

头部：<header></header>; 区间：<section></section>; 底部：<footer></footer>;

侧导航：<aside></aside>; 导航标签：<nav></nav>; 文章标签：<article></article>;

按钮：<button></button>; 进度条标签：<progress></progress>（最大进度值max， 实际进度值value）;

(2) H5新增的表单属性：

fieldset: 给表单分组，可以在表单外侧绘制边框;

Legend: 在边框左上角显示文本内容;

Placeholder: 输入框的提示信息；

Autofocus：当页面刷新后自动获取焦点（不用加属性值）；

Required：输入框的值不能为空，在表单提交时判断；

Maxlength：最大长度；

Minlength：最小长度；

Novalidata：不验证表单（用于form，不用加属性值）；

Autocomplete：设置是否自动完成（用于form，输入框里填过的信息是否显示）， on:自动完成/off:关闭自动完成；

(3) H5新增的表单输入框类型（type）：

Email：提交时验证是否含有@符号，且@后有文本；

Url：提交时验证是否含有http://或https://；

Number：输入框内只能输入数字；

Search：搜索框，在输入框的右侧有X号，单击X号，输入框里的内容清空；

Range：显示滚动条范围；

Color：显示拾色器，可以选择颜色；

Time：显示小时和分钟；

Date：显示年月日；

Month：显示月份；

(4) 音频和视频：

音频：audio；

音频控件：controls；循环播放：loop；静音：muted；

<audio src=’’ controls loop muted></audio>

视频：video；

视频控件：controls；循环播放：loop；静音：muted；

<video src=’’ controls loop muted></video>

C3：

(1) CSS3属性选择器：属性选择器，伪类选择器，伪元素选择器；

属性选择器：[x]：选择所有带有x属性元素;

[x=’y’]：选择所有带有x属性=y属性值的元素;

[x|=’y’]：选择所有带有x属性=y-开头属性值的元素;

[x^=’y’]：选择所有带有x属性=y开头属性值的元素;

[x$=’y’]：选择所有带有x属性=y结尾属性值的元素;

[x*=’y’]：选择所有带有x属性=包含y属性值子字符的元素;

伪类选择器： :first-clild（获取指定选择器的第一个元素）；

:last-clild（获取指定选择器的最后一个元素）；

:nth-clild(n)（获取指定选择器的第n个元素）；

:nth-last-clild(n)（从最后一个开始计数）；

:nth-of-type(n)（获取指定选择器的第n个元素）；

:nth-last-of-type(n)（从后往前数）；

伪类选择器： ::first-letter（选中文本内容的第一个汉字/字母）；

::first-line（选中文本的第一行）；

::before（在当前元素的内部的前边添加）；

::after（在当前元素的内部的后边添加）；

(2) CSS3颜色：hsl（；；）

H：hue（色相，色轮）0--360：0/360红色；120绿色；240蓝色；

S：saturation（饱和度）百分比值：0%灰色；100%全彩；

L：lightness（亮度）百分比值：0%黑色；100%白色；

Hsla：a:透明度

(3) 阴影：盒子阴影：box-shadow  文本阴影：text-shadow；

属性值分别为：水平阴影，垂直阴影，阴影的模糊距离，阴影颜色；

水平向右，竖直向下为正；水平向左，竖直向上为负；

(4) 渐变：

线性渐变：从上到下（默认），从下到上，从左到右，从右到左，对角，角度

background-image:linear-gradient(red,blue) 默认从上到下;

background-image:linear-gradient(to top,red,blue) 从下到上;

background-image:linear-gradient(to right top,red,blue) 从左下角到右上角;

按照角度：（-135，-90，-45，0，45，90，135，180）单位deg（度数）

background-image:linear-gradient(0deg,blue,green) 从下到上;

background-image:linear-gradient(-90deg,blue,green) 从右到左;

径向渐变：从中心向四周发射，默认是椭圆（ellipse）；圆（circle）

background-image:radial-gradient(blue,green)；

background-image:radial-gradient(circle,blue,green)；

(5) 转换：transform：对元素进行旋转，平移，缩放拉伸，扭曲

缩放拉伸：比例scale(x,y)；宽度变化scaleX(x)；高度变化scaleY(y)；

例如：transform:scale(2,1)

扭曲：skew(x,y)；skewX(x)；skewY(y)

例如：transform:skew(30deg，0)

平移：translate(x,y)；translateX(x)；translateY(y)；translateZ(z):沿着z轴，正 是 前,负是后；例如：transform:translate(100px,100px)

给父元素添加两个属性，让子元素拥有三维立体感：

perspective：1000px(越小越远)；transform-style：perserve-3d；

旋转：rotate()；rotate(30deg) 顺时针旋转（正）；rotate(-30deg) 逆时针旋转（负）；

默认旋转轴心是盒子正中心；

设置旋转轴心：transform-origin：right top;

沿x轴旋转：rotateX(30deg),从左往右看，正是逆,负是顺；默认是盒子正中线

沿y轴旋转：rotateY(30deg),从上往下看，正是逆,负是顺；默认是盒子正中线

(6) 过渡：transition，元素从一种样式逐渐改变为另一种的效果

过渡的css属性：transition-property；

过渡周期；transition-duration；

过渡的时间速度曲线：transition-timing-function:ease（默认慢快慢）/linear（匀速）；

过渡延迟：transition-delay；

综合设置：transition：css属性，周期，速度曲线，延迟；

transform：none（清除所有）

(7) 动画：animation

动画属性：

动画名称：animation-name；

动画周期：animation-duration；

动画的时间速度曲线：animation-timing-function:ease（默认慢快慢）/linear（匀速）；

动画延迟：animation-delay；

动画次数：animation-iteration-count；

动画暂停：animation-play-state：paused；

动画开始：

@keyframes 动画的名称{}

2个时间节点：开始 from{}  结束to{}

多个时间节点：0%{} 25%{} 50%{} 100%{}

(8) 圆角边框：border-radius

矩形高度的一半：操场形；

border-radius：50% 椭圆形；

border-radius：50% / 1/2width 圆形

(9) 三角形：

Width：0px；

Height：0px；

border-top：100px solid red;

border-bottom：100px solid blue;

border-left：100px solid green;

border-right：100px solid yellow;

border-bottom：100px solid transparent(透明的);

border-left：100px solid transparent(透明的);

border-right：100px solid transparent(透明的);

(10) 怪异盒模型：

box-sizing:border-box 去掉内边距与边框所带来的尺寸影响；

box-sizing:content-box（默认）

(11) CSS3背景：

背景色剪切：

background-clip：border-box（默认）/padding-box（不占边框）/content-box （不占边框和内边距）

背景图剪切：

background-orign：border-box /padding-box（默认）/content-box

2.标签元素分类，和特点

标签分类：

(1) 根据位置：例如开始标签<p>,结束标签</p>;

(2) 根据结构：

嵌套关系：父子关系，如html --> head，子标签相对于父标签缩进一个tab键位；

并列关系：即兄弟关系，如head -- body,格式对齐;

(3) 根据个数：

双标签：有开始也有结束，如<p></p>;

单标签：只有开始或只有结束，如image;

标签的显示模式：

块状元素：

hn/p/div/ul/ol/dl/li/dd/dt/table/thead/tbody/caption/tr/form/header/footer/section/nav/article/aside

特点：（1）有默认的宽高，宽是父元素的100%，高是内容撑起来的实际高度（table除外，p标签不能包含块状元素）

         （2）宽高可以设置

         （3）可以包含任意元素

         （4）独占一行

         （5）四个方向的内外边距都是可以设置的

行内元素：

Span/a/b/strong/i/em/u/ins/s/del

特点：（1）有默认的宽高，都是内容所撑起来的 

         （2）设置宽高无效

         （3）一般只能包含行内元素和文本内容

         （4）相邻的行内元素在同一行上显示

         （5）水平方向的外边距可以设置，垂直方向设置无效。内边距四个方向都可以设置

行内块元素：

Img/audio/video/input/button/labe;/select/option/textarea

特点：（1）有默认的宽高，由本身特点所决定

         （2）宽高可以设置

         （3）一般不包含其他元素

         （4）相邻的行内块元素在同一行显示

         （5）四个方向的内外边距都是可以设置的

3.圣杯布局（双飞翼布局）有哪几种实现方式

(1) calc ：中间盒子宽度设置为width：calc(100%-两边宽度之和),左中右三个盒子都 设置为float：left；

(2) 浮动：左右两个盒子分别设置为float：left/float：right，中间盒子设置左右内边 距padding；

(3) 定位position：左右两个盒子设置为position：absolute；top：0；left：0/right:0; 中间盒子设置左右内边距padding；

(4) 弹性布局扩张因子：左右两个盒子设置固定宽度；body设置display：flex；中间 盒子设置flex-grow：1；

4.弹性盒模型有哪些属性和属性值，什么效果

容器：

display:flex	表明当前的容器时弹性父容器
flex-directionsh 设置项目排列方向（主轴）	Row默认值从左向右 Row-reverse从右向左 Column从上到下 Column-reverse从下向上
justify-content设置项目在主轴方向上的对齐方式	flex-start（默认值）：左对齐； flex-end：右对齐； center： 居中； space-between：两端对齐，项目之间的间隔都相等； space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
align-items设置项目在交叉轴方向上对齐方式	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。
flex-warp设置超出容器的项目是否换行	nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度; wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中; wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中;
align-content设置项目换行的对齐方式	flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

项目

Item项目的属性	order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
align-self	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

5.常见的盒子模型有哪些，有什么区别

普通盒模型：box-sizing：content-box（默认），设置的宽度就等于内容的宽度；

怪异盒模型：box-sizing：border-box；内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

6.写一个网易云播放动画，图片旋转+撞针来回拨动

<style>
 .rotate360 {
   animation: rotate360 20s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-fill-mode: forwards;
   animation-play-state: paused;
 }
 
 @keyframes rotate360 {
   from {
     rotate: 0deg;
   }
   to {
     rotate: 360deg;
   }
 }
</style>

<style>
 .needleGo {
   animation: needleGo 0.7s;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
   animation-iteration-count: 1;
 }
 .needleBack {
   animation: needleBack 0.7s;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
   animation-iteration-count: 1;
 }
 @keyframes needleGo {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(-16deg);
   }
 }
 @keyframes needleBack {
   from {
     transform: rotate(-16deg);
   }
   to {
     transform: rotate(0deg);
   }
 }
</style>

 

7.说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）

浮动：元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片的效果

有什么用: 块级元素相邻

怎么用：float：left左浮动right右浮动

问题：添加浮动后的子元素撑不开父元素的高度（因为浮动不占位置）

清除浮动：

（1）额外标签法：给子元素添加额外的兄弟元素（不规范。不够语义化）

（2）为父级元素添加overflow：hidden；（局限于浮动类）

（3）伪元素清除浮动（推荐）

（4）双伪元素清除浮动、 .clearfix {* zoom：1；}

8.伪类有哪些，作用和书写顺序

:link     未访问时的表现

:visited   访问过后的表现

:hover    鼠标移入的表现

:active    鼠标单机的表现

9.如何去掉相邻两个图片中间的白边

(1)转为块级元素再浮动

(2)为父元素添加font-size：0；

10.如何实现文字垂直水平居中，盒子垂直水平居中

文字垂直居中：设置line-height的值和为div盒子的height值

文字水平居中：text-algin:center;

盒子垂直居中: 通过弹性布局改变主轴方向以及设置justify-content：center；

盒子水平居中:  margin：auto；

11.单行文本溢出显示省略号，多行文本溢出显示省略号

单行：white-space:nowrap;

      overflow:hidden;

      text-overflow:ellipsis;

多行：height:auto;

      -webkit-line-clamp:3;

      display:-webkit-box;

      -webkit-box-orient:vertical;

        overflow:hidden;