1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 </script> 9 10 <style type="text/css"> 11 .box1{ 12 background-color: #bfa; 13 /* 14 内联元素不能设置宽高width height 15 16 将一个内联元素变成块元素 17 通过display样式可以修改元素的类型 18 可选值 19 inline 可以将一个元素作为内联元素显示 20 block 可以将一个元素设置块元素显示 21 inline-block 将一个元素转换为行内块元素 22 既有行内元素的特点又有块元素的特点，可以设置宽高又不会独占一行 23 none 不显示元素，并且元素不会在页面中继续占有位置 24 */ 25 display: block; 26 width: 100px; 27 height: 100px; 28 } 29 .box{ 30 display: inline-block; 31 width: 100px; 32 height: 100px; 33 background-color: aquamarine; 34 } 35 /* 36 visibility: 37 可以用来设置元素的隐藏和显示的状态 38 可选值 39 visible 默认值，元素默认会在页面显示 40 hidden 元素会隐藏不显示 41 使用visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会保留 42 而使用display:none;隐藏的元素不会在也页面中显示，位置不会保留 43 */ 44 </style> 45 46 </head> 47 <body> 48 <a href="#" class="box1">123</a> 49 <span>123</span><br /> 50 <a href="#" class="box">123</a> 51 <span>123</span> 52 </body> 53 </html>
1.内联元素(inline)：
a – 锚点
abbr – 缩写
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
span – 常用内联容器，定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框
2.块级元素(block)：
address – 地址
blockquote – 块引用
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – h6 标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li
3.内联元素与块级元素的区别
内联元素：
1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，padding，但只在水平方向有效。
块状元素：
1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin，padding
内联块状元素inline-block：
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
4.互相之间的区别
区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
参考链接：https://blog.csdn.net/ycq521131/article/details/82590308