内容分栏：
HTML：<body>
<article>
<h1></h1>
<section></section>
<section>
<h2></h2>
<p></p>
<p></p>
<p></p>
</section>
<section>
<h3></h3>
<p></p>
<h3></h3>
<p></p>
</section>
</article>
</body>CSS:
article{
margin: 50px;
-moz-column-count: 3;
-webkit-column-count: 3;
/*分栏数量*/
-moz-column-rule: 1px solid gray;
-webkit-column-rule: 1px solid gray;
/*分割线 于边框线不同 分栏线不会将内容区域撑大或压小*/
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}
article h1{
-moz-column-span: all;
/*目前火狐浏览器还不支持分栏合并*/
-webkit-column-span: all;
/*分栏合并*/
}emmet:
HTML:
<body>
<!--
>子代 +同级 ^上一级 ()整体部分 .Class #ID
$排序 @-倒序
-->
<!--nav>ul>li*3-->
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<!--div+p+section-->
<div></div>
<p></p>
<section></section>
<!--div+div>p>span+em^^bq-->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
<!--div(header>ul>li*2>a)+footer>p-->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
</div>
<footer>
<p></p>
</footer>
<!--(div>dl(dt+dd)*3)+footer>p-->
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
<!--div.c11#i3-->
<div class="c11" id="i3"></div>
<!--ul>li.item$*5-->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
<!--h$[title=item$]{Header $}*3-->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<!--ul>li.item$$$*5-->
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
<!--ul>li.item$@-*8-->
<ul>
<li class="item8"></li>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<!--ul>li.item$@3*5-->
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
<!--#header-->
<div id="header"></div>
<!--form#search.wide -->
<form action="" id="search" class="wide"></form>
</body>display总结:
HTML:
<body>
这里是表格前面
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<span>这是表格后面</span>
<div>
<section>affsda</section>
<section>affsda</section>
<section>affsda</section>
</div>
使用list-item能够形成列表项效果 但不能明确表示列表含义
<div class="table">
<div class="caption">这里是标题</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">4</div>
<div class="td">5</div>
<div class="td">6</div>
</div>
<div class="tr">
<div class="td">7</div>
<div class="td">8</div>
<div class="td">9</div>
</div>
</div>
使用table-*能够形成表格效果 但不能明确表格含义
而且合并单元格等表格高级功能无法实现
</body>CSS:
table{
display: inline-block;
/*设置元素的垂直对齐方式*/
vertical-align: middle;
}
section{
display: list-item;
/*变成列表项 注意需要配合下面的样式*/
list-style-type: circle;
margin-left: 2em;
}
.table{
border: 1px solid blue;
display: table;
border-spacing: 0;
border-collapse: collapse;
}
.td{
display: table-cell;
border: 5px solid red;
padding: 5px 20px;
}
.tr{
display: table-row;
/*不加此样式水平边框线合并不正常*/
}
.caption{
display: table-caption;
text-align: center;
}display:none 隐藏 空间也会让出来
visbility:hidden 隐藏 空间会保留
display:inline 行元素
display:inline-block 行内块元素
display:block 块元素
display:inline-table 行内表格
display:list-item 列表项
display:table-* 变成表格
display:flex 弹性布局
text-aglin 文本居中
vertical-aglin 标签自身垂直对齐方式
演示：
内容分栏
emmet
display总结
display.md