CSS Hack

条件hack

    只在IE下生效
    <!--[if IE]>
    <style>
	    .test{color:yellow;}
    </style>
    <![endif]-->
    
    只在IE6下生效
	<!--[if IE 6]>
	    .test{color:yellow;}
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	    .test{color:yellow;}
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	    .test{color:yellow;}
	<![endif]-->
	
	非IE浏览器生效
	<!--[if !IE]>
	    .test{color:yellow;}
	<![endif]-->

属性级hack

.test{
	color:#090\9; 
	*color:#f00;
	_color:#ff0; 
}

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

选择符hack（选择器前缀）

* html .test{color:#0f90;}
* + html .test{color:#ff0;}

CSS单位

像 px、rem、em、% 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。

单位	作用	特性
px	页面按精确像素展示	绝对单位
rem	相对根节点html字体大小来计算	相对单位
em	基准点为相对父节点字体的大小	相对单位
%	相对于父元素的大小设定的比率	相对单位
vw	视窗宽度的百分比，1vw代表视窗宽度的1%	视窗单位
vh	视窗高度的百分比，1vh代表视窗高度的1%	视窗单位
vmin	当前vw和vh中较小的一个值	视窗单位
vmax	当前vw和vh中较大的一个值	视窗单位

提示：vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。假如给页面设置一个宽800px，则400px=50vh=50%。

一、px、em和rem的区别

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
rem中的r意思是root（根源），这也就不难理解了。

二、vw、vh 与 % 百分比的区别

% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

三、vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

CSS尺寸

属性	说明
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。（常用于响应式布局）
max-width	设置元素的最大宽度。（常用于响应式布局）
min-height	设置元素的最小高度。（常用于响应式布局）
min-width	设置元素的最小宽度。（常用于响应式布局）
width	设置元素的宽度。

CSS布局（重点）

PC端布局思想与实现

静态布局：
将以下设置在head中，
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
根据设计稿的宽高设定实现稿即可。
这种方式简单易上手，缺点显而易见，不能根据不同的屏幕做出不同的表现。例如直接设定主体宽度，然后居中展示，两边留白。宽屏两边留白多，窄屏两边留白少。

单列布局

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行 头部200px高 底部200px高 中间自适应占满</title>
<style>
.box{
    width:600px;
    height:400px;
    border:1px solid #ccc;
    margin:0 auto;
    position:relative;
}
.top{
    width:600px;
    height:100px;
    background-color:#ff0;
    position:absolute;
    top:0;
    left:0;
}
.zhong{
    width:100%;
    background-color:#f0f;
    
    position:absolute;
    top:100px;
    bottom:100px;
}
.bottom{
    width:600px;
    height:100px;
    background-color:#f00;
    position:absolute;
    bottom:0;
    left:0;
}
</style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="zhong"></div>
</div>
</body>
</html>

效果：

两栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- float+margin实现两栏布局，一列定宽，一自适应
        定宽可以作为广告栏，自适应可以做内容区 -->
        <style type="text/css">
            .left{
              width: 12.5rem;
              height: 600px;
              background: yellow;
              float: left;
              display: table;
              text-align: center;
              line-height: 600px;
              color: #fff;
            }
 
            .right{
              margin-left: 210px;
              height: 600px;
              background: blueviolet;
              text-align: center;
              line-height: 600px;
            }
        </style>
	</head>
	<body>
        <body>
          <div class="left">定宽</div>
          <div class="right">自适应</div>
        </body>
	</body>
</html>

效果：

三栏布局

1.float+margin实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- float+margin实现三栏布局，两列左、右定宽，中间自适应
        缺点就是：中间内容占据较少空间，当宽度<左右宽度相加时，.right会往下掉 -->
        <style type="text/css">
            *{
              margin: 0;
              padding: 0;
            }
            .left{
              width: 200px;height: 300px; background: yellow; float: left;    
            }
            .right{
              width: 150px; height: 300px; background: blueviolet; float: right;
            }
            .middle{
              height: 300px; background: goldenrod; margin-left: 220px; margin-right: 160px;
            }
        </style>
    </head>
    <body>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
        <div class="middle">中间栏</div>
    </body>
</html>

2.position+margin实现

<!-- 使用position+margin实现三栏布局
        缺点：
        1.中间栏内容过少，当调整屏幕像素时发现右会覆盖左
        2.父系元素没有设置外边距为0时，会导致中间栏的位置出现偏差 -->
<style type="text/css">
            *{   /*添加后发现*/
                margin: 0;
            }
            .left{
                background: skyblue;
                width: 200px;
                height: 300px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .middle{
                height: 300px;
                margin: 0 220px;
                background: yellow;
            }
            .right{
                height: 300px;
                width: 200px;
                position: absolute;
                top: 0;
                right: 0;
                background: violet;
            }
        </style>
        <body>
        <div class="left">左栏</div>
        <div class="middle">中间栏</div>
        <div class="right">右栏</div>
    </body>

3.使用float和BFC配合圣杯布局

<!-- 使用float和BFC配合圣杯布局
        缺点是：1. 结构不正确 2. 多了一层标签 -->
        <style type="text/css">
            .wrapper{
                overflow: hidden;
            }
            .middle{
                width: 100%;
                float: left;
            }
            .middle .main{
                margin: 0 220px;
                background: red;
            }
            .left{
                width: 200px;
                height: 300px;
                float: left;
                background: green;
                margin-left: -100%;
            }
            .right{
                width: 200px;
                height: 300px;
                float: left;
                background: yellow;
                margin-left: -200px;
            }
        </style>
        <body>
        <div class="wrapper">
            <div class="middle">
                <div class="main">中间</div>
            </div>
            <div class="left">
                左栏
            </div>
            <div class="right">
                右栏
            </div>
        </div>
    </body>

实例效果如上。

扩展：BFC布局规则以及实现案例

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

BFC创建原则
1、float的值不是none，而是left、right。
2、position的值不是static或者relative，而是absolute、fixed。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible，而是hidden…

只要遵照上述其中一条就会存在BFC

BFC作用

利用BFC避免margin重叠。（由于父子、兄弟垂直方向的margin会重叠，所以可以利用BFC原则破坏垂直方向的margin重叠问题），同时验证Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <p>123</p>
    <div>
        <p>456</p>
    </div>
</body>
</html>

CSS

*{
        margin: 0;
        padding: 0;
    }
    p {
        color: #fff;
        background: red;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;   /*BF创建原则4*/
    }

自适应两栏布局（使用方法类似于上文的三栏布局，由于两栏布局需要浮动，但是同时浮动却满足不了自适应），同时验证每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。

代码如下：
HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="left">左</div>
    <div class="right">右</div>
</body>
</html>

CSS

*{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
    }
 
    .left {
        width: 100px;
        height: 50px;
        float: left;
        background: red;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
    }
 
    .right {
        float:left;      /*同时浮动的后果，BF创建原则1，但满足不了自适应*/
        height: 100px;
        background: yellow;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
    }

将float：left修改成overflow：hidden看看效果

.right {
        overflow:hidden;
        height: 100px;
        background: yellow;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
    }

用于清楚浮动。（清除浮动中存在一种方法是在父元素中添加overflow:hidden），同时验证计算BFC的高度时，浮动元素也参与计算。

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

CSS

  .father {
        border: 5px solid RED;
        width: 500px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid green;
        width:100px;
        height: 100px;
        float: left;
    }

移动端的布局思想与实现

一、静态布局（Static Layout）

在viewport meta标签上设置content = “width=320”，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比例缩放，从而刚好占满整个屏幕。这种方案类似弹性布局的rem。

 <script type="text/javascript">
            if (document.documentElement.clientWidth < 480) { 
                document.querySelector("meta[name=viewport]").setAttribute(
                    'content', 
                    'width=640,initial-scale=2.0,minimum-scale=1.0,maximum-scale=3.0');
            }  
        </script>

在viewport meta标签上设置content=“width=640，user-scalable=no”，页面的各个元素采用px作为单位。由于手机浏览器的宽度小于640px(逻辑像素)（iphone plus系列为414px），所以浏览器viewport会自动缩放至全屏大小。经典案例：荔枝FM,人人都是播客的移动站

优势：
开发简单：缩放交给浏览器，开发人员不需要自己操心，完全按照视觉稿切图。
还原精准：绝对等比例缩放，可以精准的还原原始视觉效果（会有清晰度的失真）。
测试方便：可以在pc端实现大部分的测试工作，即开发人员自己就能完成测试的大部分工作，手机端只要修改一些细节。

劣势：
像素丢失：对于一些分辨率较低的手机，可能设备像素还未达到viewport指定的宽度，此时可能出现边框丢失等问题。现代手机基本不会发生这种情况。
缩放失效：早期android手机不能根据meta中的width来进行缩放，需要配合initial-scale。这种完全依赖浏览器的方式也难免可能发生异常。
文本折行：会发生在缩放失效的机型中。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
专业一点说法：关键元素高宽和位置都不变，只有容器元素在做伸缩变换
参考案例：

3、开发思路：

多列等分 -> 百分比等分
左侧固定宽度 + 右侧自适应宽度
思路一 -> 左侧左浮动+右侧利用BFC特性在右侧
思路二 -> 父级给padding-left，预留出来左侧区域的宽度，左侧用绝对定位上去，右侧用百分百宽度
左侧自适应 + 右侧固定宽度
思路一 -> 左侧用百分百宽度,右侧用绝对定位上去
左右固定宽度 + 中间自适应
思路一 -> 左侧左浮动 + 中间百分之百（中间部分再分为左侧百分之百+右侧右浮动）
思路二 -> 左侧左浮动 + 中间百分之百 + 右侧右浮动（负margin法减掉左右侧）
思路三 -> 左右绝对定位 + 中间百分之百（父元素padding-left,padding-right预留左右侧的位置）
左中右全自适应 -> 全部用百分比
font-size、padding,margin,height直接量像素
小的地方可以用display:inline-block;让几个容器放在一排
小图标之类的，可以考虑用::before,::after来实现

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、rem布局

REM，即font size of the root element，使用 rem 单位进行相对布局，通过根元素进行适配，它好比是一个中介，通过它计算出页面真正要展示的大小，达到自适应效果。（有时需要配合媒体查询），常用于移动端开发。
rem避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。
实现 rem 的核心，就是通过js代码针对并监听不同尺寸的手机屏幕计算出相应的比例，具体方法有：

方法一：

(function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth >= 设计稿宽度){
                            docEl.style.fontSize = '100px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 设计稿宽度) + 'px';
                        }
                    };
         
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);

方法二：

(function(factory){
           factory();
            window.addEventListener('resize',factory,false);
        }(function(){
            var width = document.documentElement.clientWidth;
            width = width > 稿宽 ? 稿宽 : width;
            document.documentElement.style.fontSize = width / （稿宽/100） + 'px';
        }))

方法三：（推荐）

// 设置缩放
    function fixPixelRatio () {
      var scale = 1 / window.devicePixelRatio;
      var meta= '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
      document.write(meta);
    }
 
    // 设置font-size
    function displayRem () {
      var designW = 稿宽;  //设计稿宽
      var font_rate = 100;
      //适配
      document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
      //监测窗口大小变化
      window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {
          document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
      }, false);
    }
    fixPixelRatio()
    displayRem()

案例可以参考：
https://blog.csdn.net/Fabulous1111/article/details/78420191
https://blog.csdn.net/fabulous1111/article/details/78598425
https://github.com/XieTongXue/how-to/tree/master/pay-h5
网易

四、flex（弹性）布局

<!-- PC端的网页最佳方案使用flex布局 -->
        <style type="text/css">
            .wrapper{
                display: flex;
            }
            .left{
                width: 200px;
                height: 300px;
                background: green;
            }
            .middle{
                width: 100%;
                background: red;
                marign: 0 20px;
            }
            .right{
                width: 200px;
                height: 3000px;
                background: yellow;
            }
        </style>
        <body>
        <div class="wrapper">
            <div class="left">左栏</div>
            <div class="middle">中间</div>
            <div class="right">右栏</div>
        </div>
    </body>

关于弹性布局的一些属性以及说明

属性	属性值	说明
display	flex	弹性布局的重要参数，相当于清浮后的float：left
flex-direction	row（默认值）:主轴为水平方向，起点在左端、row-reverse:主轴为水平方向，起点在右端、column:主轴为垂直方向，起点在上沿、column-reverse:主轴为垂直方向，起点在下沿	决定主轴的方向（即项目的排列方向）
flex-wrap	wrap、no-wrap、wrap-reverse、继承	如果一条轴线排不下，是否换行
flex-flow	flex-direction && flex-wrap	flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap
justify-content	flex-start 、flex-end 、center 、space-between、space-around	定义了项目在主轴上的对齐方式，具体表现如下图
align-items	flex-start 、 flex-end 、 center 、baseline 、 stretch	定义项目在交叉轴上如何对齐，具体表现如下图
align-content	flex-start 、flex-end 、center 、space-between、space-around	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，具体表现如下图
ordert	number	定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex	auto（1 1 auto）和none（0 0 auto）	flex-grow（放大比例），flex-shrink（缩小比例）和flex-basis（分配基础）的简写，默认值为0 1 auto。后面两个属性可选

justify-content：

align-items：

align-content：

五、响应式布局

布局及设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

属性名	取值	描述
width	正整数	定义布局视口的宽度，单位为像素
height	正整数	定义布局视口的高度，单位为像素，很少使用
initial-scale	[0,10]	初始缩放比例，1表示不缩放
minimum-scale	[0,10]	最小缩放比例
maximum-scale	[0,10]	最大缩放比例
user-scalable	yes／no	是否允许手动缩放页面，默认值为yes

主要是为了让代码适应移动端的屏幕。viewport是指需要加载meta标签时读取的名字为‘视口’，其中，width等于设备的宽度device-width，是为了告诉浏览器，将布局视口的宽度设置为设备理想的宽度，initial-scale=1(缩放比例)保证加载的时候，要获取设备的宽度，同时要保持原始大小，便于媒体查询。user-scalable=no指定不允许用户缩放屏幕。

通过媒体查询来设置响应式样式

media query 是响应式布局的核心，他们够和浏览器进行沟通，告诉浏览器页面改如何呈现

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

实际上就是通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="header">头部</div>
  <div id="main">
    <div id="main-left">内容-左边</div>
    <div id="main-center">内容-中间</div>
    <div id="main-right">内容-右边</div>
  </div>
<div id="footer">底部</div>
</body>
</html>

css

*{
    padding:0px;
	margin:0px;
	font-family:"微软雅黑";
}
 
#header{
	height:100px;
	border:solid 1px red;
	margin:0px auto;
}
 
#main{
	margin:10px auto;
	height:400px;
}
 
#footer{
	margin:0px auto;
	height:100px;
	border:solid 1px red;
}
@media screen and (min-width:900px) /*PC端*/
{
	#header,#footer
	{
	    width:100%;
	}
 
    #main
	{
	    width:100%;
	    height:400px;
    }
 
    #main-left
    {
	    width:20%;
	    height:400px;
	    border:solid 1px red;
	    float:left;  /*保证在同一行*/
    }
 
    #main-center
    {
	    width:39%;
	    height:400px;
	    border:solid 1px red;
	    float:left;
    }
 
    #main-right
    {
        width:40%;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}
/*分辨率在600~900间*/
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:396px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none; /*隐藏右边*/
    }
 
}
/*手机模式*/
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;
    }
    #main-left
    {
        display:none; /*隐藏内容左边*/
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;  /*隐藏内容右边*/
    }
}

总结

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。

如果只做pc端，那么静态布局（定宽度）是最好的选择；
如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

【面试篇】前端点滴（css）

前端点滴（CSS）（二）

前端点滴（CSS）（二）---倾尽所有