大話css之display的Block未解之謎（一）

本文轉載自查看原文 2015-04-25 17:10 3657 css和js常見問題

用了幾年的css了，css中inline | block |inline-block|table|flex從來沒有做過系統的整理和分析，網上的分析文章也很多，零散。

今天有空，就在這做一下整理分析

block

　　解釋：指定對象為塊元素（占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣）

　　特點：1.處於常規流中時，如果width沒有設置，會自動填充滿父容器
　　　　　 2.可以應用margin/padding
　　　　　 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素
　　　　　 4.處於常規流中時布局時在前后元素位置之間（獨占一個水平空間）
5.忽略vertical-align

常見問題:1.父子情況下的block元素，在大部分瀏覽器會垂直外邊距合並問題（margin-top，margin-bottom會發生合並）

2.垂直上下排列的block盒子外邊距合並問題（margin-top，margin-bottom會發生合並）

　　　　　　　3.沒有設置高度，子元素是float的，結果auto的height設置無用　　　　

　　代表標簽：block元素（塊元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | 　　　　　　 ADDRESS(隨着html5標准的推進，一些元素將被廢除，而一些新的元素將被引入)注意的是並非所有的block元素的默認display屬性都是block，像table這種display:table的元素也是block元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }

           .parent1{
             width:300px;
             height:300px;
              background:yellow;
        }
        .block1{
            height:200px;
            background:red;
        }
    </style>
 
</head>
<body >
<div class="parent1">
    <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
</div>

</body>
</html>

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             height:400px;
             margin:10px;
             /*display:block;*/
             /*margin:0px;*/
             vertical-align:center;
             background:yellow;
        }
        .block2{
            height:100px;
            background:red;
            padding:20px;
            margin:30px;
            display:block;
        }

        .block1{
            height:100px;
            background:blue;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
</div>
</body>
</html>

View Code

例子包含了1.處於常規流中時，如果width沒有設置，會自動填充滿父容器

　　　　　2.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素

　　　　　　2.可以應用margin/padding

　　　　　3.處於常規流中時布局時在前后元素位置之間（獨占一個水平空間）

4.忽略vertical-align

如何解決上面的重疊了，有兩種方法，讓重疊的div任意一個變成BFC模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:10px;
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
            padding:20px;
            overflow:hidden;
            margin:30px;
            display:block;
        }
        .block1{
            height:100px;
            background:blue;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
</div>


</body>
</html>

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:10px;
             overflow:hidden;
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
            padding:20px;
            margin:30px;
            display:block;
        }
        .block1{
            height:100px;
            background:blue;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
</div>


</body>
</html>

View Code

原理：BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:20px;
             /*如果設置外dom設置了border，子集外邊距不會和父的外邊距重疊*/
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
            margin:30px;
             border:5px yellow solid;
        }
        .block1{
            height:100px;
            margin:40px;
            background:blue;
            border:5px yellow solid;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
</div>
</body>
</html>

View Code

原理：出現這種現象原因Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:20px;
             /*如果設置外dom設置了border，子集外邊距不會和父的外邊距重疊*/
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
            margin:30px;
            overflow:hidden;
            border:5px yellow solid;
        }
        .wrap{
            overflow:hidden;
        }
        .block1{
            height:100px;
            margin:40px;
            background:blue;
            border:5px yellow solid;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    <div class="wrap">
        <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
    </div>
    
</div>
</body>
</html>

View Code

原理：BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:10px;
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
        /*    padding:20px;
            margin:30px;*/
            float :left;
        }
        .block1{
            height:100px;
            background:blue;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
<!--     <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div> -->
</div>


</body>
</html>

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>
    <style type="text/css">
        html,body{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        .parent2{
             width:400px;
             margin:10px;
             overflow:hidden;
             border:5px yellow solid;
        }
        .block2{
            height:50px;
            background:red;
            float :left;
        }
        .block1{
            height:100px;
            background:blue;
        }
    </style>
 
</head>
<body >

<div class="parent2">
    <div class="block2"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div>
<!--     <div class="block1"  >
           占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣
    </div> -->
</div>

</body>
</html>

View Code

原理：1.BFC的區域不會與float box重疊

　　　2.計算BFC的高度時，浮動元素也參與計算

大多數情況下我們都知道p|H3|div標簽是block，但是我們往往忽略了table和form是block

　　時間原因，加上自己的懶惰，下一篇我為大家繼續分析display這個css特殊屬性

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 RocketMQ 很慢？引出了一個未解之謎 CSS中的display:inline-block CSS之使用display:inline-block來布局詳解CSS display:inline-block的應用 C# vs2017 winForm 未解之謎（一）關於重繪tableLayoutPanel單元格邊框后的問題 DIV CSS display(block,inline,none)的屬性教程 css的display:inline-block和float:left的區別 Css中display:inline-block用法詳解 css解決display:inline-block;產生的縫隙（間隙）驚！黃道十二宮殺手密碼，半個世紀未解之謎，竟然被他們破解了...