项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

Posted 2020-09-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before相关的知识，希望对你有一定的参考价值。

文件夹：

1、背景图合并和CSS Spirit

2、PS基本快捷键

3、hack技术基本书写，为什么不用？

4、内核前缀

5、伪类afterbefore

1、背景图合并和CSS Spirit

背景图合并在使用时有两种方法：

①一种就是你会PS。能够自己PS实现背景图合并成一张图片。再用background-position实现背景图的定位。

②假设你不会PS。那能够用CSS背景图合并工具，直接选好图片后在线制作生成相相应格式的图片。方便快捷。

background的语法：

background-color：red | #RGB;

background-position:X轴坐标 Y轴坐标 | left| right | center | top..

background-size: 100px | 30% | cover | contain; 在线測试

background-repeat: repeat | no-repeat | repeat-x | repeat-Y

background-origin：border | padding | content

background-clip：border-box | padding-box | content-box

background-attachment：fixed | scroll

background-image：url

简写的形式：background:color url() positon repeat；

备注：background-size的属性值假设仅仅设置一个值，则第二个值会被设置为 "auto"。

cover：实现把背景图像扩展至足够大。以使背景图像全然覆盖背景区域。

contain：把图像图像扩展至最大尺寸，以使其宽度和高度全然适应内容区域。

背景图合并技术优势：利用背景图合并技术能够降低向server端的请求，节省时间和带宽。对站点加速有非常大的提升作用。能够实现两边圆角，中间无限延伸，通过子标签背景覆盖父标签。三层嵌套，截取图片的中间部分以及左右两边,算好图片的位置,然后利用position定位。

2、PS基本快捷键

ctrl+w 关闭

ctrl+r 标尺右键标尺选像素或者厘米左键点击拉出标尺线要删掉直接拖出去

ctrl+ + 放大

ctrl+ -缩小

ctrl+1 到100%视图

ctrl+0 还原到最佳视图

ctrl+d取消选区

ctrl+t 变形在变形过程中按住shift保持宽高不变按Enter退出变形

Alt+Delete 前景色填充

ctrl+Delete 背景色填充

ctrl+z 撤销

ctrl+Alt+z 撤销多次

空格切换到手状态

ctrl+g 图层分组

3、hack技术基本书写，为什么不用？

CSS hack：针对不同的浏览器写不同的CSS code的过程

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件凝视法

① 属性前缀法： IE6:      _height: 20px;
IE7:      +height: 20px;
IE6/IE7:   *height: 20px;
IE6.7.8.9.10:  height: 20px\9;
IE8.9.10.11 :  height: 20px\0;

IE9.10 : height:20px\9\0;

Hack的利弊：

我们尽量避免使用CSS hack，可是有些情况为了顾及用户体验实现向下兼容。不得已才使用hack。

比方因为IE8及下面版本号不支

持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染。这样的情况下假设不使用css3pie或htc

或条件凝视等方法时,可能就得让IE8-的专属hack出马了。使用hack尽管对页面表现的一致性有优点，但过多的滥用会造成html

文档混乱不堪。添加管理和维护的负担。相信仅仅要大家一起努力。少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋

于统一。顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack。必将减轻我们编码的复杂度，少做无用功。

内核前缀

浏览器	内核前缀	内核
FF	-moz	Gecko
IE	-ms	Trident
Chrome	-webkit	Blink
Opera	-o 换成-webkit	Persto 换成blink，原先已弃用
Safria	-webkit	webkit

伪类after before

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包括content属性指定内容的行内元素

:before 伪元素在元素之前加入内容
这个伪元素同意创作人员在元素内容的最前面插入生成内容。默认地。这个伪元素是行内元素，只是能够使用属性 display 改变这一点。
:after 伪元素在元素之后加入内容
这个伪元素同意创作人员在元素内容的最后面插入生成内容。

默认地。这个伪元素是行内元素。只是能够使用属性 display 改变这一点。

实现效果：