CSS中盒子模型和position（一）

時間 2019-11-17

標籤 css 盒子模型 position 欄目 CSS 简体版

原文原文鏈接

　　今天遇到幾個css中的重要的知識點，記得這些都是之前看過的：margin、padding、border和position。但是用起來仍是有不少的問題，之前本身看過去老是懶得記錄，等到用起來了都不知道本身記憶中的那些是在那裏看到的，找起來特別的麻煩，仍是老老實實的寫博客寫下來吧！本着既然打算寫成博客就費點時間寫點本身以爲有質量的，要不對不起看我博客的人更對不起本身，有些事情仍是要告訴本身，不能急得花點時間，就像學這些技術。踏踏實實一點一點積累，仍是要捨得花時間。
　　本人大四即將畢業生一枚，老是以爲有好多東西要學習。以致於什麼都想學，但是什麼都是學幾天就急躁的不行。老是以爲這樣的學習太慢了，時間久了都以爲寫博客太費時間了。其實本身只是太着急了，技術這種東西須要的是：學習->時間->總結->記錄->遺忘->查看->回憶，這樣的一種漸進式的學習積累過程，而不能只有學習，咱們記錄是爲了讓本身之後忘記的時候能夠迅速的找的之前學習的記憶。因此仍是要不斷的告誡本身：什麼東西想要有收穫，就得捨得花時間。
　　好了，開始我今天關於margin、padding、border和position的探索吧！（關於這些css樣式具體什麼用法這裏不作記錄，能夠去http://www.w3school.com.cn/學習）
　　　　margin：外邊框
　　　　padding: 內邊框
　　　　border: 邊框
　　關於這三個在盒子模型中的什麼位置，咱們就不具體探究了，這裏就用一張圖來解釋：css

　　一、marginhtml

　　　　margin默認（也就是在沒有定義）狀況下是 margin: 0px; 而且margin是透明的。
　　　　就我遇到的狀況中有這麼三方面須要注意：chrome

　　　　　　I、到咱們設定一個div，給這個div一個css樣式　　　瀏覽器

<!--給定div-->
<div class="marg">margin外邊框測試</div>
<!--給定這個div一個css樣式-->
.marg {
    width: 300px;
    height: 200px;
    background: red;
    margin: 20px;
}

　　　　注意：佈局

　　　　此時咱們設置的width和height實際上是指內容區域的長和高，因此咱們的元素框div並非300px*200px,而是340px*240px學習

　　　　若是咱們須要設置一個300px*200px的元素框且外邊距須要20px時，咱們就須要這樣設置測試

.marg {
    width: 260px;
    height: 160px;
    background: red;
    margin: 20px;
}

　　　　效果：ui

　　　　從上面的例子咱們就能夠看出：當咱們設置div的css樣式的width和height時，其實是指內容區域的長和高。spa

　　　　更通常的規律是：3d

　　　　width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

　　　　兼容問題

　　　　根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用本身的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。（摘自w3school）

　　　　II、：外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。

<html>
<head>
    <META http-equiv="content-type" content="text/html;charset=utf-8"/>
    <style>
        .marg {
                    width: 260px;
                height: 160px;
                background: red;
                /*當設置正常的外邊距時
                      margin: 10px;
                    */
                    margin: -10px;
                }
    </style>
</head>
<body>
    <div style="height:50px;">margin外邊框測試</div>
    <div class="marg">margin外邊框測試</div>
    <div id="date"></div>
</body>
</html>

　　設置外邊距爲10px時效果：

　　當咱們設置margin：-10px時：

　　能夠看到兩個div之間發生了重疊，對於負的margin就至關於以margin:0px 爲基準向外擴展既是正值向內就是負值；

　　　注意：margin能夠是負值、可是padding不能是負值

　　III、外邊距重疊合並

　　　　當兩個相鄰的div同時都擁有本身的margin的css樣式是，這兩個div連接處的div的外邊距會自動進行合併：合併後的外邊距是這兩的div的margin中大的那個值。

　　　　　　本圖剪自w3school/margin

　　　　測試：

<html>
<head>
    <META http-equiv="content-type" content="text/html;charset=utf-8"/>
    <style>
        #pageHeader {
            background: #FF99FF;
            width: 300px;
            height: 100px;
            margin: 50px 0px;
        }
        #bigBox {
            width: 200px;
            height: 200px;
            /*
            當不給第二個div外邊距時
            margin: 0px;
             */
            //當給第二個div以上下20px外邊距
            margin: 20px 0px;
        }    
    </style>
</head>
<body>
    <h1>測試margin合併</h1>
    <div id="pageHeader">
        <h1><span>第一個DIV</span></h1>
    </div>
    <div id="bigBox">第二個DIV</div>
</body>
</html>

　　　　效果：

　　　　當第二個div margin：0px時

　　　　當給第二個div margin：20px 0px;

　　　　當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併

　　　　　　本圖剪自w3school/margin

　　　　有些狀況下外邊距甚至能夠與自身發生合併

　　　　　　本圖剪自w3school/margin

　　　　這兩種狀況其實和第一種狀況都是同一個原理：當div之間相遇時，他們的外邊距會自動進行合併，並以較大的那個外邊距形式顯示到頁面

　　IV、在CSS和DIV佈局中使用margin進行居中對齊

　　　　一般，咱們在定義文本對齊可使用：

　　　　　　a、使用HTML中的align屬性

　　　　　　b、使用CSS中的text-align: left|right|center|justify(兩端對齊)

　　　　　　　　text-align是一個塊級屬性，只能用於<div> <p> <ul> <h1>~<h6>等

　　　　　　c、使用margin，margin: 0px auto; 或者使用等效的 {margin-left:auto;margin-right:auto;}

　　　　　　這裏順便記錄一下垂直對齊方式：

　　　　　　　　a、表格中的對齊方式：valign <td valign="center"></td>

　　　　如今測試使用margin居中的c方法：

　　　　當咱們改變瀏覽器的大小或者改變屏幕分辨率時，仍是居中對齊

　　　如今，咱們在進行一項測試：

　　　　給這個居中的div一個包含它的div

<html>
<head>
    <META http-equiv="content-type" content="text/html;charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #box {
            /*
             * 第一種狀況：給予包含div一個肯定的width
             * width:1000px;
             * 第二種狀況：給予包含div一個相對100%
             * width:100%;
             */
            width:1000px;
            height: 800px;
            background: green;
        }
        #page {
            background: #FF99FF;
            width: 960px;
            height: 100px;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <h1>測試利用margin進行居中佈局</h1>
    <div id="box">
        <div id="page">此時這個div已經居中對齊了，不管瀏覽器窗口大小如何改變，這個div都會居中；並且在任何的分辨率width大於960px的電腦上都是居中對齊</div>
    </div>
</body>
</html>