CSS总结

CSS

选择器

基础选择器

标签 div{}
类名 .one{}
id #two{}
通用 *{}
组合 div,p{}
后代 ul li{}
*交叉 div .one{}

伪类选择器
- :hover
- :focus，
伪元素选择器
- ::before
- ::after
- ::first-letter
- ::first-line
属性选择器
- [attrname]—拥有属性例：[data-name]{}
- [attrname=value]—属性等于值例：[data-name=uek]{ color: red;}
- [attrname^=value]—开始等于值例：[data-name^=uek]{color: blue;}–开头为uek字符的都变成蓝色
- [attrname $= v a l u e] - - - 结束等于值例： [d a t a - nam e$ =uek]{color: green;}–结尾为uek字符的都变成绿色
- [attrname*=value]—包含值例：[data-name*=uek]{ color:purple}–所有包含uek字符的都变成紫色
- [attr1][attr2][attr3]… —交叉例： p[data-name]{ color:pink;}

<p data-name="list-uek">gkfj</p>

相邻选择器

"+"选择器----紧挨在h3之后的可以被选中

<style>h3+div{color:red;}</style>
<h3>标题</h3>
<div>111</div>

"~"选择器----在之前的同级元素中有h3的p标签（在h3之后的同级p标签）

<style>h3~p{color:green;}</style>
<p>22222</p>
<h3>标题</h3>
<div>111</div>
<p>3333</p>
<p>4444</p>

后代选择器

<style>ul li{width: 100px;height: 100px;border: 1px solid #5e7387;
}
</style> 
<ul><li></li><li></li>
</ul>

子代选择器

<style>ul>li{width: 100px;height: 100px;background: #ff6700;} 
</style> 
<ul><li></li><li></li>
</ul>

根据元素在父元素中的位置进行选择

:first-child： 是父元素的第一个子元素
:last-child： 是父元素的最后一个子元素
:nth-child(n)： 是父元素的第n个子元素

在nth-child中nth-child(even)表示偶数，nth-child(odd)表示奇数,nth-child(3n)，nth-child(5n)，nth-child(10n+1)

:nth-last-child： 是父元素中的倒数第n个元素
:only-child： 是父元素唯一的子元素
:first-of-type： 父元素中的子元素的第一个
:last-of-type： 父元素中的子元素的最后一个
:nth-of-type()： 父元素中的子元素的第n个
:only-of-type： 同类型（标签名相同)
:nth-last-of-type()： 父元素中的子元素的倒数第n个
:nth-last-child(n)~div：父元素中的子元素的倒数n个
:root： 根选择器
:before{ content:“”; display:block;}： 在某个元素的内容之前插入一个元素
:after{ content:“”; display:block;}：在某个元素的内容之后插入一个元素
:foucus： 获得焦点的状态

圆角

border-radius：30px;
- 一个值表示四个角，
- 两个值表示两条对角线，
- 三个值表示左上、右上和左下、右下，
- 四个值表示左上、右上、右下、左下，
- 最多可以有八个值：border-radius：10px 20px 30px 40px/20px 30px 40px 50px;

阴影

box-shadow: 5px 5px 5px 10px #000 inset;
- 第一、二个值分别表示横向的偏移和纵向的偏移
- 第三个值表示阴影的模糊程度
- 第四个值表示阴影的大小变化（正值增大，负值减小），
  颜色，
  内发光
可以设置多组

例： box-shadow: 0 0 0 1px #000,0 0 0 2px red,0 0 0 3px blue;

背景

background-attachment: fixed;—图片固定在浏览器
background-clip --背景的裁剪区域------那一部分会显示背景
- background-clip: content-box; --内容部分显示
- background-clip: border-box; --边框部分显示
- background-clip: padding-box;–内边距部分显示默认显示
- background-origin: border-box;–设置背景图片的原点
- background-size: 100px 100px ;–背景的大小
  - 100px 100px auto
  - 50% 50%
  - cover(优先铺满)
  - contain(优先展示图片)

其他

outline: 1px solid blue;—轮廓线
outline-offset: 10px;—轮廓线的边距

问题：不会随着圆角的改变而改变

outline: none;–清除表单控件获得焦点后的轮廓线
box-sizing:border-box;
box-sizing:content-box; 默认显示
calc()计算函数

transition 过渡

transition-timing-function: linear;— 匀速过渡
transition-property: a11;— 可以进行过渡的属性
transition-duration: 1s; ---- 完成一次过渡效果所需要的时间
transition-timing-function:cubic-bezier(1,0,0,1);— 速度变化趋势
- ease-in 加速，
- ease-out 减速，
- ease-in-out 先加速后减速，
- linear 匀速，
- ease 与 ease-in-out 类似。
transition-delay: 1s;— 过渡延迟

transform 转换

2D转换

 1.位移transform: translate(100px,100px);--- 沿着x轴y轴位移transform: translateX(100px);--- 沿着x轴位移transform: translateY(100px);--- 沿着y轴位移2.旋转transform: rotate(45deg);--- 旋转45度3.缩放transform: scale(1.5,1);--- 缩放（大于1放大，小于1缩小）4.斜切transform: skew(30deg，30deg);--- 斜切(横向纵向一起发生)5.基准点transform-origin: 0 0;[transform:translate(100px,100px) scale(0.5,0.5) skew(30deg,30deg) rotate(360deg);]

3D效果

 perspective:1000px;--- 景深  默认观察点在屏幕正中心transform:translateZ(800px);transform: translate3d(100px, 100px, 300px);--- x、y、z轴移动transform: rotateY(360deg);--- 沿着y轴旋转transform: rotateX(360deg);--- 沿着x轴旋转transform: rotate3d(1,1,0,360deg);--- 沿着对角线旋转transform-style: preserve-3d;--- 当前元素的子元素 呈现的方式backface-visibility: hidden;--- 设置元素背面是否可见perspective-origin:center top;--- 观察者的位置【正上方】

元素居中的问题

1.元素水平居中：margin：0 auto
2.定位元素水平居中：position：absolute;left：0;right：0;margin: 0 auto;
3.定位元素垂直居中：position: absolute;top:0;bottom: 0;margin: auto 0;
4.定位元素居中：position: absolute;left:0;top:0;right:0;bottom: 0;margin: auto;

animation动画

 定义动画的名称animation-name: demo;定义动画的时间animation-duration: 3s;定义速度变化的时间函数animation-timing-function: linear;动画的延迟animation-delay: 1s;动画的播放次数animation-iteration-count: 3;animation-iteration-count: infinite;无数次动画最终停留的状态animation-fill-mode: forwards;---停留在结束状态animation-fill-mode: backwards;---停留在开始状态方向：正向、反向、交替animation-direction: alternate;---方向交替停止animation-play-state: paused;/*鼠标放上去就停止*/

渐变生成的是图片

线性渐变

background-image: linear-gradient(to right,red,blue);--从左往右     background-image: linear-gradient(to right top,red,blue);--从左下往右上     background-image: linear-gradient(30dep,red,blue);--角度     background-image: linear-gradient(30dep,red 0,red 50%,blue 50%);--一半一半 background-image: linear-gradient(to right bottom,#fff 0,#fff 30px,transparent 0),linear-gradient(to right top,#fff 0,#fff 30px,transparent 0),linear-gradient(to left bottom,#fff 0,#fff 30px,transparent 0),linear-gradient(to left top,#fff 0,#fff 30px,transparent 0); --做切角background-image: linear-gradient(45deg,red 0,red 20%,blue 0,blue 40%,green 0,green 60%,  yellow 0,yellow 80%,pink 0);background-size: 30px 30px;background-repeat: repeat;  ---图案重复

径向渐变


background-image: radial-gradient(circle closest-side at 100px 150px,red 0,red 50%,blue 0,blue 100%,transparent 0);--形状 距离 中心点，颜色/* closest-side：最近的边  closest-corner：最近的角  farthest-side：最远的边 farthest-corner：最远的角 */background-image: radial-gradient(red 0,red 50%,blue 0,blue 100%,transparent 0);--一半一半background-image: repeating-radial-gradient(circle,red 0,red 10px,blue 0,blue 20px);--重复渐变background-image: radial-gradient(circle at 15px 15px,red 0,red 10px,transparent 0);background-size: 30px 30px;----做波点图background-image: radial-gradient(circle at 0 0,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 300px 0,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 0 300px,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 300px 300px,#fff 0,#fff 50px,transparent 0);---实现切角效果