CSS学习（十七）-盒模型_html/css_WEB-ITnose

一、理论：
1.CSS盒模型
a.外盒尺寸计算--高度
element空间高度=内容高度+内距+边框+边距
b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距
c.内盒尺寸计算--高度
element高度=内容高度+内距+边框
d.内盒尺寸计算--宽度
element宽度=内容宽度+内距+边框
2.box-sizing
a.content-box 默认值
b.border-box 元素维持IE传统的盒模型
c.inherit 使元素继承父元素的盒模型模式 
d.此值主要目的是控制元素的总宽度

二、实践：

1.

    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .wrapper{            width: 960px;            margin-left: auto;            margin-right: auto;            color:#6bb2ff;            font-size: 30px;            text-align: center;        }        #header{            height: 100px;            background: #228833;            margin-bottom: 10px;        }        .sidebar{            float:left;            width: 220px;            margin-right: 20px;            margin-bottom: 10px;            height: 300px;            background: #ebf3fc;        }        .content{            float:left;            width: 720px;            height: 300px;            background: #ffcc99;            margin-bottom: 10px;        }        #footer{            background: #a6f821;            height: 100px;            clear: both;        }    </style>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

2.

    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .wrapper{            width: 960px;            margin-left: auto;            margin-right: auto;            color:#6bb2ff;            font-size: 30px;            text-align: center;            background: #ffcc99;        }        #header{            height: 100px;            background: #228833;            margin-bottom: 10px;            padding: 10px;            width: 100%;        }        .sidebar{            float:left;            width: 220px;            margin-right: 20px;            margin-bottom: 10px;            height: 300px;            background: #ebf3fc;            padding: 10px;        }        .content{            float:left;            width: 720px;            height: 300px;            background: #ffcc99;            margin-bottom: 10px;            padding: 10px;        }        #footer{            background: #a6f821;            height: 100px;            clear: both;            padding: 10px;            width: 100%;        }    </style>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

3.

    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .wrapper{            width: 960px;            margin-left: auto;            margin-right: auto;            color:#6bb2ff;            font-size: 30px;            text-align: center;            background: #ffcc99;        }        #header{            height: 100px;            background: #228833;            margin-bottom: 10px;            padding: 10px;            width: 100%;            border: 10px solid darkgray;        }        .sidebar{            float:left;            width: 220px;            margin-right: 20px;            margin-bottom: 10px;            height: 300px;            background: #ebf3fc;            padding: 10px;            border: 10px solid red;        }        .content{            float:left;            width: 720px;            height: 300px;            background: #ffcc99;            margin-bottom: 10px;            padding: 10px;            border: 10px solid chartreuse;        }        #footer{            background: #a6f821;            height: 100px;            clear: both;            padding: 10px;            width: 100%;            border: 10px solid #202189;        }    </style>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

4.

    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .wrapper{            width: 960px;            margin-left: auto;            margin-right: auto;            color:#6bb2ff;            font-size: 30px;            text-align: center;            background: #ffcc99;        }        #header{            height: 100px;            background: #228833;            margin-bottom: 10px;            padding: 10px;            width: 100%;            border: 10px solid darkgray;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            -o-box-sizing:border-box;            -ma-box-sizing:border-box;            box-sizing: border-box;        }        .sidebar{            float:left;            width: 220px;            margin-right: 20px;            margin-bottom: 10px;            height: 300px;            background: #ebf3fc;            padding: 10px;            border: 10px solid red;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            -o-box-sizing:border-box;            -ma-box-sizing:border-box;            box-sizing: border-box;        }        .content{            float:left;            width: 720px;            height: 300px;            background: #ffcc99;            margin-bottom: 10px;            padding: 10px;            border: 10px solid chartreuse;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            -o-box-sizing:border-box;            -ma-box-sizing:border-box;            box-sizing: border-box;        }        #footer{            background: #a6f821;            height: 100px;            clear: both;            padding: 10px;            width: 100%;            border: 10px solid #202189;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            -o-box-sizing:border-box;            -ma-box-sizing:border-box;            box-sizing: border-box;        }    </style>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>