html -- 塊元素、內聯元素、內聯塊元素練習

時間 2020-03-07

標籤 html 元素內聯練習欄目 HTML 简体版

原文原文鏈接

html標籤(也叫元素)大概能夠統分爲三大類，塊元素、內聯元素、內聯塊元素。css

塊元素html

1，經常使用的塊元素：ul、li、div、p、dl、dt、dd、h1~h6。網絡

2，塊元素支持全部的樣式。字體

3，盒子獨佔據一行，即便設置了寬度。網站

4，若是沒有設置寬度，默認寬度爲父元素的100%。url

內聯元素spa

1，經常使用的內聯元素：span、a、em、i、b、strong。code

2，只支持部分樣式，好比說，不支持寬、高、margin上下、padding上下。orm

3，盒子並在一行。htm

4，寬高由內容掙開。

5，若是代碼換行，盒子之間會產生間距。

6，子元素是內聯元素的話，能夠經過設置這個子元素的父元素的text-align屬性來設置水平對齊方式。

解決第 4 點問題

1，取消代碼間的換行，太麻煩了，不可取。

2，將這個內聯元素的父元素的font-size值設爲0，內聯元素自身再設置font-size。

內斂塊元素

1，支持全部的樣式。

2，盒子並在一行。

3，代碼換行，盒子會產生間距。

4，子元素是內聯元素的話，能夠經過設置這個子元素的父元素的text-align屬性來設置水平對齊方式。

從某種程度上能夠說內聯塊元素結合了塊元素和內聯元素的優勢，雖然現有元素沒有歸於此類別的，可是能夠經過display屬性來實現塊元素、內聯元素、內斂塊元素的相互轉化。

display屬性

1，none 隱藏元素，且不佔位置。

2，block 做爲塊元素顯示。

3，inline 做爲行內元素顯示。

4，inline-block 做爲行內塊元素顯示。

在實際開發中，塊元素使用的較多，因此常常把內聯元素轉化爲塊元素，少許轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。仍是要視狀況而定。

實際練習中遇到的問題：

1，內聯元素設置寬、高、margin、padding無效。

2，經過設置內聯元素或者內聯塊元素的父元素的font-size爲0，內聯元素或內聯塊元素的font-size爲字體大小，來解決代碼換行帶來的間距問題。

3，經過設置盒子的行高line-height和盒子高度height爲同樣的值，使得盒子內文字垂直居中。

4，ul、li、a等標籤都有本身的屬性，要根據須要調整。

練習代碼：

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css練習一</title>

    <style>
        .con_page{
            height: 40px;
            width: 600px;
            border: 1px solid rgb(128, 128, 125);
            text-align: center;
            list-style: none;
            padding: 0px;
            margin: 0px auto;
            font-size: 0px;
        }

        .con_page li{
            margin: 7px 5px;
            display: inline-block;
            font-size: 12px;
            /* height: 26px; */
            /* background-color: gold; */
        }
        
        .con_page li a{       
            display: inline-block;
            height: 26px; 
            padding: 0px 10px;
            line-height: 26px;
            background-color: gold;           
            text-decoration: none;
            color: black;
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }

        .con_page a:hover{
            background-color: red;
            color: white;
        }

        .menu{
            list-style: none;
            margin: 50px auto 0px;
            height: 40px;
            width: 958px;
            border: 1px solid #666;
            padding: 0px;
            text-align: center;
            font-size: 0px;
        }
        .menu li{
            display: inline-block;
            font-size: 14px;
            line-height: 40px;
        }
        .menu li a{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font:normal 14px/40px 'Microsoft YaHei';
            text-decoration: none;
            color: #000;
        }
        .menu li span{
            display: inline-block;
            height: 40px;
            font:normal 14px/40px 'Microsoft YaHei';
            margin: 0px 20px;
        }

        .menu li a:hover{
            color: tomato;
        }

        .menu2{
            list-style: none;
            margin: 50px auto 0px;
            height: 40px;
            width: 960px;
            border: 1px solid #666;
            padding: 0px;
            background-color: #55a8ea;
            position: relative;
            
        }
        .menu2 li{
            width: 100px;
            height: 40px;
            /* text-align: center; */
            float: left;
        }
        .menu2 li a{
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            font-family: 'Microsoft YaHei';
            text-decoration: none;
            color: #fff;
        }
        .menu2 li a:hover{
            background-color: #00619f;
        }

        .menu2 .new{
            width: 33px;
            height: 20px;
            background: url(./images/new.png) no-repeat;
            position: absolute;
            left: 334px;
            top: -8px;
        }

    </style>
</head>
<body>
    
    <ul class="con_page">
        <li><a href="">上一頁</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li ><span>...</span></li>
        <li><a href="">17</a></li>
        <li><a href="">18</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li><a href="">下一頁</a></li>
    </ul>

    <ul class="menu">
        <li><a href="">首頁</a></li>
        <li><span>|</span></li>
        <li><a href="">網站建設</a></li>
        <li><span>|</span></li>
        <li><a href="">程序開發</a></li>
        <li><span>|</span></li>
        <li><a href="">企業VI</a></li>
        <li><span>|</span></li>
        <li><a href="">案例展現</a></li>
        <li><span>|</span></li>
        <li><a href="">聯繫咱們</a></li>
        <li><span>|</span></li>
        <li><a href="">網絡營銷</a></li>
    </ul>

    <ul class="menu2">
        <li><a href="">首頁</a></li>
        <li><a href="">網站建設</a></li>
        <li><a href="">程序開發</a></li>
        <li><a href="">企業VI</a></li>
        <li><a href="">案例展現</a></li>
        <li><a href="">聯繫咱們</a></li>
        <li><a href="">網絡營銷</a></li>
        <li class="new"></li>
    </ul>

</body>
</html>

相關標籤/搜索

每日一句

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

html -- 塊元素、內聯元素、內聯塊元素 練習

html -- 塊元素、內聯元素、內聯塊元素練習