css参考文档; 官方英文说明!! 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

css参考文档        http://css.doyoe.com/

两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下

1 http://www.ituring.com.cn/article/64581

无论padding 还是margin参照物都是 包含元素(父元素)的宽度

2 http://www.ituring.com.cn/article/64580

纵向auto为0,横向auto为可用的剩余空间

3 div 在另一个div里垂直居中的方法:

方法1:原理,利用绝对定位和margin。当子div设置了absolute,并且top 和 bottom(必须上下或左右同时设置值才可以)设置了值之后,margin=auto在纵向上的值不再是0而是纵向剩余空间(可用空间)

.parent {

          width:800px;
          height:500px;

          border:2px solid #000;

          position:relative;(此设置是为了让子div以此为定位参照物)
}
 .child {

            width:200px;

            height:200px;

            marginauto;  

            positionabsolute;  

            top0left0bottom0right0

            background-colorred;

}
 
        方法二:利用display:table-cell模拟表格,然后设置vertical-align:middle(CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。)

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:table-cell;(垂直居中)

            vertical-align:middle;(垂直居中)

            text-aligncenter;(水平居中)

        }
        .child {

            width:200px;

            height:200px;

            display:inline-block;(水平居中)

            background-colorred;

        }
 
方法三:原理: display:flex;            
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center点击查看justify-content的详解
            align-items:center点击查看align-items详情
                                                                     点击查看align-items和align-content的区别
                                                                    说明:1:align-content只针对有多行的子元素,只有一行则没有效果 2:多行的align-content:space-around和多行的align-items:center效果一样。
                                                                     点击查看align-self的详情
        }
        .child {
            width:200px;
            height:200px;
            background-colorred;
        }
方法四:浅谈display:flex    (父元素:display:flex,           子元素:margin:auto;  即可上下左右居中,通过margin可以调控位置)

.parent {

            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
        }
        .child {
            width:200px;
            height:200px;
            background-colorred;
                          margin: auto;
        }
上一篇:cocos2dx自带物理引擎-创建物理世界


下一篇:Android总结篇系列:Activity启动模式(lauchMode)