HTML與CSS中的定位我的分享

時間 2019-12-08

標籤 html css 定位我的分享欄目 HTML 简体版

原文原文鏈接

定位

static - 默認值 (幾乎不用,瞭解就能夠)

absolute - 絕對定位,不爲元素預留空間,脫離文檔流:

若是當前元素的父級元素是<body>元素的話 -> 是相對於當前頁面的定位
若是當前元素的父級不是<body>元素的話,父級元素沒有開啓定位 -> 則是相對於頁面的定位
若是當前元素的父級不是<body>元素的話,父級元素開啓定位 -> 則是相對於父級元素定位

<style>
        body {
            margin: 0;/* 去掉瀏覽器默認的外邊距8px */
        }
        div {
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*
                開啓絕對定位
                1.當前元素脫離文檔流
                2.若是不設置位置的偏移量的話，位置不會有任何變化的
             */
            position: absolute;
            /*
                設置定位的偏移量:
                 * 水平方向正值 - 向右移動
                 * 水平方向負值 - 向左移動
                 * 垂直方向正值 - 向下移動
                 * 垂直方向負值 - 向上移動
            */
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
<div></div>
</body>

fixed - 固定定位,不爲元素預留空間:

是相對於窗口來定位元素位置,脫離文檔流

<style>
        body {
            margin: 0;
            height: 1000px;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: #83c44e;
            /* 開啓固定定位 - 相對於瀏覽器窗口的定位 */
            position: fixed;

            left: 100px;
            top: 100px;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: cyan;

            position: absolute;

            left: 500px;
            top: 100px;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

relative - 相對定位,不脫離文檔流

相對定位是相對於自身元素原來的位置的定位

<style>
        body{
            margin: 0;
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: cyan;
            /* 外邊距 */
            margin: 100px;
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: #ffac13;
            /* 外邊距 */
            margin-left: 100px;
            /* 相對定位是相對於自身元素原來的位置的定位 */
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

定位的方式解析圖:
瀏覽器

堆疊

z-index屬性值大的在上方,小的在下方,就是所z-index屬性值大的覆蓋小的

<style>
        body{
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        #d1{

            background-color: cyan;
            /* 開啓絕對定位 */
            position: absolute;
            /* 開啓定位後設置偏移量 */
            left: 150px;
            top: 150px;
            z-index: 2323;
        }
        #d2{
            background-color: #ffac13;

            /* 開啓相對定位 */
            position: relative;
            /* 開啓定位後設置偏移量 */
            left: 50px;
            top:50px;
            z-index:1;
        }
        /*
            必須是當前元素開啓定位的狀況下,z-index屬性纔會有效
                當多個屬性設置z-index屬性時 - 值大的會覆蓋值小的
         */
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

堆疊分析圖:
佈局

繼承於層疊

繼承

繼承就是父級元素的屬性,子級元素使用能夠不用設置直接使用
注意: CSS屬性中不是所用屬性均可以繼承
CSS的樣式屬性:

可繼承的屬性 - 指定元素的樣式,同時做用其後代元素
不可繼承的屬性 - 只能做用在指定的元素

備註: 繼承中有一個inherit值 - 就是是繼承於祖先元素屬性的意思,當子級元素的屬性設置inherit值時表明繼承父級元素使用的屬性值.字體

<style>
        /*
            CSS的樣式屬性:
             1. 可繼承的屬性 - 指定元素的樣式,同時做用其後代元素
             2. 不可繼承的屬性 - 只能做用在指定的元素
         */
        body{
            /*
                頁面中的默認的字體大小爲 16px
                頁面中的默認的顏色爲黑色
             */
            font-size: 148px;
            color: cyan;
        }
        p{
            /*
                inherit值 - 是繼承於祖先元素屬性的意思
                當前樣式屬性的值是繼承於祖先元素
             */
            font-size: inherit;
        }
    </style>
</head>
<body>
<p>一花一世界,一葉一孤城</p>
</body>

繼承於層疊分析圖spa