代码改变世界

CSS块级元素和行内元素

2020-03-17 17:06  zyueer  阅读(75)  评论(0编辑  收藏

1.块级元素

  • 独占一行,不能与其他元素并列。
  • 可以设置  宽  高。不设置宽度会默认为 父级元素的100%。

举例:<div> <hr> <列表 ul>  <表格 table>  <标题 h>  <表单 form>   <p>

2.行内元素

与其他 行内元素 并排,不能设置宽高。高度等于字体大小。

举例:<a> <i> <b> <br> <img> <input> <label> </>

注:突然发现 可以这样的 </>就是行内元素。

在HTML中将标签分为:文本级、容器级两大类:

  • 文本级:p、span、a、b、i、u、em
  • 容器级:div、h系列、li、dt、dd

CSS元素分类:

  • 块级元素:div、h系列、li、dt、dd、p   所有的容器级标签都是块级元素
  • 行内元素:span、a、b、i、u、em      所有文本级标签,都是行内元素,除了p,p是个文本级,但是个块级元素

3.块级和行内互换

display: inline;   将块级元素转换成行内元素

display: block;   将行内元素转换成块级元素