H5C3常见知识点总结

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

H5新增特性：
（1）语义化标签：如header、nav、footer、aside、article、section等。
（2）音频（audio）、视频（video）
（3）表单属性：placeholder、autofocus、required、maxlenght、minlength、novaildate、autocomplete
（4）输入框类型：email、url、number、search、range、color、time、date、month
C3新特性：
（1）选择器：属性选择器、伪类选择器、伪元素选择器
（2）颜色：rgba、hsla表示方式
（3）阴影：盒子阴影（box-shadow）文字阴影（text-shadow）
（4）边框：圆角border-radius
（5）怪异盒子模型：box-sizing
（5）背景剪切：背景色剪切：background-clip背景图剪切：background-origin
（6）渐变：线性渐变：linear-gradient 径向渐变：radial-gradient
（7）转换：transfrom 缩放拉伸scale 扭曲skew 平移translate旋转rotate
（8）过渡：transition可以实现动画
（9）动画animate

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

行内元素
常见的有<a><span><b><i><strong>
1)宽度和高度由其内容自动填充，不可设置宽高
2)相邻的行内元素或行内块元素在同一行显示
3)只可容纳行内元素与内容
4)水平方向上的内外边距可以设置，垂直方向无效
块状元素
<div><p><h1-h6><ul><li><footer><section><nav>
1)有默认的宽高,宽是父元素的100%,高是内容撑起来的
2)宽高和内外边距的四个方向都可以设置
3)独占一行
4)可以容纳任何元素(h1,p元素不能容纳块状元素)
行内块元素
<img><input><option><video><audio><button>
1)有默认的宽高,是元素本身的宽高
2)宽高和内外边距的四个方向都可以设置
3)相邻的行内元素或行内块元素在同一行显示
4)一般不容纳其他元素
转换：display属性
block；(转为块级元素)
inline； (转为行级元素)
inline-block；（转为行级块元素）

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

1、浮动
左右都左浮动,中间盒子宽度为calc(100%-左右盒子宽度)。
左右盒子一个左浮动一个右浮动，中间盒子加对应的的左右内边距
2、定位
左右盒子绝对定位absolute，中间盒子加对应的的左右内边距
3、弹性盒子
左右盒子宽度固定，中间盒子加上弹性因子flex-grow:1;

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

容器
（1）flex-direction设置坐标轴，来设置项目的排列方向
row 主轴横向,项目从左到右排列
row-reverse 主轴横向,项目从右到左排列,从后往前排，最后一项在最前面
column 主轴纵向,项目从上到下排列,
column-reverse 主轴纵向,项目从下到上排列
（2）justify-content 设置项目在主轴方向上的对齐方式,以及分配项目之间及其周围多余 的空间
flex-start 项目对齐主轴起点,项目间不留空隙
center 项目在主轴居中排列,不留空隙,主轴上第一个项目离主轴起点距离等于最后一个项目距离主轴终点位置
flex-end 项目对齐主轴终点，项目之间不留空隙
space-between 项目间间距相等,第一个项目距离主轴起点,和最后一个项目距离主轴终点距离为0
space-around 项目间间距相等，第一个项目离主轴起点和最后一个项目离终点距离为中间项目间距的一半
space-evenly 项目间间距,第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距
（3）align-items 设置项目在交叉轴中的对齐方式
stretch 项目拉伸至填满行高,如果项目没有高度,会拉伸至容器一样高
flex-start 项目沿着交叉轴开始的位置对齐
center 项目在交叉轴中居中对齐
flex-end 项目沿着交叉轴终点的位置对齐
baseline 项目的基线对齐
（4）align-content 多行排列时,设置行在交叉轴方向上的对齐方式,以及分配行之间及其周围多余的空间
stretch 未设置项目尺寸时,将各行中的项目拉伸至填满交叉轴,设置了项目尺寸时,尺寸不变,项目拉伸至填满交叉轴
flex-start 首行在交叉轴起点开始排列,行间不留间距
center 行在交叉轴中排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等
flex-end 尾行在交叉轴终点开始排列,行间不留间距
space-between 行与行间距相等,首行距离交叉轴起点和尾行距离交叉轴终点距离为0
space-around 行与行间距相等,首行距离交叉轴起点和尾行距离交叉轴终点距离为行与行间间距的一半
space-evenly 行间间距,首行距离交叉轴起点和尾行距离交叉轴终点距离相等
（5）flex-wrap 设置是否允许项目多行排列,以及多行排列时换行的方向
nowrap 不换行,如果单行内容过多时,则溢出容器
wrap 容器单行容不下所有项目时换行换列
wrap-reverse 容器单行容不下所有项目时，换行方向为wrap时的反方向
项目
（1）order 设置项目沿着主轴方向上的排列顺序,数值越小排列越靠前属性为整数,默认为0
（2）flex-shrink 当项目在主轴方向上溢出时,设置项目收缩因子来压缩项目适应容器
（3）flex-grow 当项目在主轴还有剩余空间时,设置项目扩张因子来进行剩余空间的分配
（4）flex-basis auto
（5）flex flex-grow,flex-shrink,flex-basis,的简写,none等价于0,0,auto，auto等价于1,1auto
（6）align-self 设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器中的align-items
属性值：auto flex-start flex-end center baseline stretch

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

标准盒模型：设置的宽度就等于内容的宽度
box-sizing：content-box；（普通盒模型、默认）
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
box-sizing：border-box；（怪异盒模型、IE盒模型）
去掉内边距和边框带来的尺寸影响

六、说一下对浮动的理解

浮动：元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片
的效果
作用：块级元素相邻
用法：float：left左浮动right右浮动
问题：添加浮动后的子元素撑不开父元素的高度
清除浮动：
（1）额外标签法：给子元素添加额外的兄弟元素（不规范。不够语义化）
（2）为父级元素添加overflow：hidden；（局限于浮动类）
（3）伪元素清除浮动（推荐）
（4）双伪元素清除浮动、.clearfix{*zoom：1；}

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

伪类：:link,:visited,:hover,:active
作用：
: link: a标签还未被访问的状态；
:visited: a标签已被访问过的状态；
:hover: 鼠标悬停在a标签上的状态；
:active: a标签被鼠标按着时的状态；
书写顺序：a:link,a:visited,a:hover,a:active

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

1)修改父元素字体大小,font-size:0;
2)给img添加display:block;转化为块级元素，再浮动

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

文本：
水平居中：text-algin：center 垂直居中 line-height:父盒子高度
盒子：
水平居中：给固定宽度margin:auto;
水平垂直居中display:flex;justify-content:center;align-items:center;

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

单行显示省略号：
white-spacing：nowrap；
overflow：hidden;
text-overflow：ellipsis；
多行文本溢出显示省略号:
display:-webkit-box;
-webkit-line-climp：n； //行数
-webkit-box-orient：vertical；
overflow：hidden；
text-overflow：ellipsis；