1.元素显示模式
块元素:独占一行,宽、高、内外边距可以设置
行内元素:一行多个,宽高、内外边距设置无效
行内块元素:可以一行多个,还可以设置宽高、内外边距
2.flex布局
(1)改子元素排列方式
flex-direction: row-reverse;
flex-direction: column;
(2)改变主轴对其方式
space-between:两边贴边,中间评分剩余空间
space-around:平分在子项的两边
justify-content: space-around;
justify-content: space-evenly;
justify-content: center;
(3)允许换行
flex-wrap: wrap;
(4)侧轴单行
align-items: center;
(5)侧轴对齐方式
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
flex: ; 占用剩余空间的多少
order 值越小,排列越靠前 没有设置的子项目,默认为0
3.去除标签外默认边距
margin: 0;
padding: 0;
4.css的继承性
会继承的css属性 :字体属性 、文本属性、文字颜色
不会继承的:边框、背景、内外边距、宽高
5.文本设计
(1)字体
@font-face {
font-family: ;
src: url();
}
(2)渐变
background-image: linear-gradient();
background-image: repeating-linear-gradient();
background-image: radial-gradient();
(3)体检
css书写规范:
选择器 {
属性名: 属性值;
属性名: 属性值;
}
(4)浮动
float: ;
6. 2d转换
移动
transform: translateX(200px) translateY(100px); */
transform: translateY(100px);
单独写会发生覆盖,复合:x ,y
transform: translate(50px, 50px);
旋转
transform: rotateZ(45deg);
缩放
transform: scaleX(1.5) scaleY(2);
transform: scale(0.5);
transform: translateX(100px) translateY(100px) rotateZ(45deg);
transform: scale(0.5) translate(100px, 100px) rotateZ(45deg);
改原点 对移动无影响,对旋转、缩放有响*/
transform-origin: top left
7.3d转换
transform: scaleZ(2);
8.过度
transition-property: width, height, background-color;
transition: all 3s steps(120);
9.动画
1、定义动画
@keyframes movie {
from {
border-radius: 0;
transform: translateX(0) rotateZ(0);
}
to {
border-radius: 50%;
transform: translateX(1100px) rotateZ(360deg);
}
}
animation-name:定义的动画名字
animation-name: movie;
animation-duration:动画执行所需时间
animation-duration: 3s;
animation-delay:动画延迟时间
animation-delay: 1s;
animation-timing-function 动画方式
animation-timing-function: steps(12);
控制动画执行次数
animation-iteration-count: infinite;
动画方向
animation-direction: alternate;
(卸载定义动画的盒子里)