admin管理员组

文章数量:1794759

inline

inline

一、块级元素和内联（行内）元素的特点

块级元素
1. 独占一行
2. 可以设置属性：width、height、margin-top和margin-bottom
内联元素
1. 多个元素在一行显示
2. 设置属性：width、height、margin-top、margin-bottom无效
补充：对于border、padding、margin-left、margin-right块级元素和内联元素设置后都有效，所以以上的区别中写的是width、height、margin的垂直方向设置margin-top、margin-bottom。

了解内容：以下是HTML中的所有块级元素：

<address>
联系方式信息。
<article> HTML5
文章内容。
<aside> HTML5
伴随内容。
<blockquote>
块引用。
<dd>
定义列表中定义条目描述。
<div>
文档分区。
<dl>
定义列表。
<fieldset>
表单元素分组。
<figcaption> HTML5
图文信息组标题
<figure> HTML5
图文信息组 (参照 <figcaption>)。
<footer> HTML5
区段尾或页尾。
<form>
表单。
<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)
标题级别 1-6.
<header> HTML5
区段头或页头。
<hgroup> HTML5
标题组。
<hr>
水平分割线。

<ol>
有序列表。
<p>
行。
<pre>
预格式化文本。
<section> HTML5
一个页面区段。
<table>
表格。
<ul>
无序列表。

二、 display属性

display 属性可以设置元素外部显示类型元素的外部显示类型将决定该元素在流式布局中的表现。

（注意：设置块级元素的外部显示类型display：inline;不是把块级元素变成了内联元素，它本身还是块级元素（见上文所有的块级元素），只是它具备了内联元素的显示特点。

那么外部显示类型display: inline-block; 的显示特点是什么呢？从名字上看，它应该是具备了块级和内联元素的特点，没错，它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点

display: inline代码及显示效果

这里我使用了内联元素span，其display默认值是inline。因此，不需要我显示的指定该值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display: inline</title><style>span {width: 50px;height: 50px;margin-top: 20px;margin-bottom: 20px;background-color: red;}div {background-color: yellow;}</style></head>
<body><div><span>Hello HTML</span><span>Hello HTML</span><span>Hello HTML</span></div>
</body>
</html>

如图所示，满足了内联元素的特点：多个元素在一行显示，设置属性：width、height、margin-top、margin-bottom无效

display: block代码及显示效果

仅仅将span替换为了p元素，样式设置没变。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display: block</title><style>p {width: 50px;height: 50px;margin-top: 20px;margin-bottom: 20px;background-color: red;}div {background-color: yellow;}</style></head>
<body><div><p>hello HTML</p><p>hello HTML</p><p>hello HTML</p></div>
</body>
</html>

如图所示，满足了块级元素的特点：每个元素独占一行，设置属性：width、height、margin-top、margin-bottom有效

display: inline-block 用于内联元素

这里我对span元素的样式添加了display: inline-block

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display: inline</title><style>span {/*添加display: inline-block;*/display: inline-block;width: 50px;height: 50px;margin-top: 20px;margin-bottom: 20px;background-color: red;}div {background-color: yellow;}</style></head>
<body><div><span>Hello HTML</span><span>Hello HTML</span><span>Hello HTML</span></div>
</body>
</html>

如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display: block</title><style>p {display: inline-block;width: 50px;height: 50px;margin-top: 20px;margin-bottom: 20px;background-color: red;}div {background-color: yellow;}</style></head>
<body><div><p>hello HTML</p><p>hello HTML</p><p>hello HTML</p></div>
</body>
</html>

display: inline-block 用于块级元素

这里我对p元素的样式添加了display: inline-block

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display: inline-block</title><style>p {/*添加display: inline-block;*/display: inline-block;width: 50px;height: 50px;margin-top: 20px;margin-bottom: 20px;background-color: red;}div {background-color: yellow;}</style></head>
<body><div><p>hello HTML</p><p>hello HTML</p><p>hello HTML</p></div>
</body>
</html>

如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点

本文标签： inline

版权声明：本文标题：inline 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1696173569a319348.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。