寒假第三周的学习总结

# 边框的类型补充

none；没有

hidden：隐藏

dotted：点线边框

dashed：虚线边框

solid：实线边框

# padding简写属性

padding后跟一个值时：表示上下左右都是

两个值时先表示上下两个再表示左右

三个值时表示先上再左右最后下

四个值时按顺时针上右下左

# 嵌套块元素垂直外边距坍塌

处理方法：

1. 为父元素定义上边框

2. 为父元素定义上内边距

3. 为父元素添加overflow：hidden

# PS的用法

文件打开要测量的图片，在ctrl+R打开标尺，再把单位改成像素即可

主要起到一个测量的作用，为页面排版提供数据

# 圆角边框（以前会写出来起到复习的作用）

border-radius：_px

# 盒子阴影，文字阴影

box-shadow：_px _px _px _px 颜色 outset（依次意思：水平阴影的位置，垂直阴影的位置，模糊距离，阴影的尺寸，阴影的颜色，外阴影还是内阴影inset内outset外）

text-shadow(文字阴影与盒子一样的)

# 清除浮动

1. 父级：overflow：hidden

2. 父级：after伪元素

3. 两个伪元素

# 测图的新方式：像素大厨

官网：https://www.fancynode.com.cn，

安装成功后用其鼠标直接可以测量，按住拉扯可以直接测间距，还可以运用距离标注工具自己测量

# css的属性书写顺序（可以很好的提高速度并且更整齐）

1. 布局定位属性：display/position/float/clear/visibility/overflow

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

# 布局思路（个人感觉比较有帮助）

1. 确定页面的版心，测量得

2. 分析页面的行模块，以及其中的列模块，页面第一准则

3. 一行中的列模块经常浮动，先确定列的大小，再确定列的位置，页面布局第二准则

4. 先有结构再有样式

5. 所以理清除布局结构最重要

# 精灵图使用

1. 把多个小背景图整合到大的图片中

2. 大图片成为精灵图

3. 使用background-position调节位置

4. 移动坐标就是x，y轴，x轴往右变大，y轴往下变大

# css三角

实际上把内容设为没有，设计边框，只显示一个边框即可实现三角形，菱形效果一样可以使用实现

# 界面样式

（鼠标样式）cursor：

default：小白，默认

pointer：小手

move：移动

text：文本

not-allowed：禁止

禁止文本域拖拽：resize：none即可

# 文本超出省略

单行文本省略：

white-space：nowrap（单行显示）

overflow：hidden（超出隐藏）

text-overflow：ellipsis（省略号表示）

多行文本省略：

overflow：hidden（超出隐藏）

text-overflow：ellipsis（省略号表示）

display：-webkit-box（弹性盒显示）

-webkit-line-clamp：2（限制的行数）

-webkit-box-orient：vertical（检索垂直居中）

# 模糊处理

filter：函数（）;blur 模糊处理数值越大越模糊

# calc函数

可以在css的属性值时进行加减运算：

width：calc（100%-80px）;

# 2D转换之移动

transform：translate（x，y）  transfrom：translateX（x）（x轴的）同理y轴

# 2D转换之旋转

transform：rotate（度数）;（正就是顺时针，负值就是逆时针）（单位deg）

# css三角

设置盒子大小，给边框，通过旋转即可实现小三角

# 设置旋转中心

transfrom-origin：x，y;给定像素或者单位名词都可以

# 2D转换之缩放

transfrom：scale（x，y）里面是缩放的倍数

# css的动画

1. 先定义动画

2. 再调节动画

@keyframe动画名称{

    0%{

        width：100px;

    }

    100%{

        width:200px;

    }

}

动画序列：

1. 0%是动画的开始，100%是动画的结束

2. 在@keyframe中规定某样css的样式，就能实现创建动画

3. 动画是一种样式变为另一种样式的效果可以改变任意多次

4. 用百分比表示动画的结点进程

元素动画写法：

div{

    width:200px;

    height;200px;

    background-color:aqua;

    margin:100px auto;

    /*调用动画*/

    animation-name:动画名称;

    /*持续时间*/

    animation-duration:持续时间s;

}

动画简写属性：animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

动画的常见属性：

# 速度曲线

animation-timing-function：规定动画的速度曲线

# 3D转换之移动

多增加了z轴

书写方式与2D基本一致

translform：translate3d（x,y,z）;z轴是往屏幕距离移动，单位一般还是px，是向外移动（靠近眼前）

translform：translateX（）指x轴同理得其他的轴

# 透视

在2D平面产生近大远小视觉立体，但是只是效果二维

的

如果想要在网页产生3D效果需要透视(理解成3D物

体投影在2D平面内)

模拟人类的视觉位置，可认为安排一只眼睛去看透视我们也称为视距：视距就是人的眼睛到屏幕的距离

距离视觉点越近的在电脑平面成像越大，越远成像

越小

透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是人的眼睛到屏幕的距离。

z：就是z轴，物体距离屏幕的距离，translateZ（）z轴

越大（正值）我们看到的物体就越大。

本周进行了下一阶段的学习对要补充的知识点进行笔记，下周继续，并开始项目规划