CSS--"display"属性

最近在整理代码时，突然发现自己虽然知道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