CSS3
1、层级选择器。
1、子代选择器：父选择器>子选择器；(仅有儿子)
2、后代选择器：父选择器 后代选择器；(所有后代)
3、下一个兄弟选择器：前一个元素选择器+后一个元素选择器；(只有下一个兄弟)
4、后面所有兄弟选择器：前一个元素选择器~后面所有元素选择器；(后面所有兄弟)
2、属性选择器。
1、[属性名]：带有属性名的元素被选择；
2、元素名[属性名]：对应元素名上带有相应属性名的元素被选择；
3、元素名[属性名=属性值]:对应元素名上带有相应属性名且是对应属性值的元素被选择；
(=完全匹配)(~=包含匹配)(^=(开头是)/$=(结尾是)/*=(内容有)模糊匹配)
3、结构伪类选择器。
优势：不用单独给元素加新的class。伪类是:。
1、:first-child //第一个孩子
2、:last-child //最后一个孩子
3、:nth-child(n) //第n个孩子
4、:nth-child(2n) //偶数孩子
5、:nth-child(2n+1) //奇数孩子
6、:nth-child(even) //偶数孩子
7、:nth-child(odd) //奇数孩子
8、:only-child //只有唯一一个孩子
9、:empty //没有孩子(空格换行也算孩子)
10、:root //根节点 html文件中根元素是html
11、:nth-child(n+2) //位置大于等于2的标签
12、:nth-child(an+b) //a表示周期长度 b表示偏移值
注意：使用方法是，比如header下面的第一个div，则是header div:first-child。
4、目标伪类选择器。
//点到之后是目标结点则加上对应的样式
元素名:target
<style>
div.content
{
display: none;
}
div.content:target
{
display: block;
}
</style>
<div>
<a href="#aaa">aaa</a>
<div id="aaa" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quibusdam ipsa eos corporis tempora repellendus hic velit est, error officiis ex, ipsum porro magni impedit debitis molestiae necessitatibus. Repellendus, facere?</div>
</div>
<div>
<a href="#bbb">bbb</a>
<div id="bbb" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quibusdam ipsa eos corporis tempora repellendus hic velit est, error officiis ex, ipsum porro magni impedit debitis molestiae necessitatibus. Repellendus, facere?</div>
</div>
<div>
<a href="#ccc">ccc</a>
<div id="ccc" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quibusdam ipsa eos corporis tempora repellendus hic velit est, error officiis ex, ipsum porro magni impedit debitis molestiae necessitatibus. Repellendus, facere?</div>
</div>
5、UI状态伪类选择器。
//应用于form表单
1、input:enabled //设置可用元素的样式
2、input:disabled //设置禁用元素的样式
3、input:focus //设置焦点元素的样式
4、input:checked //设置选中元素的样式
//去掉默认样式 appearance:none
::selection //选中文字
:not() //否定选择器
6、阴影属性。
文本阴影： text-shadow:10px 10px 10px red; //水平方向位移 垂直方向位移 模糊程度 阴影颜色
多个阴影： text-shadow:10px 10px 10px red,0px -10px 1px yellow;
盒子阴影： box-shadow:同上 正值是向右向下 负值是向左向上
7、圆角属性。
圆角属性： border-radius:10px; //10px指的是四个角往内部走的距离
// 一个值：四个角 (常用)
// 两个值：左上右下 左下右上
// 三个值：左上 左下右上 右下
// 四个值：顺时针 左上 右上 右下 左下
border-top-left-radius 左上
border-top-right-radius 右上
border-bottom-left-radius 左下
border-bottom-right-radius 右下
// border-radius:30px/60px; 水平/垂直
//border-radius:10px 20px 30px 40px/50px 60px 70px 80px;
正方形变成圆： 将border-radius设置为盒子的一半 盒子包含content和padding以及border 或者50%
先画图再看四个角如何移动即可设置各种形状
8、字体引入。
<style>
@font-face{ /*字体引入*/
font-family:wxm; /*字体名*/
src:url(font/STHUPO.TTF); /*字体路径*/
}
@font-face{
font-family:hx;
src:url(font/ygyxsziti2.0.ttf);
}
.box1{
font-family: wxm;
font-size:50px;
}
.box2{
font-family: hx;
font-size:50px;
}
</style>
<div class="box1">赵钱孙李</div>
<div class="box2">赵钱孙李</div>
9、怪异盒模型。
box-sizing: content-box; //标准盒模型 width和height指的是内容
box-sizing: border-box; //怪异盒模型 width和height指的是内容和内边距还有边界
//对于含有padding以及border的box的width和height设置十分友好
10、弹性盒。
// 弹性盒模型特别适合移动端布局
display:flex; //子元素默认横向排列;行内元素变成块级元素;只有一个元素时margin:auto自动居中;
// 修改主轴方向 默认情况下主轴横向排列 可以修改使得主轴纵向排列
flex-direction:column(纵向)/row(横向)/row-reverse(横向反向)/column-reverse(纵向反向);
// 调整主轴对齐方式 从左向右 从上向下
justify-content:flex-start(起始)/flex-end(结束)/center(中间)/space-between(两端对齐)/space-around(最左边和最右边是两个盒子之间距离的一半);
// 调整侧轴对齐方式
align-items:flex-start(起始)/flex-end(结束)/center(中间);
// 折行 折行后等间距排列
flex-wrap:wrap;
// 调整折行后的行间距 如果东西很多则间距很小 反之如果东西很少则间距很大
align-content:flex-start/flex-end/center/space-between/space-around;
项目对齐方式。
// 不是针对外部盒子 是针对盒子中的元素设置 指的是项目靠主轴何处对齐
align-self:flex-start/flex-end/center/baseline/stretch(主轴横轴不设置height则撑满高度);
// 调整项目顺序
order:1/2/3/4/5... //数值越大越靠主轴后方向
// 剩余宽高
flex:1/2/3... //如果只有一个元素设置则占满剩余主轴 如果多个元素设置则按比例等分
11、字体图标。
阿里巴巴：https://www.iconfont.cn/ font-class 字体图标可当作文本
<link rel="stylesheet" href="font/iconfont.css">
12、移动端布局。
css像素(模拟器上的分辨率)：设备的独立像素值；
物理像素(截图大小的分辨率)：设备像素；
设备像素比(dpr)=物理像素/css像素；
iphone6 1css=2物理像素
s5 1css=3物理像素
设计稿一般提供一份物理像素 (1)百分比 (2)弹性布局 (3)rem
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// width=device-width指的是理想宽度等于设备宽度
// initial-scale=1.0指的是初始缩放比是1
根据css像素与物理分辨率等比转换。
// 让滚动条不显示
::-webkit-scrollbar
{
display: none;
}
// 水平滚动
flex-shrink:0;
header ul
{
display: flex;
overflow: auto;
}
header ul li
{
flex-shrink: 0;
line-height: 45px;
padding: 0 10px;
}
13、瀑布流布局。
column-count //设置显示的列数
column-gap //设置列间距
column-rule //设置列边框
column-fill //设置列高度统一 balance(一致)/auto(占满)
column-span //设置元素跨列 all(所有)/none(无) 加给需要横跨的元素
break-inside:avoid //设置禁止盒子内部折行
14、响应式布局。
响应式布局：随着屏幕的宽度变化响应显示最完美的布局。(媒体查询)
/*大于1000px*/
@media screen and (min-width:1000px)
{
body{
background-color: yellow;
}
}
/*小于1000px且大于500px*/
@media screen and (max-width:1000px) and (min-width:500px)
{
body{
background-color: red;
}
}
/*小于500px*/
@media screen and (max-width:500px)
{
body{
background-color: green;
}
orientation:portrait (竖屏)
orientation:landscape (横屏)
15、em与rem。
px: 50px // css像素值 一个个小方格
em: 相对单位 相对于父元素的字体大小 div width:10em // 递推计算
rem: 相对单位 相对于根元素的字体大小 div width:10rem // 清晰直观
<script>
// fontsize计算 fontsize=当前设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size document.documentElement.style.fontSize=document.documentElement.clientWidth/750*100+'px'
</script>
首先设置html的font-size，接着将其余的px转换为html对应的rem。
px to rem & rpx & vw (cssrem)
// 375px-选中 alt+z/F1 > CSSRem:Px to Rem
// 文件-首选项-Cssrem: Root Font Size(默认16px)
16、vw与vh。
// 在不同的设备上视口高度或者宽度不一样
vw: view-width 100vw=视口宽度
vh: view-height 100vh=视口高度
首先设置html的font-size，然后将其余的px转换为html对应的rem，接着font-size与物理分辨率等比转换为vw。
17、渐变。
// 线性渐变：从一个方向向另一个方向 支持多颜色渐变 支持方向 支持角度
background: linear-gradient(red,green);
background: linear-gradient(red,green,blue);
background: linear-gradient(to left,red,green);
background: linear-gradient(to bottom right,red,green);
background: linear-gradient(0deg,red,green);
// 径向渐变：从一个点向四周 支持百分比 其指的是从哪里开始渐变 0~10 red 10~30 yellow 30~100 green
background: radial-gradient(red,yellow);
background: radial-gradient(red 0%,yellow 10%,green 30%);
// 重复渐变：重复线性渐变 重复径向渐变
background: repeating-linear-gradient(red 0%,yellow 10%,green 30%);
background: repeating-radial-gradient(red 0%,yellow 10%,green 30%);
18、动画过渡。
transition:all(所有属性) 2s(动画时间) linear(均速) 2s(延迟时间)
// 如果将其放在div中则移入移出均是动画 反之将其放在hover中则只有移入是动画
// all不支持display属性 但是可以通过height配合overflow:hidden来实现
linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
// cubic-bezier 过渡类型
transition-property 过渡属性
transition-duration 动画时间
transition-delay 延迟时间
transition-timing-function 过渡类型
19、动画平移。
transform:translateX(100px);
transform:translateY(100px);
transform:translateX(100px) translateY(100px); // 如果写两个transform则会被覆盖
transform:translate(100px,100px);
transform:scale(0~n); // 放大缩小n倍
// 一般配合overflow:hidden
transform:scaleX(0~n);
transform:scaleY(0~n);
transform-origin:left top; // 改变中心点的位置 默认是center
transform:rotate(10deg); // 正值顺时针 负值逆时针 绕着中心点旋转
transform:rotateX(10deg); // 绕着X轴旋转
transform:rotateY(10deg); // 绕着Y轴旋转
transform:rotateZ(10deg); // 绕着中心点旋转
div:hover // transition配合transform一起使用
{
transform: rotate(360deg);
transition: all 3s;
}
transform:skew(x,y) // 正值拽着右下角往右下边拉动倾斜
transform:skewX(x) // 正值拽着右下角往右边拉动倾斜
transform:skewY(y) // 正值拽着右下角往下边拉动倾斜
注意：首先按照各元素同框形式写好定位，然后利用平移和过渡完成其移动时的效果变换。由于平移和过渡是在独立图层上实现的，故其相对于移动时变换定位更加有效。
//100%是相对于自身的100% 相当于向左走隐藏自己
transform: translateX(-自身宽度);
transform: translateX(-100%);
注意：定位和平移结合使用可以实现水平居中和垂直居中。
// 实现元素内部垂直居中
top:50%;
transform: translateY(-50%);
// 实现元素内部水平居中
left:50%;
transform: translateX(-50%);
// 实现元素内部水平垂直居中
left:50%;
top:50%;
transform: translate(-50%,-50%);
20、动画关键帧。
动画关键帧相对于动画过渡和动画平移的区别是，可以在页面加载出来后即可显示动画效果。
/*infinite表示动画执行无限次*/
animation: wxm 2s linear infinite;
/*声明动画*/
@keyframes wxm {
/*初始状态*/
from{
width: 200px;
height:200px;
background-color: red;
}
/*结束状态*/
to{
width: 400px;
height:600px;
background-color: green;
}
}
/*从百分之0到百分之100等价于从from到to*/
@keyframes wxm1 {
/*初始状态 等价于from*/
0%{
width: 200px;
height:200px;
background-color: green;
}
/*结束状态 等价于to*/
100%{
width: 400px;
height:600px;
background-color: red;
}
}
/*以百分比的形式定义多个状态*/
@keyframes wxm2 {
/*初始状态*/
0%{
width: 200px;
height:200px;
background-color: blue;
}
25%{
width: 200px;
height:400px;
background-color: orange;
}
50%{
width: 300px;
height:500px;
background-color: purple;
}
75%{
width: 400px;
height:600px;
background-color: pink;
}
/*结束状态*/
100%{
width: 500px;
height:700px;
background-color: aqua;
}
}
animation-name 动画名称
animation-duration 动画时间
animation-timing-function 过渡类型
animation-delay 延迟时间
animation-iteration-count 循环次数 infinite(无限次)/number(循环次数)
animation-direction 动画反向 // normal(正方向from到to)/reverse(反方向to到from)
// alternate(正方向交替 from到to再到from)/alternate-reverse(反方向交替 to到from再到to)
animation-play-state 动画状态 // 一般配合hover使用 running(运行)/paused(暂停)
animation-fill-mode: forwards; // 保留最后一帧
animation-fill-mode: backwards; // 保留第一帧
逐帧动画：逐帧动画。
/*1表示一步到达 end表示保留当前帧 看不到最后一帧 start表示保留下一帧 看不到第一帧*/
animation: run 5s steps(1,start);
animation: run 5s step-start;
animation: run 5s steps(1,end);
animation: run 5s step-end;
// 注意 一般为了看到第一帧或者最后一帧 一般设置一个多余的空白帧
动画库：动画库。
文档 https://animate.style/
动画库 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css
引入方式 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
21、3D动画。
transform-style: flat; // 2d舞台
transform-style: preserve-3d; // 3d舞台
transform: translateZ(100px); // 正值朝前走 负值朝后走 靠近屏幕叫做前 远离屏幕叫做后
transform: translate3d(0,0,100px);
一般给父盒子设置景深从而更好的观察translateZ效果
perspective: 800px;
景深一般设置为八九百但是translateZ不能设置八九百否则无法显示
transform: rotate3d(1,1,1,45deg); // 前面三个数范围为0~1
transform: scale3d(1,1,10);
22、网格布局。
注意：flex是按照行一维布局，而grid是按照行和列二维布局。
display:grid; // 网格布局
grid-template-rows // 多少行
grid-template-columns //多少列
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: repeat(3,33.33%);
grid-template-columns: repeat(3,33.33%);
grid-template-rows: repeat(auto-fill,33.33%);
grid-template-columns: repeat(auto-fill,33.33%);
fr表示自适应片段 其按照比例划分
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
grid-row-gap // 行间距
grid-column-gap //列间距
grid-gap // 复合写法
grid-template-areas:'第一行''第二行''第三行'; // 指定区域名字
.box{
grid-template-areas: 'a a c''d e f''g h i';
}
.box div:nth-child(1)
{
grid-area: a;
}
// 多余的孩子会被挤下去
网格对齐方式。(九宫格在容器中的对齐方式)
grid-auto-flow: column; // 改变顺序方向 即将原始的优先按照行排列转换为优先按照列排列
justify-content: center; // 控制水平对齐方式 start end center stretch space-around
align-content: center; // 控制垂直对齐方式 space-between space-evenly
place-content: [justify-content] [align-content] // 复合写法
项目对齐方式。(项目在九宫格中的对齐方式)
justify-items //水平对齐方式 start end center
align-items //垂直对齐方式 stretch 拉伸 占满单元格的整个宽度 (不设置宽高默认为stretch)
place-items:[justify-items] [align-items] //复合写法
项目属性。(网格线合并)
grid-column-start //左边框垂直网格线
grid-column-end //右边框垂直网格线
grid-row-start //上边框水平网格线
grid-row-end //下边框水平网格线
// 1 2 3...列 1 2 3...行 网格线数目等于单元格数目加一喔！
grid-column:start/end;
grid-row:start/end;
// 多余会被挤掉 (此方式类似于区域划分) 区域划分加在容器上 网格线合并加在项目上
