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;
}
html+css基础-3-flex,浏览器内核,HTML5新特性相关推荐
- [css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀 完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
- HTML基础(一)--HTML5新特性和语义化
一.语义化概念 HTML5的语义化指的是合理正确的使用语义化标签来创建页面标签,正确的标签做正确的事,有利于SEO 二.语义化标签 header .nav.main(文档的主体).arcticle.s ...
- HTML5新特性归纳和同类比较
第一章 HTML5定义 什么是 HTML5? HTML5 是下一代HTML标准. HTML , HTML 4.01的上一个版本诞生于1999年.自从那以后,Web世界已经经历了巨变. HTML5 仍处 ...
- js考试题 html5新特性,Web前端初级面试题总结
Web前端初级面试题总结 发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核 ...
- html5新特性有哪些?
一省:HTML 1. html5新特性有哪些? 新增语义化标签:header.nav.aside.article.section.footer 拖放属性:drag/drop.拖放是一种常见的特性,即抓 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单 表单2 ...
- 关于html5支持与否的判断(JS检测是否支持HTML5新特性)
未来使用H5的场景会越来越多,这是令 web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE1 ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- 【HTML5新特性】
HTML5新特性 一.语义标签 二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性 三.音频和视频 四.canvas 五.SVG 六.地理位置 七.拖放API 八.web Wor ...
最新文章
- Oracle学习笔记十三 触发器
- 用30行代码做一个微信智障机器人
- 锐捷路由器--多线路应用路由
- Mac+docker+flask
- java代码的运行顺序_java中的代码块执行顺序
- android studio 加载ffmpeg.so,Android studio使用已经编译好的ffmpeg .so库
- linux 设置gbk编码格式,设置ubuntu支持gbk编码格式和设置eclipse 编码格式
- leetcode刷题 15.三数之和
- uva 11992 Fast Matrix Operations
- java应用挂死故障排查
- Visual Studio-查看汇编代码
- java堆外内存6_Java 堆外内存的使用
- 判断某点在多边形内——方法一
- C++ 编译器生成默认构造函数的四种情况
- 动态生成WebService的客户端
- ssr使用mysql数据库_MySQL数据库安装与配置详解
- 架构师手册——图形化表达
- 编译icedTea-web报错填坑之旅
- 守护神 Supervisor
- 袁萌浅谈C919大飞机(二)
热门文章
- 如何在B站读一个深度学习的研究生?
- springMVC自定义类型转换器(字符串String转日期Date)
- Spring中为什么实体类不用注入
- hihoCoder 1369 网络流一·Ford-Fulkerson算法 (网络流学习#1 记录)
- UIScrollView 遇到的小坑
- Flex走出低谷的关键: 打破Flex固有的定义
- Windows Phone开发(12):认识一下独具个性的磁贴
- c# webform js文件获取客户端控件,后台cs获取前台客户端控件的值,c#和js的交互...
- Java集合Collection之遍历方法总结(List、Map、Set)
- Spring源码之bean的销毁registerDisposableBeanIfNecessary方法解读