1 CSS布局秘籍-任督二脉BFC/IFC _生活百科

文章插图
01、CSS布局1.1、正常布局流(Normal flow)正常布局流就是不做任何布局控制，按照HTML的顺序（从左到右，从上而下）进行布局排列。网页基于盒子模型进行正常的布局，主要特点：

盒子布局：单个内容的布局，把内容放入盒子，加上盒子三件套（padding、boder、margin）。
块盒子纵向布局：块级元素单独一行，按照顺序垂直排列，并按其margin分离。
内联盒子水平布局：内联元素会在一行水平排列，高度、宽度都取决于内容，直到空间不足另起一行（换行）。高矮不齐，底部对齐。
边距折叠：垂直相邻元素的垂直margin会保留最大的那一个，就是盒子的外边距折叠。
空白折叠：无论多少个连续空格、换行、tab，都会折叠为一个空格。

块元素行内元素是否换行独占一行，从新的一行开始，其后也另起一行和其他行内元素在同一行大小设置元素的高、宽、行高、边距、对齐都可调整，宽度默认100%元素高、宽、外边距不可设置，根据内容自适应包含元素一般可包含其他行内元素和块元素一般可包含其他行内元素，不可包含块元素常见元素div ， form、table，h1-h6，p，pre，ul/ol/li，dt/dl ， hr，brspan，font ， input，textarea，label，img ， a，button，select盒子块级盒子 (block box)：应用完整的盒子模型内联盒子 (inline box)：部分盒子模型有效

还有一种混合型“行内块元素”属于行内元素的一种，和其他元素在一行，但元素的高、宽、外边距都可以设置，如button、img、input 。
通过CSS样式的display属性可以更改元素的布局类型，如可设置<a>为一个块元素布局display: block;

标准布局总是这样从左到右、从上而下的顺序排列。但当我们要实现一些特殊的的布局效果时就没法了，这时的办法就是 —— 脱离文档流。
脱离文档流，就是从正常文档流中移除，文档流布局就不考虑他了，也就不会占用空间。基本上可以这样理解，当然也不是绝对就没人管了，他的父容器还是管的，至于怎么管看《格式化上下文》。
常用的脱离文档流的方式：float、position

float浮动，会使元素脱离文档流，移动到容器左/右边，后面元素会围绕浮动元素。
position定位，绝对定位（absolute）、固定定位（fixed），会使元素脱离文档流，空出来的位置被后续元素代替，所以会出现和其他元素重叠的问题。

1.2、display布局属性正常流中的所有元素都有一个display的值，这个属性允许我们更改默认的显示方式。display用来设置多种布局方式，可让不同元素类型（行、块元素）转换。
属性/值描述display设置元素显示类型，包括下面这些枚举值?none元素隐藏不显示，不占据空间、无交互，常用于隐藏元素?block此元素将显示为块级元素?inline内联，此元素会被显示为内联元素?inline-block行内块元素（CSS2.1），介于内联和块之间，除了不换行，高宽、盒子三件套都有效。常用<ul>的<li>+inline-block来实现导航?flex IE11弹性盒子布局（横向布局），inline-flex 内联的弹性盒子?grid非常灵活的网格布局，有些属性IE不支持。inline-grid 内联的网格布局?list-item此元素会作为列表，类似<ul>，父元素显示为 block 盒，内部变为多个 list-item inline 盒?table表格布局，同家族还有个inline-table内联表格布局、table-row、table-cell?contents伪盒子，充当遮罩的元素，不会产生任何盒子（不会被渲染），但不影响其子元素的布局和渲染?flow-rootIE建立一个无副作用的BFC

<span style="display:block">span元素2</span><!--转换为块元素 ， 类似一个div--><div style="display:inline">div元素</div> <!--转换为行内元素，类似一个span-->

02、什么是响应式布局？2.1、响应式设计响应式网页设计（responsive/r??sp?ns?v/web design，RWD）指的是允许 Web 页面适应不同屏幕宽度等因素，进行布局和外观的调整的一系列实践。它涵盖了很多 CSS 和 HTML 的功能和技术，现在也基本是我们默认建设网站的方式。