记录学习-----前端笔记03

CSS高级

鼠标样式 cursor
小白 default
小手 pointer
文本 text
移动 move

轮廓线
例如input点击会有蓝色光圈
outline : 1px solid #ccc;
和border不冲突
一般都不要轮廓线
outline : 0(none);

防止拖拽文本域
防止文本域的大小改变页面布局
resize: none;
文本域可以改边框

margin 0 auto
=magin-left: auto;
=magin-right: auto;

垂直居中
vertical-align:middle; 对块级元素无效
顶线 topline
中线 middleline
基线 baseline
底线 bottomline
针对行内元素和行内块元素
主要是图片表单和文字实现居中对其的效果
图片和文字默认是基线对其

图片或者表单等行内块元素，他的底线 会与基线对其 就会出现一个缝隙
解决方案1
将图片转为块级元素
解决方案2
将图片不与基线对其 vertical-align:middle/top 用的最多的是top （163）

溢出隐藏
word-break 英文
break-all 允许单词拆开显示
keep-all 不允许单词拆开显示 连字符（-）特殊 默认
white-space 中文
normal
nowrap 一行内显示文本 遇到强制换行（br）等才换行
text-overflow 文字溢出 使用前要添加 white-space:nowrap ;
其次必须要有 overflow: hidden;
clip 不显示…简单裁剪
eclipsis 超出的部分用省略号表示

========================================================================================================
css精灵技术 (sprite) 处理背景网页背景图像的方式
精灵图 有多小背景图片组成的大图

字体图标 是个字体 可以使用字体属性
icomoon http://icomoon.io 常用
阿里http://www.iconfont.cn/ 阿里icon font字库
没有这个字体要使用
1.需要先声明
2.给盒子使用这个字体
3.可以复制小图标或者 使用content"\unicode编码"

追加新图标
selection.json

滑动门技术

使各种特殊形状的背景能够自适应元素中文本内容的多少
重要使用了css精灵和盒子padding挤开 千万不能给宽度 通过padding挤开

<li>
    <a herf="" > </a>   背景左侧
    <span>文字文字 </span>      背景右侧
</li>

a:hover span {} a鼠标经过的a下面的span盒子

伪元素(他们不是真正的页面元素，但是用法和表现和页面元素一样) before after

伪元素选择器
div::before { content:文字; backgroud-color:pink} 在前面加元素
类选择器 伪类选择器 都是选选取对象
伪元素选择器 本质上是插入一个元素（标签 盒子） 是行内元素

box-sizing: border-box 把padding和border都算入width里面

div:hover::before 鼠标经过之后前面插入一个伪元素

过渡效果(写在div中不要写在hover中)
transition: 要过渡的属性 花费时间 运动曲线 何时开始；—> 前两个属性必须写

transition-duration 花费时间 单位是秒 s 必须写
运动曲线默认ease 立马开始 方式-----> linear匀速 ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速后减速
多个要变化的属性用逗号隔开

===========2D=
css3 transform 变形
1.移动 transform: translate(x,y); 将文字或者图片给一个水平或垂直方向移动 一般和hover一起用
transform: translate(50px); 只移动x轴 ======translateX()
transform: translate(0，50px); 只移动y轴 ======translateY()

让定位的盒子居中对其的完美写法
transform: translateX(50%); 若写法是百分比不是一父亲的宽度为准 是以自己的宽度为准

magrin-left: -100px; 缺点：距离写死，改盒子宽度时还要来改这个 除不断不方便
transform: translateX(50%);
transform: translateY(50%);
transform: translate(-50%，-50%);

缩放 scale
transform: scale(x,y); x水平y垂直 如果只写一个值水平垂直同时缩放同等倍数

旋转 rotate(deg) deg度数
transform: rotate(90deg); -90deg逆时针旋转

变形中心点
transform-origin : center center;
transform-origin : apx bpx; 精确定位

倾斜 skew(deg,deg) x方向的倾斜,y方向的倾斜 正值向左 负值向右

==============3D
xyz坐标系
transform: rotateX(deg); 水平翻转效果
transform: rotateY(deg); 竖直翻转效果
transform: rotateZ(deg); 类似中心点翻转效果

透视 perspective(视距)
将屏幕中心点作为眼睛 要是3d转换的盒子偏离中心 则会出现歪的效果 给父元素添加的 作用于所有3D转换的效果
原理 近大远小 视距越大效果越不明显

移动
translateX()
translateY()
translateZ() 物体到屏幕的距离 数值越大 越大 最远距离为600px
综合写法
有位移和其他变换属性时，要把位移写在最前面，否则位移失效
translate3d(x,y ,z) x y 可以是百分比 z 必须要是px
backface-visibility 属性定义当前元素不面向屏幕是是否可见

css 动画 animation 记不住直接搜索
属性
animation-name
animation-duration
animation-play-state:paused 暂停动画

animation-fill-mode:forwards 动画播放后停留不回到原点,默认是backwards回到原点

引用动画（一般情况下只用前两个
animation: 名称 花费时间 速度曲线 何时开始 播放次数(infinite无限循环) 下一周期是否逆向播放 (是否正在运行或暂停 动画时间之外的状态 ）
简写不包含animation-play-state
steps(n) 步长 就是分n步来完成动画

定义动画

@keyframes 名称 {
	from {
		起始点(transform)
	}
	to {
		终止点transform
	}
}

多组转换可以写在同一个trnasform中

====================================================================================================
margin 负值
压住盒子边框
盒子浮动后边框合并 变粗
设置margin-left: -1px;
浮动的盒子是紧贴在一起的

但是设置链接伪类选择器之后 被压住的边框不显示样式
因为定位层级最高 所以 在设置定位之后 被选中的盒子就会整个显示出来

若所有的盒子都有定位属性 就用z-index将选中的盒子突出来

div三角形
1—> 宽高为0
2—> 四个边框都要写 只保留需要的边框颜色 其余的不能省略 都改为transparent 透明
3—> 照顾兼容性(低版本浏览器） 加上font-size:0;line-height:0;

opacity 盒子透明 包括盒子里的文字也会半透明
前缀
-webkit-谷歌
-moz-火狐
-ms- ie
-o- opera