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;
        width:100px;
        height:100px;
    }
    .cc {
        background:blue;
        width: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>

posted @ 2017-11-26 15:58 琴酒网络阅读(744) 评论(0) 收藏举报

刷新页面返回顶部