浏览器兼容性和布局

同一个标签在不同浏览器上的默认样式不同。因此，展示的效果也不一样。所以我需要在每个浏览器显示效果都一样，我们就需要每个浏览器兼容。

解决方案有：1、引用重置文件（reset、normalize）。2、can  i  use+前缀（主流浏览器）

主流的浏览器有以下几个：

IE(微软) Firefox（火狐） Chrome（谷歌） Safari（苹果） Opera（欧鹏）

浏览器                                 内核                                        JS引擎                                   前缀

IE                                        Trident                                     JScript                                   -ms-

Firefox                                Gecko                                   TraceMonkey                           -moz-

Chrome                             Webkit,Blink                              V8                                          -wekit-

Safari                                Webkit SquirrelFish                  Extreme                              -webkit- -blink-

Opera                                Presto                                  Carakan                                       -o-

开发理念：

1、根据用户群体（年龄、学历、地域、行业）2、功能（高版本浏览器、低版本浏览器）

渐进增加：先以低版本浏览器能识别的内容进行内容展示（先实现展示基础信息），再根据用户需求，进行功能的增加。

优雅降级：先满足所有功能需求，再根据客户和低版本浏览器进行功能的删减。

布局：

两栏布局：左侧定宽，右侧自适应。注：要设置右侧和父元素最小宽度（min-width）

三栏布局：左右定宽,中间撑满

流式布局：宽度给100%时要注意不可不免的加上padding和border，这时我们要改变盒模型的计算规则box-sizing：border-box

1.左侧固定，右侧自适应：

flex实现：给父元素display:flex。左侧盒子给固定宽高，右侧盒子，给flex-grow:1;

浮动float实现：左侧盒子给float：left，右侧盒子给overflow：hidden

overflow：hidden创建BFC

BFC:页面上一个独立的渲染区域。

BFC特点：1、触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素。2、触发了BFC的普通盒子，不会元浮动元素重叠。

触发BFC:

float:left or right

overflow≠visible

position：absolute or fixed

 

右侧固定，左侧自适应

两侧固定，中间自适应

响应式布局：判断当前视口的宽度。

各种设备视口：

大屏幕：投影仪 电视 pc端  大于等于1200px

中等屏幕：上网本、小型笔记本992px-1200px

小屏幕：平板768px-992px

超小屏幕：手机小于768px

例如：@media screen and (min-width:601px) and (max-width:799px)

视口宽度（601px到799px）