块级元素和行内元素

1、标签分为两种等级：

1） 块级元素

● 霸占一行，不能与其他任何元素并列

● 能接受宽、高

● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

● 与其他行内元素并排

● 不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

2、块级元素和行内元素的相互转换Markup

<div>春眠</div>

css样式：

div{ 
  display: inline; 
  background-color: #0000FF; 
  width: 300px; 
  height: 300px; 
  margin: 0 auto; 
}

代码演示：

display是“显示模式”的意思，用来改变元素的行内、块级性质

inline就是“行内”。

一旦，给一个标签设置display：inline

那么，这个标签将立即变为行内元素。此时它和一个span无异：

● 此时这个div不能设置宽度、高度；

● 此时这个div可以和别人并排了；

●也没法设置居中

相反可以将行元素转化为块元素  ：

让标签变为块级元素。此时这个标签，和一个div无异：

● 此时这个span能够设置宽度、高度

● 此时这个span必须霸占一行了，别人无法和他并排

● 如果不设置宽度，将撑满父亲

<li>春眠</div>

css样式：

li{ 
  display: block; 
  background-color: #0000FF; 
  width: 300px; 
  height: 300px;
  margin: 0 auto;
  list-style-type: none;
  text-align: center;
  color: #FFFFFF; 
  line-height: 300px; 
}

代码演示：