css-9. 标准文档流

特征

• 文本类的内容有空白折叠现象
• 文本类的内容基于底线(中文)或baseline基线(英文)对齐
• 文本类的内容超过了盒子宽度会自动换行

标签分类

标签可以以两种方式分类：

• 容器级和文本级
• 块级和行内级

块级元素

所有容器级标签和p标签都是块级元素，eg：div，h1-h6，p

• 可以设置宽高
  • 如果没有设置宽度，宽度将会是父级宽度的100%。
  • 如果设置了宽高，容器宽高将是设置的大小。如果内容宽度大于所设置的宽高，容器实际宽高将时内容的宽度（容器width和height还是设置的宽高）
• 默认具有换行符（独占一行）
• 如果是非块级元素，可以使用display:block将其设置了块级元素

行内元素

除了p标签之外的行内级元素，eg：a、span、lable

• 不可以设置宽高，由内容撑开
• 行内元素设置的margin、padding上下不生效（不占位置，但背景色能呈现）
• 默认不具有换行符
• 如果是非行内元素，可以使用display:inline将其设置了行内元素

行内块元素

eg：img、input、textarea

• 可以设置宽高（input有默认宽高）
• 默认不具有换行符
• 使用display:inline-block可以转换为行内块元素

img、input标签属于什么元素：[参考](#### 特征

• 文本类的内容有空白折叠现象
• 文本类的内容基于底线(中文)或baseline基线(英文)对齐
• 文本类的内容超过了盒子宽度会自动换行

标签分类

标签可以以两种方式分类：

• 容器级和文本级
• 块级和行内级

块级元素

所有容器级标签和p标签都是块级元素，eg：div，h1-h6，p

• 可以设置宽高
  • 如果没有设置宽度，宽度将会是父级宽度的100%。
  • 如果设置了宽高，容器宽高将是设置的大小。如果内容宽度大于所设置的宽高，容器实际宽高将时内容的宽度（容器width和height还是设置的宽高）
• 默认具有换行符（独占一行）
• 如果是非块级元素，可以使用display:block将其设置了块级元素

行内元素

除了p标签之外的行内级元素，eg：a、span、lable

• 不可以设置宽高，由内容撑开
• 行内元素设置的margin、padding上下不生效（不占位置，但背景色能呈现）
• 默认不具有换行符
• 如果是非行内元素，可以使用display:inline将其设置了行内元素

行内块元素

eg：img、input、textarea

• 可以设置宽高（input有默认宽高）
• 默认不具有换行符
• 使用display:inline-block可以转换为行内块元素

img、input标签属于什么元素：参考

设置隐藏元素

• display:none; 设置元素消失不占位
• visibility:hidden; 设置元素消失占位
• opcity:0; 设置元素不透明度为0，元素消失占位

轮播图应用到隐藏元素

附：overflow:hidden是设置溢出隐藏）

设置隐藏元素

• display:none; 设置元素消失不占位
• visibility:hidden; 设置元素消失占位
• opcity:0; 设置元素不透明度为0，元素消失占位

轮播图应用到隐藏元素

附：overflow:hidden是设置溢出隐藏