大话css之display的Block未解之谜（一）

用了几年的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