2019-07-23来黑马程序员的第十二天（上课）

难过，今天的这篇文章是7.24号写的，昨天一天没有时间写总结，大部分时间都用在了写项目上面这个项目算我们开班一来第一个比较大的，写的是一头的雾水，一直到昨晚上下晚自习都没有写完，写到最后脑子都糊掉了，所以我打算今天再写一遍，把昨天的推翻，重新来一遍，但是在写之前项目之前，还是要把昨天学的知识点给总结一下，其实不算多，总结如下：

---

一、浮动带来的问题以及解决方法

浮动带来的问题：浮动元素不能撑开父级元素，为了解决这个问题我们称为清除浮动（也叫闭合浮动）

解决方法：

（1）定高法：强行给父元素设置个高度 缺点：高度写死了，导致后期不好维护

（2）增加额外的块级元素：在浮动元素的最后添加一个块级元素，并给他设置属性clear:both;

优点：可以让浮动元素撑开标准流的父级元素

缺点：每一次清除浮动都需要添加额外的标签

（3）使用伪元素（本质上还是增加额外的块级元素）

使用步骤：1、将固定代码复制到CSS中 2、给需要清除浮动的元素应用这个选择器

.clearfix::after {

content:'';

display:block;

clear:both;

height:0;

visibility:hidden;

}

/*这是兼容性写，是兼容IE浏览器的*/

.clearfix {

*zoom:1;

}

优点：使用简单，不存在兼容性问题

缺点：底层代码较难以理解

（4）使用overflow 给需要清除浮动的元素设置overflow:hidden;

优点：使用简单 缺点：在特定的情况下会失效

---

二、伪元素

解释：伪元素就是伪标签，实际上我们在浏览器中是看不到的

语法：（1）选择器::after {} 在选择器选择的标签内容最后面添加一个标签

（2）选择器::before{} 在选择器选择的标签内容最前面添加一个标签

注意细节：（1）添加的标签默认是行内元素

（2）伪元素的content必须要写，即使是空内容也要写

（3）官方推荐写法:: 但是为了考虑到兼容问题 建议写成单引号:

例子解释：.dv::after {

content:'今天天气不错';

}

这句话的意思：1、在dv这个选择器选择的标签内容最后面添加"今天天气不错"

2、选择这个包裹"今天天气不错"的标签

---

三、版心

解释：是一个固定宽度并且居中的盒子，简单来说就是一个固定宽度的值

语法：常用写法 .w {

width:1280px；

margin: 0 auto;

}

特殊情况：1、通栏情况 通栏的盒子 解决方法：在通栏的盒子里再套一个盒子并且应用版心样式

2、有一张特别大的图片，超过了版心甚至超过了电脑屏幕 解决方法：（1）使用图片作为背景图片

（2）这个盒子不做约束，宽度width:100% 高度等于图片的高度 （3）background-position:center 0

---

四、PS的简单使用

z工具：使图片放大缩小 按下z键

（1）放大：使用键盘：ctrl + + 使用鼠标：（1）单击 （2）按住鼠标左键不放 （3）鼠标选择一块区域 使用鼠标和键盘：alt+鼠标滚轮向上滚 

（2）缩小：使用键盘：（1）ctrl + - 使用鼠标加键盘：alt+鼠标滚轮向下

c工具：切片工具 按下c键

移动画布：（1）按住空格键+鼠标移动画布（上下左右都能移动） （2）按住ctrl键+滚动鼠标滚轮（只能移动左右方向的）（3）按住空格键+滚动鼠标滚轮（只能移动上下方向）

查看选中的切片的尺寸 ：双击

导出选中的切片：ctrl+shift+alt+s

---

嗯，今天休息总结就到这里，晚上再写今天的总结。