html+css基础-3-flex，浏览器内核，HTML5新特性

一，flex

1，概念
flex布局最核心的两个概念就是容器和轴，容器包括父容器和子容器，轴包括主轴和副轴。
设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用
在这里插入图片描述
2，应用场景
1），单行左右布局
父容器设置为flex，子容器的div不再独占行，div1设置flex：1 占据div2剩下所有空间；

2），圣杯布局

3）.等分场景：
父级设置flex后，子级flex：1

二，常见的浏览器内核

1，浏览器
IE浏览器。
火狐（Firefox）浏览器。
谷歌（Chrome）浏览器。
Safari浏览器。
Opera浏览器。
2，内核
Trident: ie/360/搜狗
Geoko: 火狐
Presto: opera
Webkit: 谷歌,safari
3,常见浏览器的兼容
1-解决浏览器内外边距不一致
在这里插入图片描述
2-块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

　问题症状:常见症状是IE6中后面的一块被顶到下一行
　　碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
　　解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3-设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
　　碰到频率：60%
　　解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

三，HTML5新特性及兼容性解决

1，新特性
添加了canvas-----画图
新增语义化标签
在这里插入图片描述

本地存储
sessionStorage为临时保存，localStorage为永久保存
表单控件
在这里插入图片描述
多媒体相关API
新增了video和audio元素，video元素专门用来播放网络上的视频或电影，audio元素专门用来播放网络上的音频数据。
html5新特性的兼容性解决

ie低版本浏览器是不支持6,7,8 1,支持document.createElement()但是默认样式得自己写 2,html5shiv的使用

移除的元素：

纯表现的元素u、big、center、strike、tt、font、basefont
框架集frame、frameset、noframes

四，关闭ios键盘首字母大写

autocapitalize=‘off’

五，超出文本显示省略号

/*显示省略号*/
.ellipsis{
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}