尺寸
设置尺寸的三种方式
1.绝对长度。数字+单位。单位有px，mm，cm等等
（em表示一个字符的长度，这样虽然字符大小的改变也会引起尺寸的改变，但我们也认为这是一个绝对长度，）
https://www.w3cplus.com/css/the-lengths-of-css.html
2.相对长度。百分比，表示占据了父类元素大小的百分之多少。随着窗口的变化或者父元素的变化，具体长度也会发生改变
3.自动适应auto，对于不同的情况有不同的效果
div与span设置尺寸的区别
（1）div可以设置尺寸，span不可以设置(span就不同解释了，宽度和高度都是由内容决定的)
<1>div的宽度默认是填满父元素的一行的，高度是根据元素内容有几行和文字大小来确定的。
<2>通过设置绝对长度和相对长度使得宽度改变。
a.如果只设置宽度。对于文字来说如果一行装不下自动换行。对于图片来说如果装不下，默认还会显示多余的部分，可以通过overflow属性来设置是否显示多余的部分。
b.如果只设置了高度或者高度宽度都设置了，对于文字或者图片来说如果装不下，默认还会显示多余的部分（不影响标准流），可以通过overflow属性来设置是否显示多余的部分。
<3>如果是对高度进行了相对设置，那么高度就会是父元素的百分之多少。如果父元素是body，那么就是相对于整个浏览器高度的百分之多少
<4>对于一个简单的div设置auto是没有用的。还是默认的设置。
<body>
<div style="background-color: #00FF00">我是一个没有设置宽度的div</div>
<div style="background-color: #00FF00;width: 500px">我是一个设置px宽度的div</div>
<div style="background-color: #00FF00;width: 50%">我是一个设置百分比宽度的div</div>
<div style="background-color: #00FF00;width: auto">我是一个设置自动宽度的div</div>
<span style="background-color: #00FF00">我是一个没有设置宽度的div</span>
<span style="background-color: #00FF00;width: 500px">我是一个设置px宽度的div</span>
<span style="background-color: #00FF00;width: 50%">我是一个设置百分比宽度的div</span>
<span style="background-color: #00FF00;width: auto">我是一个设置自动宽度的div</span>
</body>
（2）display属性改成inline-block后。
<1>div的宽度和高度是根据元素内容有内容来确定的。
<2>通过设置绝对长度和相对长度使得宽度改变
<3>设置auto是没有用的。还是默认的设置。
（3）可以发现block和inlineblock的关于尺寸的区别就只是默认的尺寸设置不同。
盒子模型里各个尺寸的设置
content
就是设置width和height
padding
设置四个边的值，默认是auto，可以使用相对和绝对尺寸设置。
border
1.设置四个边的值。默认是auto，可以使用相对和绝对尺寸设置。
2.也可以为border设置圆角矩形
margin
1.可以设置四个边的值，默认是0，可以使用相对和绝对尺寸设置。
2.如果设置为auto并且设置了盒子的宽度，那么就可以居中了
<div style="background-color: #00FF00;padding: 50px;width: 200px;margin: auto" >测试背景颜色</div>
不同类型的盒子模型尺寸的相关设置
不同浏览器对于不同的元素的默认的各种盒子模型的值是不一样的。因此要注意
常用布局
布局流程
1.观察并且确定页面的版心（可视区域的主要内容）
2.分析页面的每个行块，每个行快里面的列块
3.确定html部分结构
4.根据盒子模型原理实现
布局一：居中对齐布局：简单
1.结构
2.关键点
（1）每个专栏宽度相同且剧中
（2）专栏之间有间隙
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.top,
.navbar,
.main,
.footer {
width: 70%;
background-color: #a1a1a1;
margin:0 auto;
/*}整体设置i颜色，宽度*/
.top{
height: 80px;
}
.navbar{
height: 120px;
margin: 10px auto;
/*每个栏之间有间距*/
}
.main{
height: 1200px;
}
.footer{
height: 50px;
margin: 10px auto;
/*每个栏之间有间距*/
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="navbar">navbar</div>
<div class="main">main</div>
<div class="footer">main</div>
</body>
</html>
通栏型布局
1.注意应该计算好宽度与高度
2.注意选择器的权重关系。
3.如果CSS没有实现自己想要的效果可以在浏览器中F12，Ctrl+shift+c查看某个标签的css样式
4.先把他们分成四个主要部分，计算好每个部分的宽度与高度，然后计算边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*通栏设置*/
.top {
height: 100px;
width: 100%;
background-color: #DDDDDD;
}
/*通栏中心设置*/
.top .top_middle{
width: 1000px;
height: 100%;
margin: auto;
background-color: #FFD700;
}
/*取消列表项标记*/
ul{
list-style-type: none;
}
/*第一部分主要内容*/
.main1 ul{
width: 1000px;
height: 300px;
margin: 0 auto;
}
.main1 ul li{
float: left;
background-color: #008CBA;
width: 235px;
/*如果想要使用百分比设置尺寸，必须指定他的父类元素有长度设定，否则不能使用百分比设置*/
height: 100%;
margin-right: 20px;
/*4*235+3*20=1000*/
}
.main1 ul .four{
margin-right: 0px;
}
/*第二部分主要内容*/
.main2 ul{
width: 1000px;
margin: auto;
height: 500px;
}
.main2 ul li{
float: left;
background-color: #4CAF50;
width: 235px;
height:100%;
margin-right: 20px;
/*4*235+3*20=1000*/
}
.main2 ul .four{
margin-right: 0px;
}
/*尾部通栏中心设置*/
.footer {
width: 100%;
height:auto;
background-color: #000000;
}
.footer .footer_middle{
width: 1000px;
height: auto;
margin: auto;
background-color: #56e7ff;
}
</style>
</head>
<body>
<div class="top">
<div class="top_middle">上部通栏中心</div>
</div>
<div class="main1">
<ul>
<li class="one">11</li>
<li class="two">12</li>
<li class="three">13</li>
<li class="four">14</li>
</ul>
</div>
<div class="main2">
<ul>
<li class="one">21</li>
<li class="two">22</li>
<li class="three">23</li>
<li class="four">24</li>
</ul>
</div>
<div class="footer">
<div class="footer_middle">下部通栏中心</div>
</div>
</body>
</html>