前端基礎--CSS佈局學習

最近學習小程序發現不少關於css佈局的東西都不是很懂，因此學習記錄下關於CSS佈局相關的知識。
學習資料：http://zh.learnlayout.com/css

「display」屬性

block：塊級元素
inline：行內元素
none：一些特殊元素的默認 display 值是它，例如 script 。 display:none 一般被 JavaScript 用來在不刪除元素的狀況下隱藏或顯示元素。html

margin: auto;

#main { width: 600px; margin: 0 auto; }

而後你就能夠設置左右外邊距爲 auto 來使其水平居中。元素會佔據你所指定的寬度，而後剩餘的寬度會一分爲二成爲左右外邊距。git

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .simple { width: 500px; margin: 20px auto; border-style: solid; border-color: '#333333'; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; border-style: solid; border-color: '#0000FF'; } </style>
</head>
<body>

    <div class="simple">
        我小一些...
    </div>

    <div class="fancy">
        我比它大！
    </div>

</body>
</html>

實際結果能夠看到設置的寬度只是內容寬度。當你設置了元素的寬度，實際展示的元素卻超出你的設置：這是由於元素的邊框和內邊距會撐開元素。web

box-sizing

上面的盒模型不符合如今人的思惟習慣，因此添加了一個新的屬性box-sizing。當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框再也不會增長它的寬度。這裏有一個與前一頁相同的例子，惟一的區別是兩個元素都設置了 box-sizing: border-box;小程序

<style type="text/css" media="screen"> .simple { width: 500px; margin: 20px auto; border-style: solid; border-color: '#333333'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; border-style: solid; border-color: '#0000FF'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style>

爲了全部的css開發者都是這種模型，給全局全部元素添加border-box屬性，你須要添加下面的設置api

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

position

一、static
二、relative
經常使用用法嵌套型佈局，若是父佈局是relative，子佈局是absolute，那麼對子佈局設置top left定位是相對於父佈局的，若是父佈局不是ralative，那就根據window窗體來定位。注：absolute忽略父佈局的包裹關係瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .relative1{ position: relative; height: 300px; border-style: solid; border-color: '#333333'; } .relative2{ display: block; position: absolute; width: 200px; top:100px; left:30px; border-width: 10px; border-style: solid; border-color: '#0000FF'; } </style>
</head>
<body>
    <div class="relative1">
        relative 表現的和 static 同樣，除非你添加了一些額外的屬性。
        <div class="relative2">
            在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其餘的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
        </div>
    </div>

</body>
</html>

三、fixed
一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即使頁面滾動，它仍是會停留在相同的位置。和 relative 同樣， top 、 right 、 bottom 和 left 屬性均可用。markdown

.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }

四、absolute
absolute 是最棘手的position值。 absolute 與 fixed 的表現相似，可是它不是相對於視窗而是相對於最近的「positioned」祖先元素。若是絕對定位（position屬性的值爲absolute）的元素沒有「positioned」祖先元素，那麼它是相對於文檔的 body 元素，而且它會隨着頁面滾動而移動。記住一個「positioned」元素是指 position 值不是 static 的元素。工具

<div class="relative1">
        relative 表現的和 static 同樣，除非你添加了一些額外的屬性。
        <div class="cc">
            <div class="relative2">
                在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其餘的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
            </div>
        </div>

    </div>

如上面的代碼，三層嵌套。relative2設置成absolute，relative1設置成ralative，cc不設置任何postion屬性，這樣relative2會相對於relative1進行絕對佈局。佈局

float

另外一個佈局中經常使用的CSS屬性是 float 。Float 可用於實現文字環繞圖片

img { float: right; margin: 0 0 1em 1em; }

float用於佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> nav{ float: left; width: 25%; } section{ margin-left: 25%; } </style>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
            </ul>
        </nav>

        <section>
            這個例子和以前那個外觀如出一轍。請注意咱們在容器上作了「清除浮動」。本來在這個例子中是不須要的，可是當 nav 比非浮動的內容還要高時就須要了。
        </section>

        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>

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

媒體查詢

「響應式設計（Responsive Design」是一種讓網站針對不一樣的瀏覽器和設備「呈現」不一樣顯示效果的策略，這樣可讓網站在任何狀況下顯示的很棒！

媒體查詢是作此事所需的最強大的工具。讓咱們使用百分比寬度來佈局，而後在瀏覽器變窄到沒法容納側邊欄中的菜單時，把佈局顯示成一列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> @media screen and (min-width: 600px) { nav{ float: left; width: 25%; } section{ margin-left: 25%; } } @media screen and (max-width: 599px){ nav li{ display: inline; } } </style>
</head>
<body>
    <div calss="container">
        <nav>
            <ul>
                <li><a href="" title="傢俱日用">傢俱日用</a></li>
                <li><a href="" title="電子產品">電子產品</a></li>
                <li><a href="" title="生鮮蔬菜">生鮮蔬菜</a></li>
                <li><a href="" title="音頻書籍">音頻書籍</a></li>
            </ul>
        </nav>

        <section>
            當你調整瀏覽器窗口大小時，佈局比之前更酷了！
        </section>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>
    </div>

</body>
</html>

inline-block

inline-block屬性的元素既擁有了block元素能夠設置width和height的特性，又保持了inline元素不換行的特性.
你能夠建立不少網格來鋪滿瀏覽器。在過去很長的一段時間內使用 float 是一種選擇，可是使用 inline-block 會更簡單。讓咱們看下使用這兩種方法的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .container{ margin-top: 20px; padding: 10dp; border-color: black; border-style: solid; } /*方法一 浮動方式佈局*/ .box{ float: left; width: 200px; height: 100px; margin: 1em; background-color: red; } .after-box{ clear: left; } /*方法二 inline-block方式佈局*/ .box2{ display: inline-block; width: 200px; height: 100px; margin: 1em; } </style>
</head>
<body>

    <div class="container">
        <div class="box">
            我在浮動！
        </div>
        .....
        <div class="after-box">
            我在使用 clear，因此我不會浮動到上面那堆盒子的旁邊。
        </div>
    </div>


    <div class="container">
        <div class="box2">
            我在浮動！
        </div>
        ......
        <div class="after-box">
            我在使用 clear，因此我不會浮動到上面那堆盒子的旁邊。
        </div>
    </div>

</body>
</html>

###flexbox
新的 flexbox 佈局模式被用來從新定義CSS中的佈局方式。很遺憾的是最近規範變更過多，致使各個瀏覽器對它的實現也有所不一樣。
[CSS官方文檔對於flex的講解](http://css.cuishifeng.cn/flex.html)
一、簡單佈局

Document

二、牛逼佈局

Document

三、居中佈局

Document

div{
border-style: solid;
border-color: red;
}
.container {
width: 500px;
height: 300px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-aligin-items: center;
justify-content: center;
-webkit-justify-content: center;
}

<div class="container">
    <div>
        我想要居中到父容器的中心
    </div>
</div>

「`