H5前端开发学习笔记——0x11CSS显示模式

CSS显示模式

• 课时90 div和span标签(掌握)
• 课时91 CSS元素显示模式(掌握)
• 课时92 CSS元素显示模式转换(掌握)
• 课时93 百度首页(理解)

div和span标签

什么是div

一般用于配合CSS完成网页的基本布局

什么是span

一般用于配合CSS修改网页中的局部信息

两者的区别

• div会独占一行，span不会独占一行
• div是一个容器级别的标签，span是一个文本级别的标签

容器级的标签和文本级的标签

• 容器级的标签可以嵌套任何标签
• 文本级的标签只鞥嵌套文字、超链接、图片

注意点

那些标签是文本级的、哪些标签是容器级的没必要记忆，企业开发中，嵌套都是嵌套在div中的，或者嵌套在组标签中

CSS元素显示模式

在HTML中，所有标签都分为容器级和文本级，在css也分两类，分为块级元素和行内元素

块级元素和行内元素特点

块级标签会独占一行，行内元素不会

• 容器级标签
  • div h ul ol dl li dt dd ...
• 文本级标签
  • span p buis stong em ins del ...
• 块级元素(所有的容器级标签都是块级元素)
  • div h ul ol dl li dt dd ...
• 行内元素(除了p以外的全部文本级元素)
  • span buis stong em ins del ...

块级元素与行内元素的区别

1. 块级元素
   • 独占一行
   • 若没有设置宽度，默认和父元素一样宽
   • 若设置宽高，就按照设置显示
2. 行内元素
   • 不独占一行
   • 若没有设置宽度，默认和内容一样宽
   • 行内元素是不可以设置宽度和高度的
3. 行内块级元素
   • 为了能够让元素既能够不独占一行，又可以设置宽高，才有了这个概念

CSS元素显示模式转换

如何转换

设置元素的display属性

取值

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

快捷键

di————display: inline;

db————display: block;

dib————display: inline-block;