内联元素的显示，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
特点：
和其他元素都在一行上
高度、行高和顶以及底边距都不可改变
宽度就是它的文字或图片的宽度，不可改变
总的来说，内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br”等。
用法：
通常用于特殊布局，在同一行显示多个内容，可以使用内联元素实现，这样不需要将块级元素设置为浮动或绝对定位就可以在一行横排排版。
CSS中常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>。
块级元素的特点：
每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。元素的高度、宽度、行高和顶底边距都是可以设置的。元素的宽度如果不设置的话，默认为父元素的宽度。
行级元素的特点：
可以和其他元素处于一行，不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置。元素的宽度就是它包含的文字、图片的宽度，不可改变。
拓展资料：行级元素与块级元素的转换
可以在css样式中用display:inline将块级元素设为行级元素，同样，也可以用display:block将行级元素设为块级元素。（资料参考：网页链接）
对于初学者来说，node, npm, gulp 等工具会造成不少麻烦，即陷入所谓的“依赖地狱”(dependency hell)。如果你不想用这些工具，可以简单地将 Semantic-UI 预编译好的 CSS 和 JavaScript 文件加入到 HTML 的 <head>元素中，就跟你将 jQuery.min.js 加进去一样。1. 创建 index.html
<html>
<head>
</head>
<body>
<div>
Default
</div>
<div>
<div>
Item A
</div>
<div>
Item B
</div>
<div>
Item C
</div>
</div>
</body>
</html>
现在页面看起来是这样的：
<img src="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_b.png" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_r.png">
2. 下载 CSS 和 JS 文件
Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载： https://github.com/Semantic-Org/Semantic-UI/tree/master/dist
<img src="https://pic4.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_b.png" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic4.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_r.png">
我们目前需要的是 semantic.min.css 和 semantic.min.js 这两个文件，将它们加入到 HTML 的头部：
<head>
<link href="./semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
</head>
你会发现中间多了一个 jquery.min.js，没错，如果你要使用 Semantic-UI 涉及 JavaScript 的高级功能，比如 tab, progress, sticky, API 等，就必须加上 jQuery 库，这是 Semantic-UI 所需要的全部依赖。
这里是一个 jQuery 的链接： https://code.jquery.com/jquery-3.1.1.min.js
3. 为 div 元素设定 ui 类
<body>
<div class="ui button">
Default
</div>
<div class="ui menu">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</div>
</body>
然后去浏览器刷新一下，可以看到：
<img src="https://pic3.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_b.png" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.png">
聪明的你会发现，”ui button” 就代表一个按钮，而“ui menu” 是一个菜单，以此类推，”ui label” 是标签，”ui input” 是输入框，等等。所以使用 Semantic-UI 时，最重要的魔法关键词就是 “ui”。
现在的目录结构(文件夹)也十分直观，易于理解：
<img src="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_b.png" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.png">
这一个例子展示了如何从零开始使用 Semantic-UI，包括目录结构，HTML 的结构。除了按钮，菜单，Semantic-UI 目前支持 50 多种网站中常见的 UI 组件，详细文档请打开官网查阅：https://semantic-ui.com
录制了一个简单的视频，暂时放在 YouTube 上 (英文)，感兴趣的话请点击：
https://www.youtube.com/watch?v=JyBKcfLUabc
