CSS详细基础（四）显示模式

本帖开始介绍CSS中更复杂的内容

目录

一.显示模式

1.行内元素 

2.块级元素

3.行内块元素 

二.背景样式

---

一.显示模式

顾名思义，在CSS中，元素主要有3种显示模式：行内元素、块级元素、行内块元素~

1.行内元素 

常见的行内元素如下：

行内元素的特点：

需要特别说明的是，span与img均为行内元素，理应归纳在同一行；但由于此时三张小米的img标签均被包裹在了一个独立的div内，div这种块级元素的存在使得三个图标必须换行 ~

2.块级元素

常用的块级元素：

 块级元素的特点：

    <div class="purple">我是第一个块元素，可以设置大小，放置其他块元素和文字 <a href="#">我是另一个元素</a></div>
    <div class="skyblue">我是第二个快元素</div>
    <div class="purple">我是第三个块元素</div>

如上的样例充分反应了块级元素与行内元素的主要区别：可自定义自身的长宽，亦或包含其他的块级元素等~ 

总的来说，行内元素与块级元素的区别可以归纳如下：

3.行内块元素 

顾名思义——兼具上两者的共同点~

常见的行内块元素如下：

行内块元素的特点：

    <span class="skyblue change">我是第一个转换型</span>
    <span class="purple change">我是第二个转换型</span>
    <span class="skyblue change">我是第三个转换型</span>

 如上，虽然span是行内元素，但在change类选择器里面定义了让块级转化为块级的语法，因此每个span会独占一行~

 4.转换方式

显示模式的熟练运用非常重要，多加练习才能应对实际开发中的多种需求~

二.背景样式

css的背景：所有background的默认值均为transparent~（即透明）

常用的两个属性：

分别以16进制颜色及背景图片作为底色 ~

如下为div的3个样例样式：

        .one
        {
            background-color: blueviolet;
            width: 250px;
            height: 250px;
        }
        .two
        {
            background-color: burlywood;
            width: 250px;
            height: 250px; 
        }
        .three
        {   
            width: 250px;
            height: 250px;
            background-image: url(img/拜仁.jpg);
           
        }