语音合成定制化成趋势,科大讯飞、微软、谷歌哪家强?

语音合成定制化成趋势,科大讯飞、微软、谷歌哪家强?

新闻, 行业新闻

2012年,全球最大语音技术厂商Nuance曾占据62%的全球语音市场。随后,开源语音工具导致语音产业的技术门槛降低,场景为王时代到来,错失机遇的Nuance在智能语音市场步步失守,2015年市场份额已下降到31.6%,被谷歌、苹果、微软、科大讯飞等企业迅速瓜分。

智能语音2.0时代,场景的重要性不言而喻。谁能赋予声音更多的表现力和个性化,谁就能将技术适配到非标准化的广阔场景中,赢得智能语音市场的未来。科技巨头看到这一趋势,纷纷祭出语音合成“定制化”的大旗。语音合成技术正式进入定制化的2.0时代。

语音合成定制化哪家强

微软是智能语音行业的领先企业之一。今年5月份的Build 2018 大会上,其在公有云平台上推出了语音合成定制服务产品Custom Voice。将语音和对应文本(500句)上传,Custom Voice即可对声音进行模拟,并在线测试模拟效果。CustomVoice采用全程可视化操作界面,普通用户可快速上手,显示出微软打造定制化、平民化产品的用意。

微软推出的语音合成定制服务Custom Voice来源:微软CustomVoice页面

无独有偶,近期谷歌人工智能实验室成立的Lyrebird(琴鸟)公司,也推出了自己的定制语音合成系统。同微软的CustomVoice类似,30句英文声音录入后,系统就能在“倾听”中“掌握”每个人说话时字母、音位和单词的发音特点,通过推理并模仿声音中的情感、语调,“说”出全新语句。目前Lyrebird还存在一些缺陷,如合成语音夹杂电流声,中文语句的录入与合成表现都不理想等。

谷歌lyrebird(琴鸟)语音合成系统页面 来源:谷歌琴鸟系统页面

在国内,唯一能与微软、谷歌同台竞技的就是科大讯飞。去年2017年11月,科大讯飞推出名为“讯飞留声”的测试版本,比微软的CustomVoice还要早半年时间。经过不断优化,讯飞留声制作完整音库只需10句话声音录入,远低于微软采集的500句,亦低于谷歌的30句,采集量只有行业平均的百分之一,合成效果更好。

讯飞留声PK谷歌的同类产品

“讯飞留声”还以微信小程序(微信搜索“讯飞留声Lite”小程序)的形式呈现,可以实现“即用即走”。不仅声音制作过程更加便捷,用户还能在微信这款中国最大的社交软件上分享制作效果,吸引了大批用户的关注。阿拉丁统计数据显示,小程序上线1个月(截至2018年8月8日),讯飞留声访问次数超过51万 ,新用户增长率达到568%,位居阿拉丁“成长最快小程序”周榜第13名。

技术实力成比拼关键

科大讯飞语音合成定制业务的快速发展,离不开其雄厚的技术实力支持。2000年之前,中文语音产业由国际IT巨头控制,如微软、IBM等。如今,科大讯飞已彻底扭转中文语音市场几乎全部掌握在国外公司手中的格局,成为亚太地区最大语音和人工智能上市公司。

科大讯飞不仅中文语音合成效果出色,在国际英文语音合成大赛上也是屡屡得冠。2006年,科大讯飞首次参加国际英文语音合成大赛(Blizzard Challenge),即获得自然度第一的优异成绩,至2018年已连续13年蝉联该项赛事冠军,成为该项赛事中唯一一家自然度超过4分(普通人说话水平)的参赛方。

在2018国际语音合成大赛的比赛中,科大讯飞摘得10个测评打分项目中的9项第一,成为“最全能的冠军”

语音合成可以用指定情感表达,但一段文本应该表现出怎样的情感变化,涉及到语义理解和上下文分析。科大讯飞除智能语音技术全球领先外,在自然语言理解上同样属业界翘楚。随着语义和语音的融合交叉发展,科大讯飞或将率先解决语音合成情感表达难题,将语音合成技术发展推向新的阶段。

领先的核心技术、丰富的反馈数据以及广阔的应用场景,三者共同搭建起语音合成的行业壁垒。科大讯飞在语音合成技术上拥有绝对优势,在商业落地层面同样表现突出,打造出导航类APP中大量明星播报音库、央视虚拟主持人解决方案等经典案例。讯飞留声的推出,更是开创了为普通用户免费提供定制化服务的先河。先发优势及强技术后盾加持下,科大讯飞为语音合成定制化的商业落地,落下了关键一子。

齐心集团与京东战略合作落地 力争通过京东自营渠道实现20亿销售

齐心集团与京东战略合作落地 力争通过京东自营渠道实现20亿销售

新闻, 行业新闻

今年6月底,齐心集团与国内电商巨头京东签署了《2018-2020深度战略合作意向书》,其中一个重要内容是齐心集团将在2018-2020年期间,与5000家京东便利店和500家京东之家实现合作,与京东合作改造现有齐心线下零售店,转变为无界智慧办公零售店约300家,齐心京东合作联名京东之家不少于5家。

在齐心3.0终端陈列指引手册的标准下,京东之家延续了齐心商品展示的一贯特色,按照办公场景体验、产品特色对产品陈列进行规划和设计,打造出了“ 产品方案体验式”的购物新模式。

京东之家

除传统办公用品外,齐心和京东合作的线下门店还引入了包括指纹锁笔记本套装等在内的齐心自主开发的多款创新产品。据了解,齐心集团已经推出一系列智慧办公明星产品,如:齐心智能云端考勤机、齐心指纹锁笔记本套装、齐心指纹保险箱等,科技化产品更能满足大办公行业消费升级大趋势产品的需求。

分析认为,随着齐心产品入驻的京东门店越来越多,与京东的战略合作预计将会给齐心集团带来明显的业绩增量。齐心集团预测,通过与京东的深度合作,预计每年将带来公司自有品牌业务25%-40%的销售增量,未来五年,公司将通过京东自营渠道力争实现20亿的销售收入。

 

【股讯】科技股全线下挫FB跌近7% 瑞思教育逆市大涨15%

【股讯】科技股全线下挫FB跌近7% 瑞思教育逆市大涨15%

行业新闻

腾讯科技讯 3月20日,美股周一低开低走,道指收盘大跌逾300点,纳指跌近2%。Facebook股价重挫近7%,该公司承认将5000万用户信息泄露给第三方。中国概念股中,瑞思教育涨14.92%,猎豹移动涨8.11%,乐信涨5.31%;另一方面,迅雷跌5.79%,蓝汛跌4.44%。美国科技股全线下挫,五大科技巨头的股价跌幅均至少达到了1%。

道琼斯工业平均指数下跌335.60点,报收于24610.91点,跌幅为1.35%;标普500指数下跌39.09点,报收于2712.92点,服务1.42%;纳斯达克综合指数下跌137.74点,报收于7344.24点,跌幅为1.84%。

所谓“FAANG”——Facebook、苹果、亚马逊、流媒体视频服务提供商Netflix和谷歌母公司Alphabet——的五大科技巨头齐齐下挫,且跌幅均至少达到了1%以上,其中Facebook大跌6.77%,Alphabet跌3.03%,亚马逊跌1.70%,Netflix跌1.56%,苹果跌1.53%。

【中国概念股】

中国概念股涨跌不一,其中涨幅较大的公司包括:瑞思教育(涨14.92%)、猎豹移动(涨8.11%)、乐信(涨5.31%)、航美传媒(涨3.70%)、和信贷(涨2.76%)、世纪互联(涨2.68%)、研控科技(涨2.42%)、新东方(涨2.39%)、盛世乐居(涨2.23%)、正保远程教育(涨2.04%)、好未来(涨1.70%)、兰亭集势(涨1.67%)、途牛(涨1.47%)、易车(涨1.39%)和华米科技(涨1.29%)。

另一方面,跌幅较大的公司则包括:迅雷(跌5.79%)、蓝汛(跌4.44%)、58同城(跌3.96%)、百度(跌3.64%)、红黄蓝(跌3.21%)、搜狐(跌3.18%)、阿里巴巴(跌2.87%)、网易(跌2.75%)、网秦(跌2.65%)、聚美优品(跌2.28%)、搜狗(跌2.14%)、趣店(跌2.07%)、融360(跌2.05%)、京东(跌1.82)、宜人贷(跌1.60%)、中芯国际(跌1.59%)、金融界(跌1.57%)、500彩票网(跌1.55%)、中网载线(跌1.24%)、宝尊电商(跌1.17%)、携程网(跌1.16%)和一嗨租车(跌1.03%)。

猎豹移动(NYSE:CMCM)周一盘前发布了截至2017年12月31日的第四季度财报及2017全年财报。财报显示,猎豹移动第四季度总收入环比增长16.2%至13.88亿元,移动收入同比增长17.8%至12.18亿元,创历史新高,Non-GAAP经营利润同比增长93.7%至2.25亿元,Non-GAAP季度归属股东净利润由去年同期的1.13亿元增长至10.50亿元。2017年总收入为49.75亿元,Non-GAAP经营利润同比增长77.1%至5.20亿元,Non-GAAP归属股东净利润同比增长530.0%至14.22亿元。

阿里巴巴集团(NYSE:BABA)宣布,将向Lazada集团增加20亿美元的投资,旨在加速Lazada这一东南亚最大电商平台的增长,同时深化其与阿里巴巴生态系统的融合。资料显示,作为东南亚地区顶尖的电子商务平台,Lazada已在印度尼西亚、马来西亚、菲律宾、新加坡、泰国及越南展开业务。加上此次新投资,阿里巴巴集团对Lazada的投资额总计将达到40亿美元,包括2016年投资10亿美元以控股Lazada,以及2017年增持其股权至83%时投资的10亿美元。

百度(NASDAQ:BIDU)方面19日对外宣布,将于本月26日正式对外发布智能视频音箱,此前在2018年全国两会期间,百度公司董事长兼首席执行官李彦宏曾多次在采访中提到了这款即将发布的新硬件产品。据百度方面透露,即将发布的智能视频音箱名为“小度在家”,此前在今年1月举行的CES上,百度度秘事业部总经理景鲲和小鱼在家CEO宋晨枫曾介绍过其联合研发的智能视频音箱,此次对外发布的“小度在家”或为该款产品。

国内酒类线上线下零售商京东(NASDAQ:JD)酒业19日公布了2018年度战略规划,通过品牌扶持计划、全渠道无界营销等转型为酒品内容生态平台,成为酒业内容生态的基础设施。当日,京东酒业还联合21家全球知名酒企成立了中国酒文化推广联盟,通过“3+”战略将酒文化与品牌、平台和消费者连接起来带动行业销售模式的变革。

易车(NYSE:NITA)今天宣布,该公司董事会已经批准了一项股票回购计划。根据这项计划,易车已被授权回购由美国存托股票代表的公司普通股,可在未来12个月时间里回购总价值最多为1.5亿美元的股票。易车预计将利用现有的现金余额来为这项股票回购计划提供资金。公司首席执行官张序安表示:“今天宣布的股票回购计划反映了我们对易车所有业务线的长期增长前景的信心。我们将继续激活易车和易信之间的合力,推动媒体业务的效率提高,并在易信内部实现规模经济。”

【美国科技股】

美国科技股全线下挫,其中跌幅较大的公司包括:Facebook(跌6.77%)、Roku(跌5.61%)、博通(跌3.89%)、GoPro(跌3.79%)、英伟达(跌3.78%)、高通(跌3.71%)、Snap(跌3.47%)、西部数据(跌3.09%)、Alphabet(跌3.03%)、特斯拉(跌2.42%)、PayPal(跌2.26%)、Box(跌1.83%)、Zynga(跌1.83%)、IBM(跌1.82%)、微软(跌1.81%)、亚马逊(跌1.70%)、Twitter(跌1.69%)、思科(跌1.64%)、应用材料(跌1.58%)、Line(跌1.58%)、Netflix(跌1.56%)、苹果(跌1.53%)、Adobe(跌1.49%)和惠普(跌1.32%)。

据外媒报道,与美国总统特朗普竞选活动有关联的一家数据分析公司在未获得授权的情况下收集了Facebook的5000万用户信息,从而向这些用户精准投放政治广告。此前一天,在发现违规行为之后,Facebook暂停了这家名为Cambridge Analytica的公司在其社交媒体平台购买广告和管理页面的权限。受这桩丑闻的影响,Facebook股价周三开盘大跌。另据外媒消息,Facebook正计划在其位于门罗帕克市的总部园区新建占地43200平方米的办公楼,这是其扩张计划的最新进展。

据外媒报道,苹果正在大举投资开发下一代MicroLED显示屏。受此消息影响,苹果亚洲显示屏供应商的股价在周一全线下挫。Micro-LED也就是微型发光二极管。相比于使用LED背光背板的LCD显示技术以及LED显示技术,Micro-LED具有发光效率高、功耗低、响应快、寿命长的特点,能够令未来的设备更纤薄、更清晰、更节能。报道称,苹果已在加利福尼亚州总部附近的秘密设施生产少量Micro-LED屏幕用于测试。

IBM今天发布了《Five-for-Five》报告,强调未来5年将对人类生活产生巨大影响的五项惊人技术创新,包括监控世界海洋的微型AI相机、量子计算机投入实际使用等。另据外媒报道,在日前召开的IBM Think 2018大会上,该公司宣布推出“全球最小电脑”而这款电脑的体积实际上比一粒盐还要小,甚至需要一个显微镜才能清楚看到它。

国外投资研究公司Consumer Edge的分析师上周五在一份研究报告中指出,特斯拉也许不能达到Model 3的生产目标,但投资者们也许并不在乎。分析师詹姆斯·艾伯丁(James Albertine)表示,到本月底的时候,特斯拉Model 3的周产量可能会达到2000辆,低于它之前设定的2500辆周产量目标。Consumer Edge维持其给予特斯拉股票的“买入”评级和385美元的目标价不变,该目标价比特斯拉股票上周五收盘价高出20%。

据外媒报道,优步(Uber)的一辆无人驾驶汽车在亚利桑那州撞死了一名女性行人,促使该公司暂停了在该州以及旧金山、多伦多和匹兹堡公共道路上的所有自动驾驶汽车测试。这可能是自动驾驶汽车引发的第一起行人死亡事故。优步证实,事故发生期间这辆汽车正在以无人驾驶的模式行驶,但有一名司机在车内以保安全。据彭博社报道,美国国家运输安全委员会(US National Transportation Safety Board)已经针对此次撞车事故启动了一项调查。

技术VC服务内容

技术VC

服务:服务于UI/技术实现/测试/上线部署等环节(需求及原型需创业公司提供)

价格:市场价格1/3(市场总价不超于2百万,不低于30万的项目)

技术:外包项目技术限于web/微信公众号/小程序/APP(H5和原生均可)

周期:项目周期,根据需求大小不同,通常是1-4个月

招聘:免费为公司招聘中低端技术人员

范围:技术范围限定于前端、Java后台、测试、产品经理、UI。其他中低端人员暂时无法提供

周期:通常,我们会在两周之内为客户搭建不少于10左右的技术团队

成本:成本将低于市场薪资水平

全流程:后端自动化、前端自动化、测试自动化、部署自动化

多语言:Java/Python/NodeJS/PHP/C#/Javawcript

多框架:Spring/Django/Flask/Express/Yii/spring.NET/Angular/Vue/React/React Native/微信开发框架

内容:丰富的培训资料内容毫末科技培训资料

周期:每两周一次的技术培训

方案:指导制定销售方案和销售策略

执行:将创业公司的产品方案,融入到我们已有的销售产品中,进行打包销售

团队:为创业公司搭建销售队伍,并进行培训

低成本技术外包
毫末科技技术雷达

毫末科技技术雷达

技术雷达

团队成员培训

团队成员培训

公司新闻, 新闻

每两周开展一整天的培训

1.培训现场是毫末科技 2.四小时讲课 + 两小时练习 + 两小时考核

 培训的难度由浅入深

1.分初、中、高三个层次

培训的内容涵盖软件工程各方面

1.软件工程理论及实践 2.平台、工具、技术使用 3.语言、类库及软件框架使用 4.最佳实践

 培训完进行考核

考核平台(开发中)

鸿合科技BCS

制造业OA系统, 未分类
鸿合科BCS主要涵盖两大功能模块: 1.CRM:客户关系管理系统 2.OA:办公系统。本系统将CRM系统和OA系统融合在一起,为以销售为导向的企业提供完善的办公平台。 本平台未来将逐步发展为涵盖多种功能模块的企业信息化系统。包括:1. ERP:企业资源计划系统 2. R&D(PLM):研发管理 3. HR:人力资源管理

1.合作伙伴

2.产品详情

1.项目报备

2.合同申请

3.交货申请

4.转储申请

5.测试申请

6.测试QZD

1.申报管理

2.合同管理

3.交货管理

4.转储管理

5.物流管理

6.交货分配

7.交货冲销

8.物流单操作

1.电子合同

2.电子签收

1.知识库

2.通讯录

3.公告库

1.单据概览

2.单据明细

检察行业遇到的问题

智慧检务解决方案

人多案少

刑事案件高位运行,人均办案数量较大
存在率 85%
新型疑难复杂案件高发,办案难度较高
存在率 67%
公诉科受案门槛低,案件“带病移送起诉”较多
存在率 49%
部分信息技术还未运用,一定程度上影响了办案效率
存在率 32%
队伍趋于年轻化,业务素能和办案水平有待提高
存在率 56%

存在信息孤岛

  • 子系统独立
  • 各部门独立
  • 院间不互通
  • 信息不完整

CSS布局解决方案(终结版)

技术共享, 精选文章

(点击上方公众号,可快速关注)

作者:无悔铭

https://segmentfault.com/a/1190000013565024

 

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1)使用inline-block+text-align

(1)原理、用法

  • 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。

  • 用法:对子框设置display:inline-block,对父框设置text-align:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .child{

 

    1.    display:inline-block;

 

    1. }

 

    1. .parent{

 

    1.    text-align:center;

 

    1. }

 

(3)优缺点

  • 优点:兼容性好,甚至可以兼容ie6、ie7

  • 缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原

2)使用table+margin

(1)原理、用法

 

    • 原理:先将子框设置为块级表格来显示(类似 ),再设置子框居中以达到水平居中。

    • 用法:对子框设置display:table,再设置margin:0 auto。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .child {

 

    1.    display:table;

 

    1.    margin:0 auto;

 

    1. }

 

(3)优缺点:

      • 优点:只设置了child,ie8以上都支持

      • 缺点:不支持ie6、ie7,将div换成table

3)使用absolute+transform

(1)原理、用法

      • 原理:将子框设置为绝对定位,移动子框,使子框左侧距离相对框左侧边框的距离为相对框宽度的一半,再通过向左移动子框的一半宽度以达到水平居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。

      • 用法:对父框设置position:relative,对子框设置position:absolute,left:50%,transform:translateX(-50%)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    left:50%;

 

    1.    transform:translateX(-50%);

 

    1. }

 

(3)优缺点

      • 优点:居中元素不会对其他的产生影响

      • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀

4)使用flex+margin

(1)原理、用法

      • 原理:通过CSS3中的布局利器flex将子框转换为flex item,再设置子框居中以达到居中。

      • 用法:先将父框设置为display:flex,再设置子框margin:0 auto。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .child {

 

    1.    margin:0 auto;

 

    1. }

 

(3)优缺点

      • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

5)使用flex+justify-content

(1)原理、用法

      • 原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

      • 用法:先将父框设置为display:flex,再设置justify-content:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1.    justify-content:center;

 

    1. }

 

(3)优缺点

      • 优点:设置parent即可

      • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1)使用table-cell+vertical-align

(1)原理、用法

      • 原理:通过将父框转化为一个表格单元格显示(类似 <td> 和 <th>),再通过设置属性,使表格单元格内容垂直居中以达到垂直居中。

      • 用法:先将父框设置为display:table-cell,再设置vertical-align:middle。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table-cell;

 

    1.    vertical-align:middle;

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好,ie8以上均支持

2)使用absolute+transform

(1)原理、用法

      • 原理:类似于水平居中时的absolute+transform原理。将子框设置为绝对定位,移动子框,使子框上边距离相对框上边边框的距离为相对框高度的一半,再通过向上移动子框的一半高度以达到垂直居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。

      • 用法:先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    top:50%;

 

    1.    transform:translateY(-50%);

 

    1. }

 

(3)优缺点

      • 优点:居中元素不会对其他的产生影响

      • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀

3)使用flex+align-items

(1)原理、用法

      • 原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

      • 用法:先将父框设置为position:flex,再设置align-items:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:flex;

 

    1.    align-items:center;

 

    1. }

 

(3)优缺点

      • 优点:只设置parent

      • 缺点:兼容性存在一定问题

水平垂直居中

1)使用absolute+transform

(1)原理、用法

      • 原理:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)。

      • 见水平居中的3)和垂直居中的2)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    left:50%;

 

    1.    top:50%;

 

    1.    transform:tranplate(-50%,-50%);

 

    1. }

 

(3)优缺点

      • 优点:child元素不会对其他元素产生影响

      • 缺点:兼容性存在一定问题

2)使用inline-block+text-align+table-cell+vertical-align

(1)原理、用法

      • 原理:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将二者结合起来。详见:水平居中的1)和垂直居中的1)。

      • 见水平居中的1)和垂直居中的1)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    text-align:center;

 

    1.    display:table-cell;

 

    1.    vertical-align:middle;

 

    1. }

 

    1. .child {

 

    1.    display:inline-block;

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好

3)使用flex+justify-content+align-items

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的justify-content和align-items,从而达到水平垂直居中。详见:水平居中的4)和垂直居中的3)。

      • 见水平居中的4)和垂直居中的3)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1.    justify-content:center;

 

    1.    align-items:center;

 

    1. }

 

(3)优缺点

      • 优点:只设置了parent

      • 缺点:兼容性存在一定问题

多列布局

定宽+自适应

1)使用float+overflow

(1)原理、用法

      • 原理:通过将左边框脱离文本流,设置右边规定当内容溢出元素框时发生的事情以达到多列布局。

      • 用法:先将左框设置为float:left、width、margin-left,再设置实际的右框overflow:hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    overflow:hidden;

 

    1. }

 

(3)优缺点

      • 优点:简单

      • 缺点:不支持ie6

2)使用float+margin

(1)原理、用法

      • 原理:通过将左框脱离文本流,加上右框向右移动一定的距离,以达到视觉上的多列布局。

      • 用法:先将左框设置为float:left、margin-left,再设置右框margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1. }

 

    1. .right {

 

    1.    margin-left:120px;

 

    1. }

 

(3)优缺点

      • 优点:简单,易理解

      • 缺点:兼容性存在一定问题,ie6下有3px的bug。right下的p清除浮动将产生bug

3)使用float+margin(改良版)

(1)原理、用法

      • 原理:在1)的基础之上,通过向右框添加一个父框,再加上设置左、右父框属性使之产生BFC以去除bug。

      • 用法:先将左框设置为float:left、margin-left、position:relative,再设置右父框float:right、width:100%、margin-left,最后设置实际的右框margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="rigth-fix">

 

    1.        <div class="right">

 

    1.            <p>right</p>

 

    1.            <p>right</p>

 

    1.        </div>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    position:relative;

 

    1. }

 

    1. .right-fix {

 

    1.    float:right;

 

    1.    width:100%;

 

    1.    margin-left:-100px;

 

    1. }

 

    1. .right {

 

    1.    margin-left:120px;

 

    1. }

 

(3)优缺点

      • 优点:简单,易理解

4)使用table

(1)原理、用法

      • 原理:通过将父框设置为表格,将左右边框转化为类似于同一行的td,从而达到多列布局。

      • 用法:先将父框设置为display:table、width:100%、table-layout:fixed,再设置左右框display:table-cell,最后设置左框width、padding-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table;

 

    1.    width:100%;

 

    1.    table-layout:fixed;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    padding-right:20px;

 

    1. }

 

    1. .right,.left {

 

    1.    display:table-cell;

 

    1. }

 

5)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。

      • 用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

(3)优缺点

      • 优点:flex很强大

      • 缺点:兼容性存在一定问题,性能存在一定问题

两列定宽+一列自适应

(1)原理、用法

      • 原理:这种情况与两列定宽查不多。

      • 用法:先将左、中框设置为float:left、width、margin-right,再设置右框overflow:hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="center">

 

    1.        <p>center</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left,.center {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    overflow:hidden;

 

    1. }

 

不定宽+自适应

1)使用float+overflow

(1)原理、用法

      • 原理:这种情况与两列定宽查不多。

      • 用法:先将左框设置为float:left、margin-right,再设置右框overflow: hidden,最后设置左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left{

 

    1.        float: left;

 

    1.        margin-right: 20px;

 

    1.    }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left p{

 

    1.    width: 200px;

 

    1. }

 

(3)优缺点

      • 优点:简单

      • 缺点:ie6下兼容性存在一定问题

2)使用table

(1)原理、用法

      • 原理:通过将父框改变为表格,将左右框转换为类似于同一行的td以达到多列布局,设置父框宽度100%,给左框子元素一个固定宽度从而达到自适应。

      • 用法:先将父框设置为display: table、width: 100%,再设置左、右框display: table-cell,最后设置左框width: 0.1%、padding-right以及左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent{

 

    1.    display: table; width: 100%;

 

    1.    }

 

    1. .left,.right{

 

    1.    display: table-cell;

 

    1. }

 

    1. .left{

 

    1.    width: 0.1%;

 

    1.    padding-right: 20px;

 

    1. }

 

    1. .left p{

 

    1.    width:200px;

 

    1. }

 

(3)优缺点

      • 缺点:ie6 ie7不支持

3)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

      • 用法:先将父框设置为display:flex,再设置右框flex:1,最后设置左框margin-right:20px、左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

    1. .left p{

 

    1.    width: 200px;

 

    1. }

 

(3)优缺点

      • 优点:flex很强大

      • 缺点:兼容性存在一定问题,性能存在一定问题

两列不定宽+一列自适应

(1)原理、用法

      • 原理:这个情况与一列不定宽+一列自适应查不多。

      • 用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最后给左中框中的内容设置width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="center">

 

    1.        <p>center</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left,.center{

 

    1.    float: left;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left p,.center p{

 

    1.    width: 100px;

 

    1. }

 

等分布局

公式转化:

l=w*n+g*(n-1)->l=w*n+g*n-g->l+g=w+g*n

因此,我们需要解决两个问题:

      • 如何让总宽度增加g(即:L+g)

      • 如何让每个宽包含g(即:w+g)

1)使用float

(1)原理、用法

      • 原理:增大父框的实际宽度后,使用CSS3属性box-sizing进行布局的辅助。

      • 用法:先将父框设置为margin-left: -*px,再设置子框float: left、width: 25%、padding-left、box-sizing: border-box。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="column"><p>1</p></div>

 

    1.    <div class="column"><p>2</p></div>

 

    1.    <div class="column"><p>3</p></div>

 

    1.    <div class="column"><p>4</p></div>

 

    1. </div>

 

    1. .parent{

 

    1.    margin-left: -20px;//l增加g

 

    1. }

 

    1. .column{

 

    1.    float: left;

 

    1.    width: 25%;

 

    1.    padding-left: 20px;

 

    1.    box-sizing: border-box;//包含padding区域 w+g

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好

      • 缺点:ie6 ie7百分比兼容存在一定问题

2)使用table

(1)原理、用法

      • 原理:通过增加一个父框的修正框,增大其宽度,并将父框转换为table,将子框转换为tabel-cell进行布局。

      • 用法:先将父框的修正框设置为margin-left: -*px,再设置父框display: table、width:100%、table-layout: fixed,设置子框display: table-cell、padding-left。

(2)代码实例

    1. <div class="parent-fix">

 

    1.    <div class="parent">

 

    1.        <div class="column"><p>1</p></div>

 

    1.        <div class="column"><p>2</p></div>

 

    1.        <div class="column"><p>3</p></div>

 

    1.        <div class="column"><p>4</p></div>

 

    1.    </div>

 

    1. </div>

 

    1. .parent-fix{

 

    1.    margin-left: -20px;//l+g

 

    1. }

 

    1. .parent{

 

    1.    display: table;

 

    1.    width:100%;

 

    1.    table-layout: fixed;

 

    1. }

 

    1. .column{

 

    1.    display: table-cell;

 

    1.    padding-left: 20px;//w+g

 

    1. }

 

(3)优缺点

      • 优点:结构和块数无关联

      • 缺点:增加了一层

3)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到等分布局。

      • 用法:将父框设置为display: flex,再设置子框flex: 1,最后设置子框与子框的间距margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="column"><p>1</p></div>

 

    1.    <div class="column"><p>2</p></div>

 

    1.    <div class="column"><p>3</p></div>

 

    1.    <div class="column"><p>4</p></div>

 

    1. </div>

 

    1. .parent{

 

    1.    display: flex;

 

    1. }

 

    1. .column{

 

    1.    flex: 1;

 

    1. }

 

    1. .column+.column{

 

    1.    margin-left:20px;

 

    1. }

 

(3)优缺点

      • 优点:代码量少,与块数无关

      • 缺点:兼容性存在一定问题

定宽+自适应+两块高度一样高

1)使用float

(1)原理、用法

      • 原理:通过过分加大左右子框的高度,辅助超出隐藏,以达到视觉上的等高。

      • 用法:将父框设置overflow: hidden,再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px,最后设置左框float: left、width、margin-right,右框overflow: hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. p{

 

    1.    background: none!important;

 

    1. }

 

    1. .left,.right{

 

    1.    background: #444;

 

    1. }

 

    1. .parent{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left,.right{

 

    1.    padding-bottom: 9999px;

 

    1.    margin-bottom: -9999px;

 

    1. }

 

    1. .left{

 

    1.    float: left;

 

    1.    width: 100px;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

(3)优缺点

      • 优点:兼容性好

      • 缺点:伪等高,不是真正意义上的等高

2)使用table

(1)原理、用法

      • 原理:将父框转化为tabel,将子框转化为tabel-cell布局,以达到定宽+自适应+两块高度一样高。

      • 用法:先将父框设置为display:table、width:100%、table-layout:fixed,再设置左右框为display:table-cell,最后设置左框width、padding-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table;

 

    1.    width:100%;

 

    1.    table-layout:fixed;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    padding-right:20px;

 

    1. }

 

    1. .right,.left {

 

    1.    display:table-cell;

 

    1. }

 

3)使用flex(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。

      • 用法:将父框设置为display: flex,再设置左框width、margin-right,最后设置右框flex:1。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

(3)优缺点

      • 优点:代码少,flex很强大

      • 缺点:兼容性存在一定问题

4)使用display

(1)原理、用法

      • 原理:通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。

      • 用法:将父框设置为display: -webkit-box、width: 100%,再设置左框width、margin-right,最后设置右框-webkit-box-flex: 1。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">left</div>

 

    1.    <div class="right">right </div>

 

    1. </div>

 

    1. .parent {

 

    1.    width: 100%;

 

    1.    display: -webkit-box;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right {

 

    1.    -webkit-box-flex: 1;

 

    1. }

 

(3)优缺点

      • 缺点:兼容性存在较大的问题

全屏布局

全屏布局的特点
      • 滚动条不是全局滚动条,而是出现在内容区域里,往往是主内容区域

      • 浏览器变大时,撑满窗口

全屏布局的方法

1)使用position

(1)原理、用法

      • 原理:将上下部分固定,中间部分使用定宽+自适应+两块高度一样高。

      • 用法:见实例。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="top">top</div>

 

    1.    <div class="left">left</div>

 

    1.    <div class="right">

 

    1.        <div class="inner">right</div>

 

    1.    </div>

 

    1.    <div class="bottom">bottom</div>

 

    1. </div>

 

    1. html,body,.parent{

 

    1.    margin:0;

 

    1.    height:100%;

 

    1.    overflow:hidden;

 

    1. }

 

    1. body{

 

    1.    color:white;

 

    1. }

 

    1. .top{

 

    1.    position:absolute;

 

    1.    top:0;

 

    1.    left:0;

 

    1.    right:0;

 

    1.    height:100px;

 

    1.    background:blue;

 

    1. }

 

    1. .left{

 

    1.    position:absolute;

 

    1.    left:0;

 

    1.    top:100px;

 

    1.    bottom:50px;

 

    1.    width:200px;

 

    1.    background:red;

 

    1. }

 

    1. .right{

 

    1.    position:absolute;

 

    1.    left:200px;

 

    1.    top:100px;

 

    1.    bottom:50px;

 

    1.    right:0;

 

    1.    background:pink;

 

    1.    overflow: auto;

 

    1. }

 

    1. .right .inner{

 

    1.    min-height: 1000px;

 

    1. }

 

    1. .bottom{

 

    1.    position:absolute;

 

    1.    left:0;

 

    1.    right:0;

 

    1.    bottom:0;

 

    1.    height:50px;

 

    1.    background: black;

 

    1. }

 

(3)优缺点

      • 优点:兼容性好,ie6下不支持

2)使用flex

(1)原理、用法

      • 原理:通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。

      • 用法:见实例。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="top">top</div>

 

    1.    <div class="middle">

 

    1.        <div class="left">left</div>

 

    1.        <div class="right">

 

    1.            <div class="inner">right</div>

 

    1.        </div>

 

    1.    </div>

 

    1.    <div class="bottom">bottom</div>

 

    1. </div>

 

    1. html,body,.parent{

 

    1.    margin:0;

 

    1.    height:100%;

 

    1.    overflow:hidden;

 

    1. }

 

    1. body{

 

    1.    color: white;

 

    1. }

 

    1. .parent{

 

    1.    display: flex;

 

    1.    flex-direction: column;

 

    1. }

 

    1. .top{

 

    1.    height:100px;

 

    1.    background: blue;

 

    1. }

 

    1. .bottom{

 

    1.    height:50px;

 

    1.    background: black;

 

    1. }

 

    1. .middle{

 

    1.    flex:1;

 

    1.    display:flex;

 

    1. }

 

    1. .left{

 

    1.    width:200px;

 

    1.    background: red;

 

    1. }

 

    1. .right{

 

    1.    flex: 1;

 

    1.    overflow: auto;

 

    1.    background:pink;

 

    1. }

 

    1. .right .inner{

 

    1.    min-height: 1000px;

 

    1. }

 

(3)优缺点

      • 缺点:兼容性差,ie9及ie9以下不兼容

全屏布局相关方案的兼容性、性能和自适应一览表
方案 兼容性 性能 是否自适应
Position 部分自适应
Flex 较差 可自适应
Grid 较好 可自适应

当然,最最最最最后,如果您喜欢这片文章,可以疯狂点赞和收藏喔!!

 

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)