---恢复内容开始---
Day1 css入门及提高
1.
CSS: (cascading style sheets) 层叠样式表
样式规则：
<style></style> 在<head></head>里面
2.CSS字体样式属性
font-size:字号大小
|
相对长度单位 |
说明 |
|
em |
相对于当前对象内文本的字体尺寸 |
|
px |
像素，最常用，推荐使用 |
|
绝对长度单位 |
说明 |
|
in |
英寸 |
|
cm |
厘米 |
|
mm |
毫米 |
|
pt |
点 |
font-family:字体
CSS Unicode:字体
CSS注释： /* 需要注释的内容 */
font-weight:字体粗细
其可用属性值：normal:正常字体，相当于数字值400
bold:粗体，相当于数字值700
bolder:定义比继承值更重的值
lighter:定义比继承值更轻的值
100|200|300|400|…|900
font-style:字体风格
normal:指定文本字体样式为正常字体
italic:指定文本字体样式为斜体。
oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是选取字体中的斜体字。
font：综合设置字体样式（重点）
基本语法格式：
选择器 {font: font-style font-weight font-size/line-height font-family; }
注意：必须按照上面的顺序书写，各个属性以空格隔开，不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。
3．开发者工具(chrome)
“按F12”或者“shift+ctrl+i” 打开开发者工具。
小技巧：
(1) ctrl+滚轮 可以放大开发者工具代码大小
(2) 左边是html元素结构，右边是CSS样式
(3) 右边CSS样式可以改动数值和颜色查看更改后效果。
4.选择器（重点）
(1)标签选择器(元素选择器)
标签选择器是用html标签名作为选择器，按标签名分类。基本语法格式如下：
标签名{属性1:属性值1；属性2:属性值2；属性3:属性值3；}或者
元素名{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
(2)类选择器
类选择器使用“.”(英文点号)进行标识，后面紧跟类名，基本语法格式如下：
.类名{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
标签调用时用class=”类名”即可。
Tips:
(1) 长名称或者词组可以使用中横线来为选择器命名。
(2) 不建议使用“_”下划线来命名css选择器。
(3) 不要纯数字、中文等命名，尽量使用英文字母来表示。
(3)多类名选择器
标签调用时用class=”类名1 类名2 类名3”即可。
注意：样式显示效果跟HTML元素中类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。
(4)id选择器
#id名{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
类选择器是可以重复使用的，好比人的名字。
id选择器好比人的身份证号码，是唯一的，只能使用一次。
(5)通配符选择器
用“*”号表示，范围广，能匹配页面中所有的元素。
*{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
(6)伪类选择器
a.链接伪类选择器
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
写的时候按照顺序，lvha, love hate
实际工作中，一般如下写：
b.结构(位置)伪类选择器(CSS3)
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型， even 偶数，odd 奇数 如果用公式，n从0开始
:nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素类型，从最后一个子元素开始计数，n可以是数字、关键词或公式。
c.目标伪类选择器
:target 选择器可用于选取当前活动的目标元素。
5.CSS外观属性
color:文本颜色
取值方式如下：
a.预定义颜色值：red，green，pink等
b.十六进制：如#FF0000，#FF6600，#29D794等，十六进制是最常用的定义颜色的方式。
c.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
line-height:行间距
属性值单位有三种：像素px,相对值em和百分比%。实际工作中用最多的是像素，一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
left:左对齐
right：右对齐
center：居中对齐
text-indent：首行缩进 建议用em为单位。
letter-spacing:字间距
word-spacing:单词间距
word-spacing和letter-spacing均可对英文进行设置，不同的是letter-spacing定义的是字母之间的间距，而word-spacing定义的为英文单词之间的间距。
word-break:自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行。
颜色半透明（css3）
语法格式： color：rgba(r,g,b,a) a是透明的意思，取值范围是0-1之间。
文字阴影（CSS3）
text-shadow: 水平位置，垂直位置 模糊距离 阴影颜色；
|
值 |
描述 |
|
h-shadow |
必需。水平阴影的位置，允许负值。 |
|
v-shadow |
必需。垂直阴影的位置，允许负值。 |
|
blur |
可选。模糊距离。 |
|
color |
可选。阴影颜色。 |
6.sublime快捷方式
(1)生成标签 直接输入标签名 按tab键即可，比如div，然后tab，就可以生成<div></div>
(2)如果想要生成多个相同的标签，加上*就可以了，比如 div*3就可以快速生成3个div
(3)如果有父子级关系的标签，可以用> ,比如ul>li
(4)如果有兄弟级关系的标签，可以用+ ,比如div+p
(5)如果生成带有类名或者id名字的，直接写 .demo或者#two tab键就可以了。
DAY2
1.引入CSS样式表
(1)内部样式表
Type=”text/CSS”在html5中可以省略，可写可不写。
(2)行内式(内联样式)
<标签名 style=”属性1：属性值1;属性2：属性值2;属性3:属性值3;”>内容</标签名>
(3)外部样式表(外链式)
Link是单标签，必须放在head头部标签中，并且必须指定link标签的三个属性。
(4)总结
2.标签显示模式(display)
(1)块级元素(block-level)
(2)行内元素(inline-level)
(3)行内块元素(inline-block)
(4)标签显示模式转换display
块转行内：display:inline;
行内转块：display:block;
块，行内元素转换为行内块： display:inline-block;
3.CSS复合选择器
(1)交集选择器
(2)并集选择器
中间用逗号隔开
(3)后代选择器
中间用空格隔开
(4)子元素选择器
中间用>连接
(5)属性选择器
属性选择器用[]表示。
(6)伪元素选择器(CSS3)
E::first-letter 文本的第一个单词或字
E::first-line 文本的第一行
E::selection 可改变选中文本的样式
E::before E::after 在E元素内部的开始位置和结束位创建一个元素，必须结合content属性使用。
div::before{
content:”开始”;
}
div::after{
content:”结束”;
}
4.CSS书写规范
(1)空格规范
选择器与{ 之间必须包含空格。
属性名 与之后的 ：之间不允许有空格，：与属性值之间必须包含空格。
(2)选择器规范
当一个rule包含多个selector时，每个选择器声明必须独占一行。
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
(3)属性规范
属性定义必须另起一行。
属性定义后必须以分号结尾。
5.CSS背景
（1）
background-image: url();
background-repeat: no-repeat（不平铺） repeat-x(水平平铺) repeat-y（垂直平铺）;
background-position: left top(默认) [right top , right bottom等] ;
利用方位名字left,right,bottom,top等来更改背景图片位置，如果方位名字只写一个，另外一个默认为center。
利用精确单位，比如10px,30px,第一个值是x坐标，第二个值是y坐标。
方位名字与精确单位的混搭。
background-image: url();
(2)背景附着
scroll:背景图像是随着对象内容滚动。
fixed：背景图像固定。
(3)背景简写
(4)背景透明(CSS3)
(5)背景缩放(CSS3)
(6)多背景(CSS3)
(7)凹凸文字
(8)文本装饰
DAY3
1.CSS三大特性
CSS层叠性
样式冲突，遵循的原则是就近原则，样式不冲突，不会层叠。
CSS继承性
子承父业
CSS优先性
特殊性
权重是可以叠加的
div ul li -------> 0,0,0,3 .nav ul li -------> 0,0,1,2
a:hover -------> 0,0,1,1 .nav a -------> 0,0,1,1
注意：
1.数位之间没有进制 ，不能越级。
2.继承的权重是0.
2.盒子模型
(1)网页布局的本质：把网页元素比如图片文字等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
(2)盒子模型
所有的文档元素(标签)都会生成一个矩形框，我们称为元素框(element box),它描述了一个文档元素在网页布局汇总所占的位置大小。
(3)盒子边框(border)
语法：
border-style
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最常用)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线。
盒子边框写法总结
表格的细线边框
table {border-collapse:collapse;}
border-collapse:collapse; 表示边框合并在一起。
圆角边框
Border-radius:左上角 右上角 右下角 左下角；
内边距(padding)
padding-top(right,bottom,left):上(右，下，左)内边距.
注意：后面跟几个数值表示的意思是不一样的。
外边距(margin)
margin: 上外边距(top) 右外边距(right) 下外边距(bottom) 左外边距(left)
取值顺序与内边距相同。
外边距实现盒子居中
1.必须是块级元素
2.盒子必须指定了宽度(width)
给左右的外边距都设置为auto，可使块级元素水平居中。
清除元素的默认内外边距
*{
margin:0;
padding:0;
}
注意：行内元素是只有左右外边距，没有上下外边距的。尽量不给行内元素指定上下的内外边距就好了。
3.外边距合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距是两者中的较大者。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
1.可以为父元素定义1像素的上边框或上内边距。
2.可以为父元素添加overflow:hidden.
4.content宽度和高度
注意：
1.宽度属性width和高度属性height仅适用于块级元素，对行内元素无效(img标签和input标签除外)。
2.计算盒子模型的总高度时，还应考虑山下两个盒子垂直外边距合并的情况。
3.如果一个盒子没有给定的宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小。
Day4
1.盒子模型布局稳定性
优先使用 width > padding > margin
原因：margin会有外边距合并；padding 会影响盒子大小，需要进行加减计算(麻烦)；width 没有问题，我们经常使用宽度剩余法，高度剩余法来做。
2.CSS盒模型
3.盒子阴影
4.浮动(float)
CSS的定位机制有3种，普通流，浮动，定位。
普通流(normal flow)
普通流激素一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如块级元素会独占一行，行内元素会按顺序依次前后排列。
浮动(float)
浮动最早是用来做文字环绕效果的。
什么是浮动？
元素的浮动是只设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
选择器 {float:属性值；}
left ----- 元素向左浮动 right ----- 元素向右浮动
none ----- 元素不浮动
浮动详细内幕特性
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对齐显示。
元素添加浮动后，元素会具有行内块元素的特性，元素的大小取决于定义的大小或者默认的内容多少。
浮动根据元素书写的位置来显示相应的浮动。
5.版心和布局流程
布局流程
(1)确定页面的版心
(2)分析页面中的行模块。以及每个航模块中的列模块
(3)制作html结构。
(4)CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
6.清除浮动
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让他们出来影响其他元素。
选择器{clear:属性值;}
额外标签法
优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化差。
父级添加overflow属性方法 (触发BFC的方式)
优点：代码简洁。缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动
:after方式为空元素的升级版，好处是不用单独加标签了。
代表网站：百度，淘宝，网易等。
使用before和after双伪元素清除浮动
代表网站：小米，腾讯等
7.ps
文件格式：
.psd PS源文件格式，图层、文字、样式等，可再次编辑
.jpg 有损压缩格式，品质 最高12 不能编辑。
自由变形
Ctrl+T可以改变图像大小， 按住shift键，可以等比例缩放。
图层面板的快捷键 F7 其实图层就是一张张透明的纸，可实现叠加问题。
图层分组
选中目标图层，Ctrl+G
取消编组：Ctrl+shift+G
双击图层名称可重新命名
双击组名称，可命名组。
PS中的撤销操作
Ctrl+z 撤销一步
Ctrl+Alt+Z 撤销多步
Ctrl+E 可以合并图层 Ctrl+d 取消选区
Alt+del 填充前景色 Ctrl+del 填充背景色
魔棒工具 w
以单击位置为选择色，选择相似颜色生成选区。
容差：勾选连续时，相连颜色生成选区。
不勾选，画面中所有相似颜色被选中生成选区。
按住shift在未生成选区位置单击，可选区相加。
选区反选：Ctrl+shift+I
选区布尔运算
选区面积大小的变化
新选区：保持选中状态
添加到选区：相加运算(按住shift再绘制选区)
从选区减去：相减(按住Alt再绘制选区)
与选区交叉：重合部分保留 (按住Alt+shift再绘制选区)
钢笔工具 P
作用：绘制路径，生成选区，抠图。
组成：路径线和锚点
绘制路径后，Ctrl+回车，生成选区。
路径类型： 直线型路径：连续单击
曲线型路径：第一点单击，第二点拖动鼠标。
切片工具
1.利用切片工具，手动划出。
2.图层---新建基于图层的切片
3.利用标尺---基于参考线的切片
4.先选一整个的切片，切片选择工具里面—划分可以等分数平分切图。
导出切片： 文件----存储为web所用格式
辅助线和切片使用及清除
视图菜单---清除辅助线/清除切片
切图插件
Cutterman插件 官网下载
Ctrl+g 在编辑栏中，快速定位到某一行
Day6
1.定位(position)
元素的定位属性
主要包括定位模式和边偏移两部分。
边偏移
定位模式
选择器{position:属性值;}
静态定位(static)
一般是默认的定位，对于边偏移无效。一般用来清除定位。
相对定位(relative)
绝对定位(absolute)
绝对定位是完全脱标的，完全不占位置。
若所有父元素都没有定位，以浏览器为准对齐。
若父级有定位，绝对定位是将元素依据最近的已经定位(绝对，固定或者相对定位)的父元素进行定位。
子绝父相
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了。
定位的盒子居中办法：
1.首先left 50% 父盒子的一半
2. 然后走自己外边距负的一半值，margin-left.
固定定位(fixed)
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2.固定定位完全脱标，不占有位置，不随着滚条滚动。
固定定位的盒子一定要写宽和高，除非有内容撑开不用写。
叠加次序(z-index)
在CSS中，要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数，负整数，0。
四种定位总结
元素添加了绝对定位，固定定位，浮动之后，元素模式也会发生转换，都转换为行内块模式。
2.元素的显示与隐藏
display显示
visibility可见性
overflow溢出
Day7
1.CSS高级技巧
(1)CSS用户界面样式
鼠标样式cursor
cursor: default 小白| pointer 小手 | move 移动 | text 文本
轮廓outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
平时都是去掉的，outline:0; 或 outline: none;
防止拖拽文本域resize
resize: none;
(2)vertical-align 垂直对齐
Vertical-align不影响块级元素中的内容对齐，它只针对行内元素或者行内块元素，通常用来控制图片和表单与文字的对齐，默认是基线对齐，一般用中线对齐，vertical-align: middle;。
去除图片底测空白缝隙
a.给img vertical-align: middle | top 等等，让图片不要和基线对齐。
b.给img添加display: block;转换为块级元素就不会存在问题了。
2.溢出的文字隐藏
(1)word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词
(2)white-space
(3)text-overflow 文字溢出
3.CSS精灵技术(sprite)
本质：CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部显示出来。
制作精灵图：
4.字体图标 ***
字体引入到html
第一步：在样式里面声明字体：告诉别人我们自己定义的字体。
第二步：给盒子使用字体
第三步：盒子里面添加结构
5.滑动门
核心技术：利用CSS精灵和盒子padding撑开宽度，以便能适应不同字数的导航栏。
总结:
6.before 和 after伪元素
.one 类选择器 ：hover 伪类选择器 ：：after 伪元素选择器
注意：
1.伪元素:before 和 :after 添加的内容默认是inline 元素，这两个伪元素的content 属性，表示伪元素的内容；设置：before和：after时必须设置其content属性，否则伪元素是不起作用的。
2.伪元素是不占位置的。
7.过渡(CSS)
在CSS3里面使用transition可以实现补间动画（过渡效果）
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
如果有多组属性变化，还是要用逗号隔开。(时间单位为s)
这句话写在 div里面，而不是hover里面。
(1)2D变形 transform
a. transform: translate (x, y); x, y可为负值，单位一般为px。
让定位的盒子水平居中。
b.缩放 scale(x, y)
transform: scale(0.8 , 1);
使元素在水平方向上缩小了20%。垂直方向上不缩放。
Scale()的默认取值是1，当值设置为0.01-0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
c.旋转 rotate(deg)
可对元素进行旋转，正值为顺时针，负值为逆时针；
transform: rotate(45deg); (单位是deg度数)
transform-origin 可以调整严肃转换变形的原点。
d.倾斜 skew(deg, deg)
transform: skew (30deg, 0deg);
该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。可为负值，第二个参数不写默认为0。
(2)3D变形(transform)
rotateX () 沿着X立体旋转。
rotateY () 沿着Y立体旋转
rotateZ () 沿着Z立体旋转
(3) 透视(perspective)
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素。
translateX( ) translateY( ) translateZ( )
translateZ( ) 越大，我们看到的物体越近，物体越大。
transform: translate3d(x, y, z) x 和 y 可以是px, 可以是%，但是z 只能是px.
Backface-visibility: hidden; 不是正面对象屏幕，就隐藏。
8. 动画 animation
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；
9. 伸缩布局
display: flex
(1) flex子项目在主轴的缩放比例，不指定flex 属性，则不参与伸缩分配。
min-width 最小宽度 max-width 最大宽度
(2) flex-direction 调整主轴方向(默认为水平方向)
取值： row: 横向从左到右排列。
row -reverse: 对齐方式与row相反。
column: 纵向从上往下排列。
column-reverse: 对齐方式与column相反。
(3) justify-content 调整主轴对齐
(4) align-items调整侧轴对齐
(5) flex-warp 控制是否换行
当子盒子内容宽度多于父盒子的时候如何处理
(6) flex-flow 是flex-direction 、flex-warp的简写形式
flex-flow: 排列方向 换不换行;
两个中间用空格。
(7) align-content堆栈(由flex-warp产生的独立行)多行对齐
align-content 是针对flex容器里面多轴的情况，align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display: flex; ，并设置排列方式为横向排列，flex-direction:row; 并设置换行，flex-warp: warp;这样的属性设置才会起作用。
(8) order 控制子项目的排列顺序，正序方式排序，从小到大。
用整数值来定义排列顺序，数值小的排在前面，可以为负值，默认值为0。
order：1；
---恢复内容结束---
