最近在整理代码时，突然发现自己虽然知道display这个css控制布局的属性，但是了解的并不透彻，比如display：list-item并没有用到过。所以打算整理一下关于这方面的知识，也希望可以给其它人一些帮助。
display：block 指定对象为块级元素。除特殊声明，所有的块级元素开始于新的一行，延展到其容器的宽度（即：width：100%），高宽可以设置。若干个同级块级元素会从上到下一次排列（使用float属性除外） 常见的块级元素：div、p、h1-h6、ol、ul、dl、table、address、blockquote、form 这是一个块级元素 display：inline 指定元素为内联元素，不会单独占据一整行，只是占领自身的宽度和高度所在的空间。若干同级内联元素会从左到右排列（即某个内联元素可以和其它内联元素在同一行），内联元素不可以设置高度和宽度，其高度一般由字体的大小来决定，其宽度由内容的长度控制。内联元素只能设置左右的margin值和左右的padding值，而不能改变上下的margin值和上下的padding值。 常见的内联元素：a、span、br、i、em、strong、label、q、var、cite、code HTML SCSS display：list-item 元素被渲染为列表项呈现的方式，确切的说就像是一个块级元素，但是会生成一个可以被list-style属性进行样式修饰的标记框。只有元素可以具有list-style的默认值。通常将元素重置为默认行为。 display：inherit 从父元素继承display属性 display：table 有两种方法构建表格样式：HTML table 和CSS table。两者最大的区别就是后者通过调整css样式，它可以选择不成为一个表格。 table和HTML元素《table》之间的关系 table对应于HTML元素中的<table>table-header-group对应HTML中的<thead>table-row 对应HTML中的<tr>table-cell对应HTML中的<td> table-row-group 对应于HTML的<tbody>table-footer-group 对应于HTML的<tfoot> table-column-group 对应于HTML的<colgroup> table-column 对应于HTML的<col> table-caption 对应于HTML的<caption> inline-table 表现形式为表格HTML 元素，但是一个内联快而不是块级元素 接下来实际举例子来说明display：table的用处 动态垂直水平对称 动态水平对称 响应式布局 固定的页脚固定的页脚需要满足两个标准：
1、当正文内容不足以超过页面高度时，页脚仍需要固定在页面的底部。
2.一旦正文内容超过页面高度，页脚仍需要正常固定在页面的底部
同时，在这里提一下table-cell
display：table-cell让标签元素以表格单元格的形式呈现，是元素类似于td样式。
设置display：table-cell的元素：
对宽度高度敏感对margin值无反应响应padding属性内容溢出是自动撑开父元素几种用法：
高度不一致的元素垂直居中 两栏布局：可一栏固定，一栏自适应；也可两栏设置宽度。 display：flex 语法：参考阮一峰老师微博http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，老师讲的很好，在这我就不在赘述 实战（这里，几个常见的布局） 1.圣杯布局：页面从上到下，分为三个部分：头部、躯干、尾部。其中躯干又分为三栏：导航、主栏、副栏。 2.输入框的布局 我们通常需要在输入框的前方添加提示（label），后方添加按钮。用一般的布局会有些麻烦，这里介绍一种简单的，只要几句话即可。3.悬挂式布局
有时，主栏的左侧或右侧，需要添加一个图片栏或几个字的文字说明。像朋友圈一样
4.固定底栏
上面也讲过用display：table来固定底栏。这边介绍一种用display：flex来实现。可以对比一下。
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
转载于:https://www.cnblogs.com/yn93/p/8203356.html
