day12-CSS-显示模式

div和span标签

• 1.什么是div
  • 作用：一般用于配合CSS完成网页的基本布局
• 2.什么是span
  • 作用：一般用于配合CSS修改网页中的一些局部信息
• 3.div和span有什么区别
  • 1️⃣div独占一行；span不会独占一行
  • 2️⃣div是容器级标签；span是文本级别标签
    • 容器级标签和文本级别标签的区别
      • 容器：嵌套其他标签--div h ul ol dl li....
      • 文本：只能嵌套文字、超链接、图片--span p bus strong em ins del
      • 注意点：开发中一般都是嵌套在div中，按照组标签来嵌套

CSS元素的显示模式

• 概念：在HTML中将标签分为容器级标签和文本级标签；CSS中将标签分为块级元素和行内元素
• 1.什么是块级元素、行内元素？
  • 块级：独占一行p div h ul ol dl dt dd
  • 行内：不会独占一行span bus strong em ins del
  • 文本中除了p都是行内
• 2.块级和行内元素的区别
  • 1️⃣块级独占一行；行内不会独占一行
  • 2️⃣块级如果没有设置宽度，默认和父控件一样宽；如果设置了宽高就按设置的显示
  • 3️⃣行内如果没有设置高度，默认和内容一样宽，即使设置了高宽也不会有反应
• 3.行内块级元素
  • 为了能够让元素既不会独占一行，又可以设置高度和宽度就出现了行内块级元素
  • 例如img

CSS元素显示模式转换

• 每个元素都有display属性
• inline--设成行内
• block--设成块级元素
• inline-block--设成行内块级

小练习---模仿百度首页