拿到一张设计稿,最先想到的就是如何布局。
垂直布局?水平布局?悬浮?层叠样式?
今天我们来复习一下CSS原生的布局属性——display。
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
.block {display: block}
<span class='block'>span元素1 block</span>
<span>span元素2</span>
span元素默认是不换行的,加上block属性之后,有了换行效果。
行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。 不管你是什么控件,只要加上display:inline;样式就会自动变为同一个段落。
.inline {display: inline}
<p class='inline'>这是一个</p>
<p class='inline'>inline元素!</p>
p元素默认是换行的,加上inline属性之后,变成了一行。
行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
.inline-block {display: inline-block}
<div>
<span>span元素2</span>
<!-- inline-block -->
<p class='inline-block'>span元素3</p>
<span>span元素4</span>
</div>
p元素默认是换行的,加上inline-block属性之后,变成了一行,并且可以设置宽高和边距。
隐藏该元素。
跟随父元素的display样式;父元素block它就block,父元素inline它就inline
.inline {display: inline}
.inherit {display: inherit}
<!-- inherit -->
<div class='inline'>父元素 inline元素
<div class='inherit'>子元素inherit元素</div>
<div>子元素不是inherit元素</div>
</div>
div元素默认是换行的,因为父元素是inline,设置了inherit的子元素跟随父元素的属性inline,与父元素成为同一行。
值 | 描述 |
---|---|
list-item | 此元素会作为列表显示 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>) |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>) |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>) |
table-row | 此元素会作为一个表格行显示(类似 <tr>) |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>) |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
示例汇总:试一试
<html>
<head>
<style type="text/css">
.inline {display: inline}
.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.list-item {display: list-item}
.run-in {display: run-in}
.compact {display: compact}
.marker {display: marker}
.table {display: table}
.inline-table {display: inline-table}
.table-row-group {display: table-row-group}
.table-header-group {display: table-header-group}
.table-footer-group {display: table-footer-group}
.table-row {display: table-row}
.table-column-group {display: table-column-group}
.table-column {display: table-column}
.table-cell {display: table-cell}
.table-caption {display: table-caption}
.inherit {display: inherit}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<!-- inline -->
<p class='inline'>这是一个</p>
<p class='inline'>inline元素!</p>
<!-- none -->
<div class='none'>div 元素的内容不会显示出来!</div>
<div>
<!-- block -->
<span class='block'>span元素1 block</span>
<span>span元素2</span>
<!-- inline-block -->
<p class='inline-block'>span元素3</p>
<span>span元素4</span>
</div>
<br/>
<!-- inherit -->
<div class='inline'>父元素 inline元素
<div class='inherit'>子元素inherit元素</div>
<div>子元素不是inherit元素</div>
</div>
<br/>
<!-- list-item -->
<span>span元素0 非list-item</span>
<span class='list-item'>span元素1 list-item</span>
<span class='list-item'>span元素2 list-item</span>
<span>span元素3 非list-item</span>
<span>span元素4 非list-item</span>
</body>
</html>