HTML第三课——css盒子【2】

display

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <p>这是p标签</p>
</body>
</html>

index.css

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;
}

通过上面代码，大家可以看到display意为展示的样式。

我们看到span的样式和另外两个不一样，这是因为span标签的display属性默认是inline而div和p标签默认属性是block。

我们修改样式：

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: block;
}

可以看到

而如果我们把display属性改为inline，再看效果：

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline;
}

我们发现不仅格子变小了，而且都跑到一行去了

这就涉及到了元素的分类，所有元素可分为两类：

块级元素即display的值默认为block的元素：div、p等。特点是占用一行
行内元素即display的值默认为inline的元素：span等。特点是只占自己需要的长度，设置宽和高都不起作用。

我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div>这是div标签1</div>
    <div>这是div标签2</div>
    <span>这是span标签1</span>
    <span>这是span标签2</span>
</body>
</html>

index.css

/*
    px:意为像素;
*/

div, span, p{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline;
}

我们发现我们设置的宽和高都失效了。所以我们现在遇到的问题就是：div可以设置宽高但是要换行，span不换行但不能设置宽和高，那要怎么办呢？我们只需要将display属性值设置为inline-block即可：

/*
    px:意为像素;
*/

div{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline-block;
}

span{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline-block;
}