display的設置

時間 2019-11-11

標籤 display 設置欄目 CSS 简体版

原文原文鏈接

標準流
HTML元素在標準情況下的定位方式
行內元素在同一行內橫向排列
塊級元素佔滿整個一行，在頁面中豎向排列
元素不會移動到其它地方去，對於嵌套的元素盒子也是嵌套的關係css

行內元素的盒子
行內元素的盒子永遠只能在瀏覽器中獲得一行高度的空間（行高由line-height屬性決定
若是沒設置該屬性，則是內容默認的高度），若是給它設置上下border,margin,padding等值
致使其盒子的高度超過行高，那麼它的盒子上下部分將和其餘元素的盒子重疊
所以，不推薦對行內元素直接設置盒子屬性，通常先設置行內元素幾塊級元素顯示，再設置它的盒子屬性。html

display屬性
經過display屬性能夠控制元素是以行內元素顯示仍是以塊級元素顯示，或不顯示
display:block|inline|none|list-item（行塊切換代碼）
inline-block行內塊元素（css2.1新增的值）瀏覽器

block元素
block元素的特色是：
老是在新行上開始
高度，行高以及頂和底邊距均可控制
寬度缺省是它的容器的100%，除非用width設定一個寬度
<div> <p> <h1> <form> <ul> <li>是塊元素的例子spa

inline元素
inline元素的特色是：
和其它元素都在一行上
高，行高及頂和底邊距不可改變
寬度就是它的文字或圖片的寬度，不可改變
<span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子3d

inline-block行內塊元素
inline-block屬性值，既是行元素，但又有塊元素的屬性。
若是想具備行元素一排的屬性，也具備塊元素可設置寬高的屬性，咱們能夠設置display的屬性爲inline-blockorm

隱藏元素display:none
當某個元素被設置成了隱藏元素以後，瀏覽器會徹底忽略掉這個元素，該元素將不會被顯示
也不會佔據文檔中的位置。像title元素默認就是此類型
比較visibility:hidden
製做下拉菜單、Tab面板等有時就須要用display:none把菜單或面板隱藏起來。htm

咱們通常使用無序列表來作菜單，常常使用display改變行和塊的屬性，由於ul li都是塊元素圖片

}
</style>input

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display寫菜單</title>
    <style>


       .nav
       {
           list-style: none;/*去除ul的效果*/
       }
        .nav li
        {
          background-color: aquamarine;
            font-size: 20px;
            text-align: center;
            width: 100px;
            height: 30px;
            display: inline-block;
            border: 2px black solid;

        }
        .nav li :hover{ background-color: aliceblue}
        /*
        a:link    {color:blue;}
       a:visited {color:blue;}
       a:hover   {color:red;}
       a:active  {color:yellow;}

        */
    </style>

</head>
<body>

<ul class="nav">

    <li ><a href="#">首頁</a></li>
    <li ><a href="#">新聞</a></li>
    <li ><a href="#">娛樂</a></li>
    <li ><a href="#">體育</a></li>
    <li ><a href="#">財經</a></li>

</ul>
</body>
</html>

相關標籤/搜索

每日一句

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