【零基础学习web前端】CSS布局-display
上篇讲了display:none的用法,现在细讲下display的其他几个属性。
块元素(block)和 行内元素(inline)
块元素可以设置宽高,默认占据一行。行内元素不能设置宽高,宽度由其内容决定。
块元素默认没高度,有内容才会有高度。行内元素默认没高度和宽度,有内容才会有。行内元素虽然不能设置宽高,但是设置成绝对定位(absolute)后,可以设置宽高。
[CSS] 纯文本查看 复制代码 display: block;
display: inline;
块元素尝试获取整个宽度,并在布局中开始新行。一些HTML元素是块元素或块级元素。
<h1>,<p>,<li>,<div>都是块元素
行内元素与其他行内元素保持在同一行中,并且不会开始新行。<a>, <span> 是行内元素的示例。
行内元素和块元素可以用display来更改
如将li块元素显示为行内元素
[CSS] 纯文本查看 复制代码 li{
display: inline;
}
将a元素显示为块元素
[CSS] 纯文本查看 复制代码 a{
display: block;
}
行内块(inline-block)
inline-block值混合块和内联特性。 盒子的外部被视为内联元素。因此,不会为元素创建新行。 框的内部被视为块元素,并应用诸如宽度,高度和边距的属性。
[CSS] 纯文本查看 复制代码 div {
display: inline;
}
a {
display: inline-block;
background: #0b64ea;
color: #fff;
margin: 2em;
width: 6em;
height: 2em;
line-height: 2em;
text-align: center;
}
[HTML] 纯文本查看 复制代码 <div>苏飞论坛</div>
<div>双十二终身会员399 <a href="">赶紧加入</a>
</div>
图示:
|