行内元素与块级元素的特点与不同

网页布局

在学习css的各项属性值之前,我希望大家能先理解清楚行内元素与块级元素的特点与不同点,这对网页的布局真的十分重要,在我没有理解之前对网页布局的认识就十分模糊
大家可以将html网页看做是多分割组成的网页,每个分割都是多行组成的,事实上很多元素看起来不再同一水平线上但都在同一行

行内元素

行内元素顾名思义就是处在一行内的元素,这样的元素不会自己一个人占满一行,而是和其他行内元素一起分享一行
如span标签,这些元素可以存在于同一行,并且只有当一行充满时才会折行,这些元素无法设置宽高,他们的宽高由文字内容大小自适应,并且上下内外边距的设定对他们也无效(当他们单独存在一行时可以)

块级元素

块级元素和行内元素不同,无论设定宽高与否他都会独占一行,如div,ul,块级元素可以设定上下内外边距

行内块级元素具有行内元素和块级元素的特性如img标签和imput标签，他和行内元素一样，分享一行，在行末折行,并且与块级元素一样可以设置宽高和上下内外边距

通过css设定元素类型

其实行内与块级元素都可以通过css进行设置
属性:display
属性值:block(块级) block-inline(行内块级) inline(行内)

<span style="display:block;width:200px;height:100px;baclground-color:yellow">这是span标签</span>
<!-- 这里将span设置为块级元素,这样做就可以像块级元素一样设置它的宽高了 -->
<div style="display:inline">这是div</div><span>这是span</span>
<!-- 这里将div设置为行内元素他就会与span共同分享一行了 -->