前端个人笔记

1.photoshop cs5安装及破解：

软件目录位置："00-前端开发软件\Windows\Adobe CC 2015  64位完整版\Adobe CC 2015  64位\Set-up.exe"

安装：

1.断开电脑网络

2.以管理员权限运行，安装到默认C盘位置，安装完成关闭窗口。（安装失败可以尝试以win7兼容模式安装）

3.打开破解软件"00-前端开发软件\Windows\PS破解及安装步骤\amtemu.v0.9.2-painter.exe"，

 

ps设置：

1.窗口-扩展-cutterman切图神器-登录cutterman账号，勾选合并导出选中的图层，选择Web，@1X，设置输出路径

 

2.PS操作技巧

（1）打开标尺：视图-标尺（CTRL+R），选择移动工具，从边缘标尺拖拽标尺线出来，想删除标尺线可以直接用移动工具拖拽到边缘即可。

（2）将PS默认单位改为像素：编辑-首选项-单位与标尺-像素

 

3. PS常用快捷键：

M 选框工具

T 文字工具

Z 放大镜

V 移动工具

Ctrl + / Ctrl - 放大缩小图像

Shift+i 吸管

Alt+滚轮 缩放图像

空格+鼠标移动 ：拖动

 

PS切图：

　　1.图层切图：最简单的切图方式：右击图层 → 导出 → 切片。

　　2.切片切图：利用切片工具手动划出

　　3.导出选中的图片：文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储

　　4.PS插件Cutterman切图：PS 必须是完整版，不能是绿色版。

 

VSCode设置：

（1）保存自动格式化：

　　1）文件 ------.>【首选项】---------->【设置】；

　　2）搜索emmet.include;

　　3）在settings.json下的【工作区设置】中添加以下语句：

​ 　　"editor.formatOnType": true,

​ 　　"editor.formatOnSave": true

 

 

CSS笔记：

(1)父元素行高可以被继承

(2)margin描述的是兄弟盒子关系，padding描述的是父子盒子关系。

(3)父盒子没边框，子盒子设置margin则不会和父盒子边框拉开距离，只会与边上的“流”拉开距离”

(4)外边距塌陷：兄弟盒子设置对向方向margin则以较大的为准。参考文章>>

(5)css继承：

　　子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继承，以及color属性）

 (6)优先级：通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

(7) 将正方形设置为圆形：border-radius设置为50%或宽度的一半即可

(8)布局原则：标准流上下布局，浮动左右布局。

(9)浮动会创建浮动框，浮动元素碰到浮动框或者包含框会停止。子元素一浮全浮，一个子元素浮动了，原则上其他兄弟元素也要一起府东。

(10)清除浮动本质：清除浮动元素造成的影响。浮动的子标签无法撑开父盒子的高度。

　　- 如果父盒子本身有高度，则不需要清除浮动
　　- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
　　- 父级有了高度，就不会影响下面的标准流了

(11)清除浮动方式：

　　1.额外标签法：也称隔墙法，在浮动元素末尾添加一个空的块级标签。

　　 例如：<div style="clear:both"></div>，或者其他标签（如<br />）。

　　 优点： 通俗易懂，书写方便。

​ 　　缺点： 添加许多无意义的标签，结构化较差。

　　

　　2.父级添加 overflow 属性：将其属性值设置为 hidden、 auto 或 scroll 

　　优点：代码简洁

　　缺点：无法显示溢出的部分

　　

　　3.父级添加after伪元素：:after 方式是额外标签法的升级版

.clearfix:after { 
　　content: ""; 
　　display: block; 
　　height: 0; 
　　clear: both; 
　　visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
　　*zoom: 1;
}

　　优点：没有增加标签，结构更简单

　　缺点：照顾低版本浏览器

 

　　4.父级添加双伪元素：（主流方法）

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }  

　　优点：代码更简洁

　　缺点：照顾低版本浏览器

 

(12)为什么需要清除浮动？

　　1. 父级没高度
　　2. 子盒子浮动了
　　3. 影响下面布局了

 

（13）CSS书写顺序：

　　1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
　　2. 自身属性：width / height / margin / padding / border / background
　　3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
　　4. 其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

 

（14）CSS定位：

　　1.相对定位：相对于自己原来的位置来移动，占原来位置，不脱标。

 

　　2.绝对定位：相对于父级元素来说的，脱标不占位，根据最近的父级定位元素进行定位，没有父级元素或父级元素没有定位则以浏览器Document 文档为基准定位。

　　

　　定位口诀：“子绝父相”。子级是绝对定位的话，父级要用相对定位。

 

　　因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

　　①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

　　②父盒子需要加定位限制子盒子在父盒子内显示。

　　③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

　　总结： **因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位**

　　当然，子绝父相不是永远不变的，如果父元素不需要占有位置，**子绝父绝**也会遇到。

 

　　3.固定定位：固定于浏览器可视区的位置

　　主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

　　固定定位的特点：

　　　　1.以浏览器的可视窗口为参照点。 跟父元素没有任何关系，不随滚动条滚动。

　　　　2.脱标不占原先位置，

 

　　4.粘性定位（sticky）：

　　粘性定位特点：

　　　　1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

　　　　2.粘性定位占有原先的位置（相对定位特点）

　　　　3.必须添加 top 、left、right、bottom 其中一个才有效

　　　　跟页面滚动搭配使用。 兼容性较差，IE 不支持。

 

　　定位特殊特性：

　　绝对定位和固定定位也和浮动类似。

　　　　1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

　　　　2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

 

　（15）堆叠顺序（z-index）：

　　`z-index` 只能应用于相对定位、绝对定位和固定定位元素，其他标准流、浮动和静态定位无效

 

　（16）显示模式：

 

　　　　- 可以用inline-block  转换为行内块

　　　　- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

　　　　- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

　　　　所以说， 一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等。

 

 　　脱标的盒子不会触发外边距塌陷

　　浮动元素、**绝对定位(固定定位）**元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

　　也就是说，我们给盒子改为了浮动或者定位，就不会有垂直**外边距合并的问题**了。

 

　　4.4 绝对定位（固定定位）会完全压住盒子

　　浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

　　但是绝对定位（固定定位） 会压住下面标准流所有的内容。

　　浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

 

 

子绝父相