css中float和position屬性

時間 2019-11-08

標籤 css float position 屬性欄目 CSS 简体版

原文原文鏈接

盒子的三種定位形式html

在標準流下的定位
在浮動屬性下的定位
在定位屬性下的定位
除非設置浮動屬性或定位屬性，不然全部盒子都是在標準流中定位
顧名思義，標準流中元素盒子的位置由元素在HTML中的位置決定。瀏覽器

盒子的浮動
在標準流中，塊級元素的盒子都是上下排列，行內元素的盒子都是左右排列
若是僅僅按照標準流的方式進行排列，就只有這幾種可能性，限制太大。CSS的
指定者也想到了這樣排列限制的問題，所以有給出了浮動和定位方式進行盒子的排列
從而使排版的靈活性大大提升。
例如：有時但願相鄰塊級元素的盒子左右排列（全部盒子浮動）或者但願一個盒子被另外一個盒子中的內容
所環繞（一個盒子浮動）作出圖文混排的效果，這時最簡單的辦法就是運用浮動屬性使盒子在浮動方式下定位。ide

在標準流中，一個塊級元素在水平方向自動伸展，在他的父元素中佔滿一行；而在豎直方向和其餘元素依次排列，不能並排，使用
浮動方式後，這種排列方式就會發生改變
CSS中有一個float屬性，默認值爲none,也就是標準流一般的狀況，若是將float屬性的值設爲left或者right，元素就會向其父元素
的左側或右側靠緊，同時盒子的寬度再也不伸展，而是收縮，在沒設置寬度時，會根據盒子裏面的內容來肯定寬度。佈局

盒子的浮動主要是排版使用，咱們默認DIVtable標籤作出來的內容都是2Dhtm

浮動的清除對象

clear是清除浮動屬性，它的取值有left、right、both和none(默認值)，若是設置盒子的清除屬性clear值爲left或right,表示該盒子
左邊和右邊不容許有浮動的對象。設爲both，表示兩邊都不能夠有浮動的對象，所以該盒子將會在瀏覽器中另起一行顯示。
文檔

CSS positionit

CSS定位（positioning）屬性容許你對元素進行定位
CSS爲定位和浮動提供了一些屬性，利用這些屬性，能夠創建列式佈局，將佈局的一部分與另外一部分重疊，
還能夠完成多年來一般須要使用多個表格才能完成的任務。io

CSS定位機制
CSS有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素位置由元素在（X）HTML中的位置決定
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來的。table

CSS position屬性
經過使用position屬性，咱們能夠選擇4種不一樣類型的定位，這會影響元素框生成的方式。
position屬性值的含義：
static（默認值）元素框正常生成。塊級元素生成一個矩形框，做爲文框流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。
absolute元素框從文檔流徹底刪除，並相對於其包含塊定位。包含快多是文檔中的另外一個元素或者是初始塊。元素原先在正常流中
所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它的正常流中生成何種類型框。
fixed元素框的表現相似於將position設置爲absolute，不過其包含塊是視窗自己。（滾動條滾動時fixed的盒子一直浮動在固定位置）
position:fixed;
top:0px;
left:500px;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float</title>
    <style>
    #header
    {    width: 1000px;
        height: 100px;
        background-color: blue;
        margin:auto;/*天然居中*/
        text-align: center;
    }
    #container
    {    width: 1000px;
        height: 50px;
        background-color: gray;
        margin:auto;/*天然居中*/
        text-align: center;
    }
    #main
    {    width: 1000px;

        background-color: steelblue;
        margin:auto;/*天然居中*/
    }
    #nav
    {    width: 200px;
        height: 500px;
        background-color: red;
       margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #content
    {    width: 500px;
        height: 500px;
        background-color: green;
        margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #side
    {    width: 200px;
        height: 500px;
        background-color: blue;
        margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #footer
    {    width: 1000px;
        height: 30px;
        background-color: bisque;
        margin:auto;/*天然居中*/
        clear: both;
        text-align: right;
    }


    </style>
</head>
<body>
<div id="header">頂部</div>
<div id="container">內容</div>
<div id="main">主體
    <div id="nav">左邊</div>
    <div id="content">主內容</div>
    <div id="side">右邊框</div>
    <div id="footer">地址：xxxxx 電話：xxxxxx</div>

</div>
</body>
</html>

1. CSS position屬性、float屬性
2. CSS 佈局的position屬性、float屬性
3. CSS中Position、Float屬性深入探討
4. CSS中Position、Float屬性深刻探討
5. css的position,float屬性的理解
6. CSS中Position屬性
7. CSS float屬性
8. CSS position 屬性
9. float屬性與position(定位)
10. CSS中的Position屬性
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• JDK13 GA發佈：5大特性解讀
• Scala 中文亂碼解決

相關標籤/搜索

每日一句

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