h5c3高频面试问题总结

一、H5C3和Html，css相比有什么变化

H5新增元素：	header、footer、section、aside、nav、article、button、progress(进度条标签)、
H5的新增表单属性：	placeholder(input输入框的提示信息)、 autofocus(input页面加载后自动获取焦点)、 required(输入框的值不能为空，表单提交时判断)、 maxlength(最大长度)、minlength(最小长度)、 novalidate(不验证表单)、autocomplete(设置是否自动完成)
H5新增的表单输入框类型:	email(提交时验证是否有@符号)、 url(提交时验证是否含有http://或者https://)、 number (只能输入数字)、 search(右侧有×号，点击清空内容)、 range(显示滚动条范围)、 color(显示拾色器)、time(显示小时和分钟时间)、 data(显示年月日)、month(显示年月)
audio(音频)	Controls:音频控件 Loop:循环播放 Muted:静音
video(视频)	Controls:视频控件 Loop:循环播放 Muted:静音 Height：高度 Width：宽度

CSS3新增选择器：

属性选择器

选择所有带有x属性元素	[属性名]
选择所有带有x属性=y属性的元素	[x=”y”]
选择所有带有x属性=y-开头属性的元素	[x|=”y”]
选择所有带有x属性=y属性值开头的元素	[x^=”y”]
选择所有带有x属性=y属性值结尾的元素	[x$=”y”]
选择所有带有x属性=包含y属性值子字符的元素	[x*=”y”]

伪类选择器

:first-child	获取指定选择器的第一个元素
:last-child	获取指定选择器的最后一个元素
:nth-child(n)	获取指定选择器的第n个元素（所有子元素的顺序）
:nth-last-child	获取指定选择器的第n个元素（从最后一个开始计数）
:nth-of-type(n)	获取指定选择器的第n个元素（所有指定选择器的顺序）
:nth-last-of-type(n)	获取指定选择器的第n个元素（从最后一个开始计数）

伪元素选择器

::first-letter	选中文本内容的第一个汉字或者字母
::first-line	选中文本内容的第一行
::before	在当前元素的内部的前边添加
::after	在当前元素的内部的后边添加

CSS3新增

CSS3颜色：	新增RGBA，HSLA模式
CSS3阴影：	box-shadow(盒子阴影)，text-shadow(文本阴影)
CSS3圆角边框：	border-radius
CSS3盒子模型：	box-sizing
CSS3背景：	background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域
CSS3渐变：	linear-gradient(线性渐变)、radial-gradient(径向渐变)
CSS3过渡：	transition-property (css属性) transition-duration(过渡的周期) transition-timing-function(过渡的时间速度曲线)：ease(默认的)、linear(匀速的) transition-delay(过渡的延迟)
CSS3自定义动画：	animation-name动画的名称 animation-duration动画的周期                       animation-timing-function动画的时间速度曲线 animation-delay动画的延迟  animation-iteration-count动画的次数（infinite无限）     animation-paly-state:paused动画的暂停 动画的开始：@keyframes动画的名称                             开始From{}                             结束to{}
CSS3-2D转换：	transform：translate(x，y)平移 rotate(x，y)旋转 skew(x，y)扭曲 scale(x，y)缩放拉伸
CSS3-3D转换：	transform-style：preserve-3d；

二、标签元素分类，和特点

块状元素：

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）四个方向的内外边距都是可以设置的

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

（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；

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

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。

五、常见的盒子模型有哪些，有什么区别

"box-sizing：content-box；（普通盒模型、默认）	标准盒模型：设置的宽度就等于内容的宽度
box-sizing：border-box；（怪异盒模型、IE盒模型）	怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度"

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

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

有什么用: 块级元素相邻

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

问题：添加浮动后的子元素撑不开父元素的高度

清除浮动：

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

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

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

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

七、伪类有哪些，作用和书写顺序

：link	未访问时的表现
：visited	访问过后的表现
：hover	鼠标移入的表现
：active	鼠标单机的表现

八、如何去掉相邻两个图片中间的白边

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

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

九、如何实现文字垂直水平居中，盒子垂直水平居中

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

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

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

盒子水平居中:  margin：auto；

十、单行文本溢出显示省略号，多行文本溢出显示省略号

单行：white-space:nowrap;

           overflow:hidden;

           text-overflow:ellipsis;

多行：height:auto;

          -webkit-line-clamp:3;

          display:-webkit-box;

          -webkit-box-orient:vertical;

          Overflow:hidden;