实例演示box-sizing属性; 常用的元素居中方式

盒子的大小

应用	属性	值
宽	width	em
高	height	em
背景色	background-color	red

影响盒子的因素

1.padding(内边距) border(边框)

padding 可视化 background-clip:conter-box;
3.盒子尺寸的计算公式：width/height+padding2 + border2
使盒子大小不受width/height之外属性受影响（padding)
5.既然padding和border是后加的，所以减去
(笨办法)width: calc(20em-24px);height:calc(15em-24px)
7.css 新属性 box-sizing:让用户自己决定计算盒子大小的方案 box-sizing:content-box;
8.content-box:w3c标准盒子模型，width/height不含padding/border
9.box-sizing:border-box; border-box:padding/border 计算在内,这种盒子是IE盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标准盒子模型</title>
        <style>
            .demo{
                font-size:10px;
            }
            .demo{
                /* 宽200px*高200px*/
                width:20em;
                height:20em;
                background-color:red;
            }
            /*让padding 可视化*/
            .demo{
                /*padding是20px*/
                padding:2em;
                border:solid 2em;
                background-clip:content-box;
            }
            /*使用w3c制定的标准  得到标准的盒子模型*/
            .demo{
                box-sizing:content-box;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

mragin 对盒子位置的影响

margin 在水平方向是累加的
margin 在垂直方向大值会覆盖小的
magin 对盒子大小没有影响，只对位置有影响

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标准盒子模型</title>
        <style>
            .demo{
                font-size:10px;
            }
            .demo{
                /* 宽200px*高200px*/
                width:20em;
                height:20em;
                background-color:red;
            }
            /*垂直方向外边距是3em  3>2 会覆盖*/
            .demo:first-of-style{
                margin:2em;
            }
            .demo:first-of-style+*{
                margin:3em;
                /*水平是5em*/
                float:right;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
        <div class="demo"></div>
    </body>
</html>

全局盒子大小的设置

*{margin:0;padding:0;box-sizing:border-box;} 清空所有元素的magin,padding,使用IE盒子的模型；

元素高度：内容超出

1.文档流：是元素默认布局方式
2.一般不使用 height ，这样会使文本溢出

控制文档溢出(默认值)， overflow:visible;隐藏值（hidden）
使用滚动条被隐藏的内容overflow:scroll;overflow-y:scroll;overflow-x:scroll;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标准盒子模型</title>
        <style>
            /*文档流*/
            .demo{
                width:20em;
                height:20em;
                border:1px solid #000;
                /*控制文档溢出 默认值 是显示*/
                overflow:visible;
                /*是文本隐藏 hidden*/
                overflow:hidden;
                /*使用auto 是滚动自动化*/
                overfolow:auto;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
        <div class="box"></div>
    </body>
</html>

容器最小和最大

最小高度（height:auto）由内容自己撑开
最大高度是设置 height:500px;
min-height 限制最小高度没有设置最大高度，内容超过最小高度会自动伸展。内容不足使用最小高度，使页面不会塌掉。

4.max-height 设置了最大高度，文本溢出时要使用 overflow:auto

水平居中

1.文本水平居中：text-align:center;
2.块元素水平居中 margin-left:auto;margin-right:auto;一般使用 margin:auto;

垂直居中

1.文本垂直居中 line-height:
2.块元素垂直居中 padding:

水平+垂直解决方案

文本水平居中: text-align:center;line-height:
块元素的 padding 和margin