（11）盒模型
网页中能够跳转的标签都是a标签
a标签要做两个reset
1、统一字体颜色
2、清除下划线
1、盒模型的引入
有一个css文件下的reset文件
/*这个文件就是用来外联配置，做清除操作*/
a{
/*统一字体颜色*/
color: black;
/*清除字体下划线，没有参数就是none*/
text-decoration: none;
}
ul{
/*清除列表样式，没有参数就是none*/
list-style: none;
/*清除列表名距离默认值*/
margin: 0;
padding: 0;
}
html文件下引入css文件下的参数文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用外联样式清除页面的默认值</title>
<!--这里将文件外联过来-->
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
PS：margin和padding就是盒模型下的参数
CSS文件下reset文件的初始参数设置
/*这个文件就是用来外联配置，做清除操作*/
body{
margin: 0;
}
a{
/*统一字体颜色*/
color: black;
/*清除字体下划线，没有参数就是none*/
text-decoration: none;
}
ul{
/*清除列表样式，没有参数就是none*/
list-style: none;
/*清除列表名距离默认值*/
margin: 0;
padding: 0;
}
2、盒模型解析
什么是盒模型：参考w3school网页，右键检查后，不管鼠标放在哪一个区域，右边的显示的代码区域就有一个方块显示，像一个盒子一样，其实就是标签
这个就是盒模型的概念
盒模型解析：盒模型就是标签，标签显示存在四个部分
1、最外面是margin ：位置区间（外边距），就是控制在页面的位置
2、然后是border ：边框区间
3、然后是padding ：留白区间（内边距，就是内容和border之间留白）
4、然后是宽 X 高（content） ：内容区间
PS：每一个区间不会重叠，都有自己独立的区域
3、盒模型实例
需求：通过盒模型将需要的区域进行移动，放到屏幕上指定的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.box{
width: 200px;
height: 200px;
/*transparent就是透明色*/
background-color: red;
}
.box{
/*这里写了就会在border和内容之间形成了一个30像素的留白区域，而且因为设置留白区域整个边框区域也会变大*/
/*如果背景区域设置了背景颜色，则留白区域的颜色会被覆盖*/
padding: 30px;
}
.box{
/*宽度的设置 solid实线 | dashed虚线 | dotted点状线*/
border: 10px solid yellow;
}
.box{
/*margin：就是往下往右移动，margin-top:就是往下移动左右不动，margin-left：就是往右移*/
margin: 10px;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">123</div>
</body>
</html>
