CSS盒模型II

标签：

/* CSS Document */

div{
       background:silver;
       width:100px;
       height:100px;
       visibility:visible;              【元素默认可见】
       visibility:hidden;             【div中的元素隐藏，但会占据空间】
}


table tr:first-child{
       visibility:hidden;             【使第一个子元素隐藏，会占用空间】
       visibility:collapse;           【使第一个子元素消失,不会占用空间】
}

1、块级元素：能够设置元素尺寸、且能隔离其他元素

例：<div><p>

div{
      background:silver;
      width:200px;
      height:200px;

}

2、行内元素（内联）不能设置元素尺寸，只能自适应，不能隔离其他元素，会跟在其后。
例：<span><b>

span{background:silver;
width:200px;
height:200px;}

3、内联块可以设置元素尺寸，无法隔离其他元素、会跟在其后

例：<img>

【块级元素→→行内元素】 

div{
       background:silver;
       width:200px;
       height:200px;
       display:inline;
;}

【行内元素→→块级元素】 

span{
         background:silver;
         width:200px;
         height:200px;
         display:block;
}  

【行内元素/块级元素→→行内块元素】
div,span{
            background:silver;
           width:200px;
           height:200px;
           display:inline-block; 【linline-block会在新行开始，用table却不会】}

span{
         display:none;                     【隐藏盒子】
     }                                 


【浮动元素】

注：当一个元素盒子被浮动后，下面的元素会自动堆叠导致不可见。

div{
width:200px;
height:200px;
;}

#z{

       background:#33FF66;                     如图：
       float:left;                                  【1】→ 【12】→【1】【2】→【1】【2】【3】
}                                                         【2】    【3 】    【3】
                                                           【3】

#x{

      background:#CC0066;                 【1】→ 【2】 【1】→【3】         【2】【1】
      float:right                                             【2】    【3】
}                                                                       【3】
      
#c{

     background:#99FFFF;
     clear:right; 【清理左浮动】
     clear:both; 【左右均不浮动】
}
*/

CSS盒模型II

标签：

原文地址：http://www.cnblogs.com/webday/p/5285232.html