CSS之定位與脫離文件流與過渡

阿新 • • 發佈：2019-01-20

CSS介紹

實現移動的三種方法
可以用margin
可以用浮動佈局
可以用定位

脫離文件流

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>脫離文件流</title>
        <link rel="stylesheet" href="脫離文件流.css"/>
    </head>
    <body>
        <div class 
="redDiv"></div>
        <div class="blueDiv">
            <div class="item"></div>
        </div>
    </body>
</html>


body{
    margin:0px;
}
.redDiv{
    width: 200px;
    height: 200px
    background-color: red;
}
.blueDiv{
    width: 400px;
    height: 100px;
    background-color: yellow;
    float:right;
}
.item{
    width: 20px;
    height: 100px;
    background-color: yellow;
    float:right;
}

定位

定位
浮動

行標籤 inline
不能設定寬-高 寬高由內容撐開
可以同行顯示

塊標籤 block
可以設定寬高 
不設定寬:預設寬度繼承父級
預設高度:由內容撐開
不能同行顯示 獨佔一行

文件流:標籤在瀏覽器裡面按照特性,從上到下,從坐到右排列的一個順序
脫離文件流:讓元素在文件流裡面飛起來,不佔用原來的空間

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位</title>
        <link 
 rel="stylesheet" href="定位.css/">
    </head>
    <body>
        <div class="redDiv"></div>
        <div class="blueDiv">
            <div class="greenDiv"></div>
            <div class="yellowDiv"></div>
        </div>
        <div class="ad">大家好,我是渣渣輝,一刀998級,貪玩藍月,你值得擁有
    </body>
</html>

.redDiv,.blueDiv{
    width: 200px;
    height: 200px;
}
.redDiv{
    /*預設值:不定位*/
    /*position: static*/
    /*1.相對定位 相對於自身的位置去移動
      2.不脫離文件流,還佔用原來的位置
      3.只有定位的元素才能使用:left top bottom right
    */
    position: relative;
    right: 10px;
    bottom: 10px;
    background-color: red;
    margin-top:50px;
}
.blueDiv{
    background-color: blue;
    /*絕對定位 相對於有定位屬性的父級去定位
      如果父級只是作為定位父級來使用 只需要使用relative即可
      即position: relative
    */
}
.greenDiv{
    /*絕對定位 相對於帶有position屬性(不包括static屬性)的父級定位,如果
    父級沒有position屬性,就找父父級別 直到html,如果html也沒有position,
    就相對於視窗定位 絕對定位會脫離文件流*/
    position: absolute;
    right: 0px;
    bottom: 0px;
    width:50px;
    height:50px;
    background-color:green;
    /*
    對於定位的元素才可以使用z-index
    z-index的值越大,位置越靠前
    z-index可以是負值,負值的情況下比正常元素靠後
    z-index > 浮動 > 正常
    */
    z-index:99;
}
.yellowDiv{
    width: 100px;
    height: 100px;
    background-color:yellow;
}
.ad{
    z-index:99;
    width:100px;
    height:380px;
    background-color:gray;
    color:white;
    font-size:20px;
    /*固定定位 相對於視窗的位置始終不變 left 0;設定元素在視窗左邊為0的地方
    bottom 0設定元素在距離視窗下邊為0的地方 會脫離文件流*/
    position: fixed;
    right: 20px;
    top:50%;
    margin-top:-190px;
}

過渡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>過渡</title>
        <link rel="stylesheet" href="過渡.css" />
    </head>
    <body>
        <!--女生能接受的高跟鞋尺寸 10cm 6cm 18cm-->
        <div class="redDiv"></div>
    </body>
</html>

.redDiv{
    margin: 100px auto;
    width: 30px;
    height: 50px;
    background-color:red;
    /*過渡時間*/
    transition-duration:2s;
    /*過渡屬性
    希望哪些樣式變化的時候有過渡效果.多個屬性用逗號隔開 預設是all*/
    transition-property: all;
    /*過渡的運動方式 速度變化
    linear 勻速
    ease
    ease-in 變快
    ease-out 變慢
    ease-in-out 先塊後慢
    */
    transition-timing-function: ease-in-out;
    /*過渡延時*/
    transition-delay:1s;

    /*複合寫法*/
    transition: all 1s 2s linear;
    /*相容性*/
    /*谷歌 -webkit核心*/
    -webkeit-transition: all 1s 2s linear;
    /*火狐*/
    -moz-transition:all 1s 2s linear;
    /*IE*/
    -ms-transition:all 1s 2s linear;
    /*歐朋*/
    -o-transition:all 1s 2s linear;
    transition: all 1s 2s linear;
}
.redDiv:hover{
    height:400px;
    background-color:blue;
}

CSS之定位與脫離文件流與過渡

CSS介紹實現移動的三種方法可以用margin 可以用浮動佈局可以用定位脫離文件流 <!DOCTYPE html> <html lang="en">

完全理解float之“不完全脫離文件流”

0.前言 float的特性 float與absolute的區別 float與inline-block 清除浮動的方法及優缺點 1. float的特性文字環繞 float 最早的設計目的是用於圖片，使文字能夠環繞在圖片周圍，像下面這樣：文字環繞效

CSS佈局之脫離文件流詳解——浮動、絕對定位脫離文件流的區別

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。一、浮動

CSS盒模型之文件流與BFC

文件流：文件中可顯示的元素在排列時候的開始位置以及他們所佔的區域原因：頁面元素不同，按照各自的特點去顯示，在頁面中所佔的區域是不一樣的順序：從上到下，從左到右 css浮動float 概念：使元素脫離文件流，按照指定的方向發生移動，遇到父級元素或者相鄰的元素就會停下來特徵：1）塊元素可以在一行顯示

html5-css:關於float,position的定位問題，文件流的解析

自己總結，全作參考，請以權威文件為準；以下是一段程式碼，該程式碼中的四個DIV並沒有做任何 float 或 position 的 css 屬性設定；<!DOCTYPE html> <

html/css DOM脫離文件流的幾種情況

原文地址：　http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html 所謂的文件流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從

浮動、絕對定位脫離文件流的區別

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。一、浮動脫離文件流使用floa

css中脫離文件流的理解

上次去面試一家公司，那家公司的技術總監問我什麼叫脫離文件流，當時我一下愣住了，這個是作為一個前端工作者在工作中經常會遇到的問題，我們頻繁地用著，然而卻不能用語言表達出它的意思。我不由得思考為什麼會這樣，如果下次有人問我同樣的問題，我又將如何作答呢？首先從“脫離文件流”這幾

css中脫離文件流解惑

　先來了解一下block元素和inline元素在文件流中的排列方式。　　block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padd

CSS脫離文件流

脫離文件流也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會

標準文檔流與脫離文檔流

設置 ted left 位置 add html表格單元區域部分在網頁當中，所有的元素都有自己的占位。標準文檔流指在沒有CSS幹預的前提下，塊級元素獨占一行，可以自行定義寬、高；而行內元素並排顯示，寬、高為auto。常見的塊級元素有： <address>

關於浮動的半脫離文件流的理解

浮動　　最基本的浮動方式我們都知道，它是一個半脫離文件流的方式，那麼為啥叫做半脫離文件流呢？接下來我們就來以例項來解釋一下　　第一個例項： .box1{ 　　width: 100px; 　　height: 100px; 　　background-color: pink; }<div cl

HTML文件流和脫離文件流

文件流:也就是我們通常看到的由左到右、由上而下的元素排列形式，在網頁中每個元素都是預設按照這個順序進行排序和顯示的. 脫離文件流:元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態(可以理解為漂浮在文件流的上方).脫離文件流的元素的定位基於正常的文件流，當一個元素脫離文件流後，依然在文件流中的其

transform佈局不會脫離文件流

transform佈局不會脫離文件流 transform佈局不會脫離文件流，也不改變文件流的大小和位置。 width offsetWidth clientWidth offsetLeft ... 設定元素的 transform 屬性後，上述等屬性均不會發生改變 <!DO

脫離文件流的三種方式以及清除浮動

固定定位(position:fixed) 脫離文件流後的元素有四個特性： 1.不再區分行和快； 2.如果本元素未設定寬度，脫離後的寬度將由其子元素撐開，高度也是； 3.字圍效果； 4.貼靠現象；清除浮動： 1.給浮動元素的父元素設定寬高，這樣就不會影響到後面的元素了（不建議用，不使用）； 2.給浮動元素新

脫離文件流分析

先來了解一下block元素和inline元素在文件流中的排列方式。　　block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、paddi

脫離文件流的疑難混淆點兒 display:inline-block能脫離文件流嗎

　　CSS中脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。　　需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。　　而對於使用absol

文件流、脫離文件流分析

文件流是文件中可顯示物件在排列時所佔用的位置。文件流簡述編輯將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.(自己的理解是從頭到尾按照文件的順序，該在什麼位置就在什麼位置，也可以按照上面的意思理解，自上而下，自左到右的順序) 詳細

css的定位與文件流

談到CSS的定位機制時都會提到一個關鍵詞“文件流”。那麼什麼是文件流呢？將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為[size=x-large]文件流[/size]。 CSS的定位機制有3種：[color=blue]普通流、浮動（float

CSS - 文件流 and 佈局（浮動、流式、定位、相對、絕對、固定）

目錄一、文件流（normal flow） 1、概念 2、BFC（Block formatting context 塊格式化上下文） - 2.1一切皆為框 - 2.2 無名塊框 3、BFC規則二、浮動佈局 1

CSS之定位與脫離文件流與過渡

CSS介紹

脫離文件流

定位

過渡

相關推薦