display属性的作用

如何给实现元素布局在自己想要的位置？

相信大家都知道，我们现在学前端的作用就是为了制造出整洁好看又功能化的浏览器页面。

前端主要包含了三个部分 HTML CSS 和JS

html在浏览器的作用就相当于骨架支撑着整个身体（页面）而CSS就好比人的衣服使得整体变得更加整洁好看 JS就像人的运动神经使得整个浏览器页面对想要实现的功能可以运转自如
如何写好CSS样式是做好页面的基础也是很重要的一部分
那么编写代码的过程中我相信大家都会遇到这样一个问题 元素有时候不在我想要的位置怎么办呢？

首先从学习过程中我们可以知道块级元素(例如div、p、h1-h6、ul、li……)是可以设置宽高内外边距来实现对位置的把控而行类元素(例如span、a、b、em、img(img是特殊的行类元素可以设置宽高))则不可以 所以如果想要实现元素位置的布局我们就要通过设置宽高和内外边距来完成 但行类元素不能设置宽高内外边距 那么怎么实现行类元素的位置布局呢？

我们需要引入一个display属性 同时display包含以下属性值

（图片参考与W3school手册）

常用的属性值有display：none； display：block； display：inline；display：inline-block ；

display:none 隐藏该元素

display:block 显示为块级元素

display:inline 显示为行内元素

display:inline-block 显示为行内块级元素

通过以上属性值 我们便可以做到元素之间的转化

顾名思义 行类块级元素display:inline-block 这个属性简单的来说就是使得元素既有block的属性又有inline的属性 可以设置宽高以及上下边距(行类元素只能设置左右边距不能设置上下边距)

上面是原样式 那么怎么实现把字自由移动到我想要的位置呢？因为li标签是行类元素不可以设置宽高及内外边距这时候我们就可以引入display：inline-block使其变为行类块级元素使其具有块级元素的性质来设置边距达到位置的移动

看到了吧通过这个属性就可以实现行类元素块级元素的转换 通过设置宽高内外边距很好的解决行类元素和块级元素的位置问题使其能自由转换调整位置
（欢迎大家指正补充）