CSS标签的显示模式:inline block inline_block

div和span标签

1.什么是div?

  • 作用: 一般用于配合css完成网页的基本布局

2.什么是span?

  • 作用: 一般用于配合css修改网页中的一些局部信息

3.div和span有什么区别?

  • div会单独的占领一行,而span不会单独占领一行
  • div是一个容器级的标签, 而span是一个文本级的标签

4.容器级的标签和文本级的标签的区别?

  • 容器级的标签中可以嵌套其它所有的标签
  • 文本级的标签中只能嵌套文字/图片/超链接

5.容器级的标签

  • div h ul ol dl li dt dd …

6.文本级的标签

  • span p buis strong em ins del …

注意点
哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

CSS元素显示模式

1.什么是块级元素, 什么是行内元素?

  • 块级元素会独占一行
    行内元素不会独占一行

  • 容器级的标签
    div h ul ol dl li dt dd …
    文本级的标签
    span p buis stong em ins del …

  • 块级元素
    p div h ul ol dl li dt dd

  • 行内元素
    span buis strong em ins del

2.块级元素和行内元素的区别?

  • 块级元素
    独占一行
    如果没有设置宽度, 那么默认和父元素一样宽
    如果设置了宽高, 那么就按照设置的来显示

  • 行内元素
    不会独占一行
    如果没有设置宽度, 那么默认和内容一样宽
    行内元素是不可以设置宽度和高度的

  • 行内块级元素
    为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

CSS元素模式转换

1.如何转换CSS元素的显示模式?

  • 设置元素的display属性

2.display取值

  • block 块级
  • inline 行内
  • inline-block 行内块级

3.快捷键

  • di display: inline;
  • db display: block;
  • dib display: inline-block;