CSS的显示模式

时间 2019-12-06

标签 css 显示模式栏目 CSS 繁體版

原文原文链接

div与span

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

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>