同一个标签在不同浏览器上的默认样式不同。因此，展示的效果也不一样。所以我需要在每个浏览器显示效果都一样，我们就需要每个浏览器兼容。
解决方案有：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）