高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局 一、文档流 1、什么是文档流 将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素 2、本质 文档流本质是 nomal flow （普通流、常规流） 3、BFC（Block ...

什么是文档流 英文原文是：Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes ...

什么是文档流？ 文档流：又称普通文档流和常规文档流，即浏览器定义的页面元素自上而下，从左往右排列的常规文档模式。 可通过一些浏览器支持的布局方式进行改写文档流布局，例如我们先来查看定位。 1. 定位分为五种：static absolute relative fixed sticty ...

文档流 　 document flow=> normal flow 本质：普通流/常规流 流：水流 河流... => 自上而下（连续的，连续的 文档：页面主体 文档流：一个连续具有上下逻辑的页面整体 理解：出现在页面中的显示内容，均可以理解为在文档流中 ...

流式布局（百分比布局） 在CSS2时代就有，主要指的是将页面中元素的宽度以百分比表示并进行排版，可以在不同分辨率下显示相同的版式 响应式布局 关键技术是CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式 　　举例 ...

如果布局使用百分比宽度，在不同的显示器上效果可能不太一样。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。将固定像素宽度转换对应的百分比宽度： 目标元素宽度/上下文元素宽度=百分比宽度 em代替px主要是为了文字缩放。针对老版本IE，现在浏览器支持缩放像素为单位的文字了。优点：1.使用 ...

响应式布局是什么？ 一、什么是响应式布局？   响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。 二、响应式布局 ...

摘自阮老师的博客 点击查看运行效果 ...