CSS样式布局

负边距与浮动布局

负边距

所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。

双飞翼布局

经典三列布局，也叫做圣杯布局，是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
要求只用一个额外的DIV标签；
要求用最简单的CSS、最少的HACK语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

多栏布局

栅格系统

栏栅格系统就是利用浮动实现的多栏布局。

多列布局

栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性：

column-count：<integer> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<integer>：用整数值来定义列数。不允许负值
auto：根据 <' column-width '> 自定分配宽度
column-gap：<length> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：设置或检索对象的列与列之间的边框。与border属性类似。
适用于：定义了多列的元素
columns：<' column-width '> || <' column-count '>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<' column-width '>：设置或检索对象每列的宽度
<' column-count '>：设置或检索对象的列数

table布局

display:table

display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)
table-layout 属性用于显示表格单元格、行、列的算法规则
auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决定，算法较慢（在确定最终布局之前要访问表格中所有内容）
fixed ,固定表格布局，接收第一行就可以显示表格，与表格内容无关，允许浏览器更快的对表格进行布局

<table>

table
table可设置宽高，margin、border、padding属性
table宽高默认由内容撑开。
若设置了宽度，宽度默认由里面的td平分。
若给定了某个td的宽度，剩余宽度被其他td平分
table设置高度只起到min-height的作用。
当内容的高度高于设置的高度时，table的高度会被撑高
tr
tr设置的高度只起到min-height的作用，默认会平分table的高度
设置宽度、margin都不起作用
td
td会默认继承tr的高度，且平分table的宽度
给任意td设置了高度，其他td的高度也同样变高，适合多列等高布局
若为设置display:table，则td设置的宽高不能用百分比只能用准确的数值
td设置vertical-align:middle，td元素的所有（除float/position）块级非块级元素都会相对于td垂直居中
td设置text-align:center,td元素的所有非block元素（除float/position）都会相对于td水平居中，block元素虽不居中，但其中的文字或inline元素会水平居中

table为何被摒弃

非语义化、布局代码冗余，以及不好维护改版，表格渲染时导致页面重绘带来的性能问题，现在的css吸取了table布局好的特性模拟table布局。

grid布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，

容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

行和列

上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

网格线

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

弹性布局（Flexbox）

display属性值flex：将对象作为弹性伸缩盒显示

flex：none | <flex-grow> <flex-shrink > || <flex-basis>
功能：设置或检索弹性盒模型对象的子元素如何分配空间
适用于：flex子项

none： none关键字的计算值为: 0 0 auto
<flex-grow>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<flex-shrink>：用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<flex-basis>：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <width> 设置，如果自身的宽度没有定义，则长度取决于内容。

Flex容器可以设置属性flex-flow，取值为row,row-reverse,column,column-reverse四种值

row：显示在一行中
row-reverse：显示在一行中，反转
column：显示在一列中
column-reverse：显示在一列中反转

流式布局（Fluid）

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

REM实现响应式布局

rem是CSS3新引进来的一个度量单位，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，如：
height:2rem;，则高度的大小为32px（字体默认为16px，chrome最小为12px），如果根元素的字体为15px，则结果为30px。
页面中的尺寸都以html元素的font-size为相对单位，为默认设置为20px，如果需要一个200px的大小则使用10rem，然后当屏幕大小变化时通过javascript或media queries修改字体大小。