CSS笔记

CSS笔记

1.头文件

2.三角阴影

三角阴影时 一定要用 加solid border:50px solid;border-color: chartreuse hotpink blue yellow;

transparent透明 border-top:50px solid transparent; 上面一部分消失

box-shadow 边框阴影 box-shadow: 10px 10px 20px 20px yellow,20px 20px 10px 10px blue;

三角阴影时 一定要用 加solid border:50px solid;border-color: chartreuse hotpink blue yellow;

transparent透明 border-top:50px solid transparent; 上面一部分消失

box-shadow 边框阴影 box-shadow: 10px 10px 20px 20px yellow,20px 20px 10px 10px blue;

text-shadow 文本阴影 text-shadow: 10px/水平阴影/ 40px/垂直阴影/ 5px/模糊程度/ yellow,17px 10px 10px blue;}

3.弹性盒

弹性盒display：flex； 属性值是加到父元素上的

flex-direction；控制元素的排列方向 属性值为row以x轴为主轴 column 以y轴为主轴 row-reverse 反转x轴 column-reverse 反转y轴

justify-content：让子元素在主轴的对齐方式 flex-start 在弹性盒子方向开始的位置
flex-end center space-between space-around自动分配剩余空间

align-items 侧轴对齐方式 flex-start flex-end center baseline和flex-start一样、

align-content 无缝隙对齐方式 控制行与行之间的间距 flex-start flex-end center space-between space-around

align-self 添加在子元素上 改变某一个子元素在侧轴的对齐方式

flex-warp 作用 控制子元素的换行 wrap nowrap

flex：1； 把剩余空间全部分配给当前元素

圣杯布局
悬挂式布局
流式布局
输入框布局
双飞翼布局
多列布局

column-count：列数；
column-gap：100px；每列的间隔大小
column-width：100px；每列宽度大小
columns：100px 5; 复合属性 每列宽度和列数
column-rule：2px solid red； 列边框大小
column-fill 设置和检索对象的所有列的高度是否统一
column-fill：auto；列高度自适应
column-span：none；对象是否横跨所以在列

4.媒体查询

1.头文件

@media screen and (min-width:1024px) and (max-width:1200px){body{backgroundblue;}}

忽略将页面中的数字识别为电话号码 忽略将Android平台中对邮箱地址的识别

移动端布局

rem是指相对于根元素字体大小的单位
max-width:320px; 1rem=12px;

min-width:321px; max-width:375px; 1rem=14px;

min-width:376px; 1rem=16px;

dpr设备像素比

dpr>2 iphone5/6/6s/7/8
dpr>3 plus

设计图（psd）宽度为640px dpr为2
设计图（psd）宽度为750px dpr为2
设计图（psd）宽度为1080px dpr为3

确定rem
设计图为750px
考虑的范围为320-375之间
当前html中的font-size为14px 1rem=14px
如果从ps设计图上量出宽度为100px；
rem=ps中量出的px/2dpr 14px

VW 适口宽度的百分比 VH 适口高度的百分比

设计图为640px
100vm=320px
1vm=3.2px
100px/3.2px=31.25vw

 如果量出的为88px
88px=？rem
88px/2=44px
31.25vm=100px
44px/100px=0.44rem

font-size: 0.525rem!important; !important的优先级最高

5.渐变

background：linear-gradient（to left top ，red，yellow）；线性渐变
background: radial-gradient(10% 50%,red,yellow,blue); 径向渐变
background: repeating-linear-gradient(red 10%,yellow 20%,blue 20%);
background: repeating-radial-gradient(10% 50%,red,yellow,blue); 重复渐变

6.过渡

transition:2s; div:hover {background-position:50px;}

CSS 2D transform：translate（x,y）2D旋转 以xy两轴 水平垂直移动
rotate（x deg，y deg）2D 以xy轴 旋转
scale（0-1）缩放
skew（度数 deg）

7.3D过渡

做立方体盒子时 一定要在父元素上加上transform-style：preserve-3d; 要事先在父元素上设好位置倾斜 transform：rotateX（20deg）rotateY（30deg）

先将X轴旋转90度 在Z轴时 向下为正 向上为负
section:hover div:nth-child(1){
transform:rotateX(90deg) translate3d(0,150px,150px);
transform-origin: right center;
background:blue;
} 以右边向下翻

		section:hover div:nth-child(3){
			transform:rotateX(90deg) translate3d(0px,150px,-150px);
			transform-origin: right center;
			background:#FFC0CB;
		}以右边向上翻

先将Y轴旋转90度 Y轴为0 在z轴时 向上为正 向下为负 在X轴 向下为负 向上为正
section:hover div:nth-child(2){
transform:rotateY(90deg) translate3d(-150px,0px,150px);
transform-origin: center center;
background:darkcyan;
}向下边往上翻
section:hover div:nth-child(4){
transform:rotateY(90deg) translate3d(-150px,0px,-150px);
transform-origin: center center;
background:yellow;opacity: 0.8;
}向左上翻
在Z轴时 向上为正 向下为负
section:hover div:nth-child(5){
transform: translateZ(300px);
transform-origin: center center;
background:green;opacity: 0.8;
}向上移动

8.过渡

nth-child与nth-of-type区别：
ele:nth-of-type(n)的意义就是选择父元素下的第n个ele类型的子元素。

nth-child的关键词是child，它关心的是所有子元素。它会对所有子元素生效。
ele:nth-child的意义就是选择父元素下的第n个子元素，如果他是ele类型的，那么对他生效，如果他不是ele类型的，则不生效。

简而言之，nth-child影响到了所有child子元素，而nth-of-type则影响到了相应type的子元素。


nth-of-type的性能比nth-child好，限制条件少

8.动画 animation

animation:movie 2s linear线性平滑 2s延迟 infinite反复 alternate反弹;

from to 相当于 0% 100%
@keyframes movie{
from{}
to{}
}