跳到主要内容

CSS元素显示模式

div标签​

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

<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>

<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>

span标签​

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

<style>
        span{
            color: red;
        }
</style>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

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;」