HTML CSS学习笔记7

一，Photoshop的使用

组成:

菜单项

工具栏

辅助面板

快捷键:

ctrl+r:显示隐藏标尺

在标尺上可以拖拽参考线

可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线

图层中的小眼睛可以对当前图层进行显示隐藏

alt+滚轮:可以对图片放大缩小

png等图片的切图流程：

1. 通过矩形选框工具，选择指定的区域
微调：alt 减少区域    shift 增加区域     上下左右键进行微调
利用参考线记录量取的位置，以便以后测量其他的值
2. ctrl + c : 复制图层
3. ctrl + n : 新建图层
4. ctrl + v : 粘贴图层
5. 存储为web格式

psd图片的切图流程：

1. 启动生成器
2. 图像资源
3. 重命名图层，自动获取切图
4. 可上传到线上，方便数据获取

二，float浮动

脱离文档流，延迟父容器靠左或靠右进行排列

left，right，none

float注意点:

1.只会影响后面的元素，浮动之前的元素不受影响。
2.文字内容默认提升半层。
3.默认宽根据内容决定。
4.换行排列。（父容器放不下会折行）
5.主要给块元素添加，但也可以给内联元素添加。

清除浮动

上下排列：

clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐 , 会多添加一个标签。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。

. M: after{content:" "；clear: both；display: block；}
( clear属性只会操作块标签，对内联标签不起作用 )

三，CSS 定位

position :
static（默认）
relative
absolute
fixed
sticky

relative相对定位：

1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

absolute绝对定位：

1.使元素完全脱离文档流
2.使内联元素支持宽高 （让内联具备块特性）
3.使块元素默认宽根据内容决定（让块具备内联的特性）
4.如果有定位祖先元素（绝对、相对、固定） 相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移

fixed：

1.使元素完全脱离文档流
2.使内联元素支持宽高 （让内联具备块特性）
3.使块元素默认宽根据内容决定（让块具备内联的特性）
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky黏性定位：

在指定的位置，进行黏性操作。

z-index定位层级

四，css添加省略号

width必须有一个固定的宽

white-space: nowrap不让内容折行

overflow:hidden隐藏溢出的内容

text-overflow: ellipsis添加省略号

五，css精灵

好处:

可以减少图片质量，加快网页图片的加载速度

减少图片的请求次数，加快网页的打开

六，css圆角

border-radius给标签添加圆角