【零基础学习web前端】CSS布局-display - 苏飞论坛

上传

点击文件名下载附件
块元素尝试获取整个宽度，并在布局中开始新行。一些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>

图示：

(, 下载次数: 156)