04-CSS基础-CSS显示模式

Div和Span标签

div：一般用于配合css完成网页的基本布局。
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>

<style>
        span{
            color: red;
        }
</style>
<p>岁暮阴阳催短景，<span>天涯霜雪霁寒宵</span>。 五更鼓角声悲壮，<span>三峡星河影动摇</span>。</p>

div 和 span 区别:
1）div会单独的占领一行,而span不会单独占领一行；
2）div是一个容器级的标签, 而span是一个文本级的标签；

CSS元素显示模式

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

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

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

CSS元素显示模式转换

设置元素的display属性
display取值：

block 块级
inline 行内
inline-block 行内块级

快捷键

di display: inline;
db display: block;
dib display: inline-block;

水平居中

1.普通文本
2.行内元素
3.图片：行内替换元素
4.行内块级元素 inline-block
在父元素中设置：text-align: center;
5.块级元素
元素本身设置：margin: 0 auto;