1.复习
2.盒子模型
1.盒子的组成：内容（content）外边距margin 内边距padding 边框border
2.外边距 margin 盒子与盒子之间的空隙（盒子的外部）
外边距不能出现背景颜色
设置一个值代表是上下左右都是这个值
设置两个值1 值2 ，值1是上下 值2是左右
设置3个值 值1 值2 值3 ， 值1是上 值2是左右 值3是下
设置4个值 值1 值2 值3 值4 ， 值1是上 值2是右 值3是下 值4是左
margin：0 auto； 实现盒子的水平居中 上下为0 左右自动
可以单独设置某一个值 margin-left right top bottom
margin可以设置负值，使盒子叠加在一起
3.内边距 padding 内容和边界之间的距离（盒子的里边）
内边距能出现背景颜色
设置一个值代表是上下左右都是这个值
设置两个值1 值2 ，值1是上下 值2是左右
设置3个值 值1 值2 值3 ， 值1是上 值2是左右 值3是下
设置4个值 值1 值2 值3 值4 ， 值1是上 值2是右 值3是下 值4是左
可以单独设置某一个值 padding-left right top bottom
padding不可以设置负值
4.边框 border （属于盒子的）
3.盒子的计算方式
padding会撑大盒子，border边框也会撑大盒子 margin（如果单纯的拿一个盒子来说margin不会撑大盒子）
如果将一堆小盒子放在一个大盒子里面 margin会影响一排的摆放个数此时我们认为margin会影响盒子的大小
盒子模型的计算方式：
实际width=（margin-left）+（border-left）+（padding-left）+width+（padding-right）+（border-right）+（border-right）+（margin-right）
实际height=（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）
盒子模型的分类：标准盒模型（外扩模型） 怪异盒模型（内减模型）
标准盒子：padding border会撑大盒子
怪异盒：padding border不会撑大盒子
盒子模型之间的转换 box-sizing：content-box 标准盒默认 border-box怪异盒子
4.ps的操作
ps测量 取色 截图
1.如何打开图片
文件-打开
直接将图片拖拽到ps软件中（注意如果有打开的图片要将图片拖拽到打开图片的名称后边）
2.取色
左侧工具栏中小色块点击-打开拾色器面板-将鼠标放在你想要获取颜色的位置点击即可
3.测量
鼠标点击左侧的矩形选框工具-将你想要知道尺寸的位置框选-w代表宽度 h代表高度
如果鼠标松开就没有w和h 去窗口的菜单中找到信息 快捷键是f8
如果你的值不是整数，说明你的单位不对，可以在信息面板中点击加号的位置，将单位更改为像素
或者在标尺中右击将单位更改成像素
如何调出标尺ctrl+r
图片放大选择的精准度会更高 放大 alt+滚轮 或者 ctrl+ 缩小 alt+滚轮 或者 ctrl-
取消选区ctrl+d
4.截图
只能一张张截图
1.用选框工具选择-ctrl+c-ctrl+n-enter-ctrl+v-ctrl+alt+shift+s
2.左侧工具栏裁切工具选择-双击确定（在原图上做裁切） 需要还原
批量截图
左侧裁切工具右击选择切片工具-用鼠标一次将你要裁切的图片选择出来-ctrl+alt+shift+s-存储-所以用户切片
5.辅助线
在标尺中向下或向右拖拽
6.抓手工具 h或者按住空格键
快速以移动
7.改变图片的大小
选框工具选中-ctrl+t 按住shift就可以等比例缩放
8.调节图片的明暗度
ctrl+m
9.网页的安全区（版心区）
内容都会在中心区域去显示，正常打开页面时不会出现左右滚动条
5.网页的外围结构搭建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="wai.css">
</head>
<body>
<!-- top -->
<div class="top">
<div class="top1 safe"></div>
</div>
<!-- logo -->
<div class="logo">
<div class="logo1 safe"></div>
</div>
<!-- nav -->
<div class="nav">
<div class="nav1 safe">
<a href="#">首页</a>
<a href="#">学籍查询</a>
<a href="#">学历查询</a>
<a href="#">在线验证</a>
<a href="#">出国教育背景服务</a>
<a href="#">图像校对</a>
<a href="#">学信档案</a>
<a href="#">研招</a>
<a href="#">港澳台招生</a>
<a href="#">征兵就业</a>
<a href="#">学职平台</a>
<a href="#">日本频道</a>
</div>
</div>
<!-- main -->
<div class="main safe">
<div class="news">
<div class="left"></div>
<div class="right">
<div class="title">标题信息</div>
</div>
</div>
<div class="server">
<div class="left">
<div class="title">标题信息</div>
</div>
<div class="right">
<div class="title">标题信息</div>
</div>
</div>
<div class="fuwu">
<div class="left">
<div class="title">标题信息</div>
</div>
<div class="right">
<div class="title">标题信息</div>
</div>
</div>
<div class="other">
<div class="left">
<div class="title">标题信息</div>
</div>
<div class="right">
<div class="title">标题信息</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer safe">
<div class="footer1"></div>
</div>
</body>
</html>
wai.css文件
* {
margin: 0;
padding: 0;
}
body {
background:#f1f1f1;
}
/* 并集选择器定义安全区 */
/*.top1, .logo1, .nav1, .main, .footer1 {
width: 1000px;
margin: 0 auto;
}*/
/* 定义一个安全区，哪里需要哪里使用 */
.safe {
width: 1000px;
margin: 0 auto;
}
/* top */
.top {
height: 35px;
border-top: 3px solid #2eafbb;
}
.top1 {
height: 35px;
background: red;
}
/* logo */
.logo {
height: 100px;
background: #FFF;
}
.logo1 {
height: 100px;
background: yellow;
}
/* nav */
.nav {
height: 40px;
background: #2eafbb;
}
.nav1 {
height: 40px;
/* background: palevioletred; */
font-size: 0px;
word-spacing: 26px;
font-family: "Microsoft YaHei", 微软雅黑， SimSun, 宋体;
}
.nav a {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 40px;
}
/* main */
.main {
margin: 20px auto;
background: #f1f1f1;
}
.left {
width: 779px;
height: 100%;
border-right: 1px solid #000;
background: pink;
float: left;
box-sizing: border-box;
}
.right {
width: 219px;
height: 100%;
background: orange;
float: right;
}
.title {
height: 48px;
border-bottom: 1px solid #000;
font-size: 18px;
line-height: 48px;
padding-left: 19px;
}
.news {
height: 294px;
background: #fff;
border: 1px solid #000;
margin-bottom: 20px;
}
.server {
height: 346px;
background: #fff;
border: 1px solid #000;
margin-bottom: 20px;
}
.fuwu {
height: 324px;
background: #fff;
border: 1px solid #000;
margin-bottom: 20px;
}
.other {
height: 372px;
background: #fff;
border: 1px solid #000;
}
/* footer */
.footer {
height: 220px;
background: #2eafbb;
}
.footer1 {
height: 220px;
background: palevioletred;
}