H5学习之内容分栏、emmet、display总结 - bg7zag 的博客

内容分栏：
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