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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。