CSS基础-CSS的显示模式

Div 和 Span 标签

什么是 Div?

  • 作用：一般用于配合 css 完成网页的基本布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span标签</title>
    <style>
        .header {
            width: 980px;
            height: 100px;
            background: red;
            margin: auto;
            margin-bottom: 10px;
        }

        .content {
            width: 980px;
            height: 500px;
            background: green;
            margin: auto;
            margin-bottom: 10px;
        }

        .footer {
            width: 980px;
            height: 100px;
            background: blue;
            margin: auto;
        }

        .logo {
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }

        .nav {
            width: 600px;
            height: 50px;
            background: yellow;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 460px;
            background: purple;
            float: left;
            margin: 20px;
        }

        .article {
            width: 650px;
            height: 460px;
            background: deepskyblue;
            float: right;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>

什么是 Span?

  • 作用：一般用于配合 css 修改网页中的一些局部信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span标签</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>
</body>
</html>

Div 和 Span 有什么区别?

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

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

  • 容器级的标签中可以嵌套其它所有的标签
  • 常见容器级的标签：div、h、 ul、ol、dl、li、dt、dd、...
  • 文本级的标签中只能嵌套文字 / 图片 / 超链接
  • 常见文本级的标签：span、p、buis、strong、em、ins、del、...

注意点：

不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在 div 中, 或者按照组标签来嵌套(ul > li、ol > li、dl > dt + dd)

CSS 的元素显示模式

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

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

  • 块级元素会独占一行
  • 行内元素不会独占一行
  • 常见的容器级标签：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

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

  • 块级元素：独占一行
  • 如果没有设置宽度, 那么默认和父元素一样宽
  • 如果设置了宽高, 那么就按照设置的来显示
  • 行内元素：不会独占一行
  • 如果没有设置宽度, 那么默认和内容一样宽
  • 行内元素是不可以设置宽度和高度的
  • 行内块级元素
  • 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
  • 不独占一行, 并且可以设置宽高

CSS 元素的显示模式与转换

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

  • 设置元素的 display 属性

display 属性的取值

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

快捷键：

  • di display：inline;
  • db display：block;
  • dib display：inline-block;
posted @   BNTang  阅读(148)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示