CSS的显示模式

div与span

div与span有什么区别
div单独占一行,span不会单独占一行
div是容器级的标签,而span是一个文本级的标签
容器级的标签有:div , h , ul , ol , dl , li ...
文本级的标签有:span , p , buis , del , em , ins ...
容器级的标签中可以嵌套其它所有标签
文本级的标签中只能嵌套文字/图片/超链接

CSS显示模式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    div {
        display:inline;
    }
    span {
        display:block;
        background:green;
        100px;
        height:100px;
    }
    .cc {
        background:blue;
        200px;
        height:200px;
        display:inline-block;
    }
</style>
</head>
<body>
<!--
在HTML中所有的标签分为两类:容器级与文本级
在CSS中将所有标签分为两类:块级元素与行内元素
1:什么是块级元素,什么是行内元素?
    块级元素独占一行:div , h , ul , ol , dl , li , dt , dd , p
    块级元素如果没有设置宽度就和父级元素一样宽;如果设置了宽高就和设置的一样宽高
    行内元素不会独占一行:span , buis , strong , em , ins , del
    行内元素如果没有设置宽度默认就和内容一样宽
    行内元素是不可以设置宽度和高度的
2:行内块级元素
    为了能够让元素既能够不独占一行,又可以设置宽度和高度,就出现了行内块级元素
3:显示模式的互相转换
    设置元素的display属性:block 块级, inline 行内, inline-block 行内块级
-->
<div>这是DIV</div>
<div>这是DIV</div>
<span>这是SPAN</span>
<span>这是SPAN</span>
<p class="cc">这是P</p>
<b class="cc">这是B</b>
</body>
</html>

  

原文地址:https://www.cnblogs.com/ginvip/p/7899203.html