CSS_定位

position屬性

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

fixed：生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

relative：生成相對定位的元素，相對于其正常位置進行定位。是以，”left:20” 會向元素的 LEFT 位置添加 20 像素。

static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit：規定應該從父元素繼承 position 屬性的值。

相對定位

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

position:relative;

将 top 設定為 100px，框出現在在原位置頂部下面 100 像素的地方。

将 left 設定為 50 px，那麼會在元素左邊建立 50 像素的空間，也就是将元素向右移動。

<html>
    <head>
        <style>
            .relative_left{
                position:relative;
                left:50px;
            }
            .relative_top{
                position:relative;
                top:100px;
            }
            div{
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="relative_left"> 這是一個相對定位的段落，left:50</div>
        <div>這是一個普通段落</div>
        <div class="relative_top"> 這是一個相對定位的段落，top:100px</div>
    </body>
</html>

絕對定位

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對于最初的包含塊。

<html>
    <head>
        <style type="text/css">
            .absolute{
                position:absolute;
                left:200px;
                top:200px;
            }
        </style>
    </head>
    <body>
    <p class="absolute">這是一個絕對定位的段落,他的位置是相對于原點(200,200)</p>
    <div style="position:absolute;left:100px;top:100px;">
        <p class="absolute">這是一個絕對定位的段落，他相對于div的位置是(200,200),實際位置應該是(300,300)</p>
    </div>

    </body>
</html>

是以絕對定位的位置也是相對的，相對于父元素的位置

z-index 屬性

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。

元素可擁有負的 z-index 屬性值。

<html>
    <head>
        <style type="text/css">
            .z-index{
                position:absolute;
                left:10px;
                z-index:-1;
            }
        </style>
    </head>
    <body>
    <img  class="z-index" src="素材/1.png"><img>
    <p>這是一個普通段落</p>

    </body>
</html>

浮動

float

可能的值：

值	描述
left：	向左浮動
right：	向右浮動
none：	不浮動，預設值
inherit：	繼承

clear

clear 屬性規定元素的哪一側不允許其他浮動元素。


left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	預設值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

<html>
    <head>
        <style type="text/css">
            .a{
                float:left;
                clear:both;
                width:200;
                height:200;
                background-color:green;
            }
            .b{
                float:left;
                clear:both;
                width:200;
                height:200;
                background-color:blue;
            }
            .d{
                float:left;
                clear:both;
                width:200;
                height:200;
                background-color:gray;
            }
        </style>
    </head>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="d"></div>
    </body>
</html>

如果需要完成以下的效果，可以在第二段之前加上一個外邊距，将第二段擠到下方區域

當div中的元素都是浮動的時，因為内部元素不占據空間，是以div會變得非常小，并且不可見，為了看到div的效果，需要加上一個看不見的clear标記

效果如圖：

不過，還有一種法法可以避免這種問題，就是講div進行浮動，這樣div中就會顯示出真實的大小。但是這樣會影響下一個元素的樣式。

<!--使用沒有意義的clear元素-->
<html>
    <head>
        <style type="text/css">
            .news {
                 background-color: yellow;
                 border: solid 1px black;
            }

            .news img {
                float: left;
            }

            .news p {
                 float: right;
            }

        </style>
    </head>

    <body>
        <div class="news">
            <img src="素材/1.png" />
            <p>some text</p>
            <!--沒有意義的标記，但是可以看到浮動的div-->
            <div style="clear:both"></div>
        </div>
    </body>
</html>

display顯示屬性

定義建立布局時元素生成的顯示框類型

none: 此元素不會被顯示。

block: 此元素将顯示為塊級元素，此元素前後會帶有換行符。

inline: 此元素會被顯示為内聯元素，元素前後沒有換行符。預設。

inline-block: 行内塊元素。（CSS2.1 新增的值）

list-item: 此元素會作為清單顯示。

run-in: 此元素會根據上下文作為塊級元素或内聯元素顯示。

compact: CSS 中有值 compact，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。

marker: CSS 中有值 marker，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。

table: 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。

inline-table: 此元素會作為内聯表格來顯示（類似<table>），表格前後沒有換行符。

table-row-group: 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。

table-header-group: 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。

table-footer-group: 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。

table-row: 此元素會作為一個表格行顯示（類似 <tr>）。

table-column-group: 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。

table-column: 此元素會作為一個單元格列顯示（類似 <col>）

table-cell: 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）

table-caption: 此元素會作為一個表格标題顯示（類似 <caption>）

inherit: 規定應該從父元素繼承 display 屬性的值。

常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

常見的内聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

<html>
<head>
    <style>
        .s{
            display:block;
        }
        .s2{
            display:inline;
        }
        p{
            background:green;
        }
    </style>
</head>

<body>

<p >這是一個普通的段落</p>
<p class="s">這是一個塊級段落</p>
<p class="s2">這是一個内聯段落<p>

</body>
</html>

可見p元素是一個塊級元素

<html>
<head>
    <style>
        .s{
            display:block;
        }
        .s2{
            display:inline;
        }
        span{
            background:green;
        }
    </style>
</head>

<body>

<span >這是一個普通的段落</span>
<span class="s">這是一個塊級段落</span>
<span class="s2">這是一個内聯段落<span>
<span>這是一個普通段落</span>

</body>
</html>

塊級段落前後會自帶換行，而内聯元素不會，他們會顯示在一行

内聯元素不能定義寬度

inline-block與block的差別在于inline-block可以控制大小，而且顯示時像内聯元素一樣沒有換行，排列在同一行中。

CSS_定位

position屬性

相對定位

絕對定位

z-index 屬性

浮動

float

clear

display顯示屬性

繼續閱讀

一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑

前端學習之路---移動web開發（二）

css雪碧圖（css sprite）

移動端touch事件和滑鼠事件

Angular——子產品懶加載

在2016年如何學習JavaScript？

實用css技巧——清除浮動方法總結

css3中的結構僞類選擇器

圖檔下載下傳圖檔放大

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

前端開發日記之window.onload

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？