CSS【06】：CSS显示模式

div和Span标签

• 作用：一般用于配合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>

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

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

• div和span有什么区别？
  • div会单独的占领一行，而span不会单独占领一行
  • div是一个容器级的标签，而span是一个文本级的标签
• 容器级的标签和文本级的标签的区别？
  • 容器级的标签中可以嵌套其它所有的标签
• 常见容器级的标签：div、h、ul、ol、dl、li、dt、dd ...
• 文本级的标签中只能嵌套文字、图片、超链接
• 常见文本级的标签：span、p、strong、em、ins、del ...
• 注意点:
  • 不用刻意去记忆哪些标签是文本级的哪些标签是容器级，在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套(ul>li，ol>li，dl>dt+dd)

---

CSS元素显示模式

• 在HTML中HTML将所有的标签分为两类，分别是容器级和文本级
• 在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素（其实还有一类，行内块级）
• 什么是块级元素，什么是行内元素？
  • 块级元素会独占一行
  • 行内元素不会独占一行
• 常见块级元素：p、div、h、ul、ol、dl、li、dt、dd
• 常见行内元素：span、buis、strong、em、ins、del
• 块级元素和行内元素的区别？
  • 块级元素：独占一行，如果没有设置宽度，那么默认和父元素一样宽，如果设置了宽高，那么就按照设置的来显示
  • 行内元素：不会独占一行，如果没有设置宽度，那么默认和内容一样宽，行内元素是不可以设置宽度和高度的
  • 行内块级元素：为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素，不独占一行，并且可以设置宽高

CSS元素显示模式转换

• 通过设置元素的display属性
• display取值
  • block 块级
  • inline 行内
  • inline-block 行内块级