CSS学习（十七）-盒模型
Posted bwshqh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习（十七）-盒模型相关的知识，希望对你有一定的参考价值。
一、理论：1.CSS盒模型
a.外盒尺寸计算--高度
element空间高度=内容高度+内距+边框+边距
b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距
c.内盒尺寸计算--高度
element高度=内容高度+内距+边框
d.内盒尺寸计算--宽度
element宽度=内容宽度+内距+边框
2.box-sizing
a.content-box 默认值
b.border-box 元素维持IE传统的盒模型
c.inherit 使元素继承父元素的盒模型模式
d.此值主要目的是控制元素的总宽度
二、实践：
1.
<!DOCTYPE html> <html lang="en"> <head> <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> </head> <body> <div class="wrapper"> <div id="header">hedaer</div> <div class="sidebar">left</div> <div class="content">main</div> <div id="footer">footer</div> </div> </body> </html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="wrapper">
<div id="header">hedaer</div>
<div class="sidebar">left</div>
<div class="content">main</div>
<div id="footer">footer</div>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="wrapper">
<div id="header">hedaer</div>
<div class="sidebar">left</div>
<div class="content">main</div>
<div id="footer">footer</div>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="wrapper">
<div id="header">hedaer</div>
<div class="sidebar">left</div>
<div class="content">main</div>
<div id="footer">footer</div>
</div>
</body>
</html>
以上是关于CSS学习（十七）-盒模型的主要内容，如果未能解决你的问题，请参考以下文章