常见CSS布局单位 px em rem vm vh 、响应式布局如何实现及原理、弹性布局、浮动布局

常见CSS布局单位 px em rem vm vh

• 像素(px)：相对于显示器分辨率而言

• em：其值基于父元素的font-size，具有继承的特点; 如果父元素font-size：14px，则1em=14px

• rem：是CSS3新增的一个相对单位，相对的是HTMl根元素的font-size（默认font-size：16px；即1rem=16px）

• vm、vh：分别是相对于视图窗口 宽度高度的百分比，例如1vm=视窗宽度1% 1vh=视窗高度1%（整屏的宽度即100vw，整屏的高度即100vh）

px em rem 区别

• px是固定的像素，一旦设置了就无法因为适应页面大小而改变

• em和rem相对于px更具有灵活性，他们是相对长度单位，长度不是固定的，更适用于响应式布局

• em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值

px em rem 应用场景

• 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可

• 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备

1、响应式布局（自适应）如何实现及原理

• 响应式布局：只需要开发一套代码，使页面适应不同的屏幕， PC + 平板 + 手机

• 响应式开发一套界面， 通过检测视口分辨率，针对不同客户端在客户端做代码处理，展现不同的布局和内容。

响应式布局的实现方案

• （1）媒体查询布局
  使用@media查询，查询检测不同的设备屏幕尺寸做处理，为了处理移动端， 页面头部必须有meta声明的viewport

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

• （2）百分比布局
  当浏览器的宽/高发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
  1、缺点：
  （1）计算困难
  （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

• （3）rem布局
  rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小是16px，此时1rem=16px，可以利用前面的媒体查询，针对不同设备分辨率改变font-size的值。其实 rem 布局的本质是等比缩放，一般是基于宽度。
  1、优点：可以快速适用移动端布局，字体，图片高度。
  2、缺点：
  ①目前 ie 不支持，对 pc 页面来讲使用次数不多；
  ②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
  ③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

• （4）vm vh 响应式布局
  vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度，任意层级元素，1vm=视图宽度1%，与百分比布局很相似

2、弹性布局

详情请跳转至flex布局即弹性布局

3、浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。
1、优点：
实现一行多列的效果（元素横着排列），以及在图文混排的时候可以很好的使文字环绕在图片周围。 另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

2、缺点：
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

补充：
清除浮动的方式：
1、给浮动元素的最后面添加一个空的div，并给它一个类名clear , 并给该元素设置唯一的样式，如下：

<div class="clear"></div>

// 给该元素设置唯一的样式
.clear { 
    clear:both;
}

2、给浮动元素的父亲添加类名clearfix，然后设置样式，如下：

.clearfix:after{   // 在该元素的内容后面添加一个为元素
   display:block;  // 伪元素的类型是块级元素
   content: '';   // 元素的内容为空
   clear: both;  //清除前面兄弟的浮动
   height:0;    // 处理低版本兼容的
}
.clearfix {  // 针对IE6兼容的
   zoom:1;
}

3、给浮动元素的父亲添加样式

overflow:hidden;