margin:xx auto無效緣由，盒子模型實質，應用注意。

時間 2019-11-20

標籤 margin auto 無效緣由盒子模型實質應用注意欄目 CSS 简体版

原文原文鏈接

1.用float的時候要注意，子元素總寬或者總高不要超過父容器，包括border。html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son" style="width:50%;height:100%;float:left;">
        </div>
        <div id="son2" style="width:50%;height:100%;border:2px solid blue;float:left;">
        </div>
    </div>
</body>
</html>

2.用margin:xx auto;居中的時候，應用margin的元素出現不居中的效果是由於，有時候內容是一些行內元素，你不設置它的寬度他默認就是證據一整行（看下面圖）。而margin是以元素的邊框爲依據的，因此沒有任何效果。佈局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;">
            <div>
                <h3 style="border:1px solid green;margin:20px auto;">測試例子</h3>
            </div>
        </div>
        <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;">
        </div>
    </div>
</body>
</html>

3.解決方案：測試

　　①給定元素一個寬度（其實就是具體化它的邊框），很大的缺點是，你大部分時候並不想定性你的元素大小，並且你定了之後，直觀的看到的是內容，因此人不必定是居中的。spa

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;">
            <div>
                <h3 style="border:1px solid green;margin:20px auto;width:100px;">測試例子</h3>
            </div>
        </div>
        <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;">
        </div>
    </div>
</body>
</html>

　　②對上一層最近的div使用text-align:center。不用設置元素大小，操做少，比較簡單，能達到效果。code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;">
            <div style="text-align:center;">
                <h3 style="border:1px solid green;margin:20px auto;">測試例子</h3>
            </div>
        </div>
        <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;">
        </div>
    </div>
</body>
</html>

　　時間寶貴：1.margin居中失效緣由：行內元素自己就佔據一行，左右邊框已經居中（0px），沒有居中是由於內容沒居中。htm

　　　　　　　2.解決方法：①給這個元素設置寬度。blog

　　　　　　　　　　　　　②給他的父級元素應用--text-align：center；it

　　　　　　　　　　　　　③給這個元素本身應用--》display:block;text-align;class

　　　　　　　*3.講道理的話，這裏用padding來給內容居中是很舒服的，讓內容在元素里居中嘛。可是呢，padding沒有這種xx auto的設置。其實一樣的想法，內容層自己實際上是居中的，兩邊padding都是0px嘛，只是你的東西沒把內容層撐滿，看去不居中嗯了。深究到底，其實行級元素它佔據的一行，是內容層佔據了一行。而應用margin，padding，border的時候都是在切割內容層的上下左右，由於一行的寬度實際上是定的，這3個來拿地方了，內容層就小了。而咱們日常設置的width，height是對內容層而言的，是在設置內容層的寬高。內容層像一杯牛奶，自己沒有任何而言，而後margin，padding，border像一瓶牛奶的盒子，一箱牛奶的盒子（現實中只不過這些盒子外殼都是同樣厚的）否則放在超市，透明看去，喝的牛奶部分並非居中的。網頁的渲染，某個父級元素給子元素的你的一行寬是固定的，不設置margin，border，padding，內容是佔據整行的，若是你設置margin，border，padding，父級給你的行寬是固定的，你要放下一個帶包裝盒的牛奶，沒辦法，要弄點牛奶掉來給點位置放包裝盒。因此咱們經常設置的margin，padding，是在擠佔內容層的大小，因此要當心規劃這些值，否則你要顯示的東西就會很奇怪，可能被擠佔的內容層就不夠放置要顯示的元素了。容器

　　　　　　　4.用了margin:xx auto；的元素不能用float。

　　　　　　　5.不少樣式的奇怪緣由都是源自塊級元素和行級元素的不一樣，可是咱們要始終關注，內容層纔是咱們的佈局目標。