css旋转45度_CSS知识总结
⼀、CSS介绍
CSS指层叠样式表，其作⽤是给HTML提供了⼀种样式描述，定义了其中元素的显⽰⽅式。
CSS使⽤最⼴泛是2.1版本，CSS3之后是2.1各模块的升级版
⼆、CSS语法
选择器 {
属性名：属性值；属性名：属性值;
/*注释*/
}
注意事项
所有符号都是英⽂符号，如果写错了，浏览器会警告
区分⼤⼩写，a 和 A 是不同的东西
没有 // 注释
最后⼀个分号可以省略，但建议不要省略
任何地⽅写错了，都不会报错，浏览器会直接忽略
三、调试⽅法
1. W3C在线验证器
2. VScode看代码颜⾊
3. Webstorm看代码颜⾊
4. 使⽤浏览器的开发者⼯具查看警告
5. Border调试法（最重要，做法是在某元素后添加border，若边框没出现，说明选择器错了或者语法错了
四、⽂档流
⽂档流就是⽂档流动⽅向
1、流动⽅向
inline 元素从左到右，到达最右边才会换⾏
block 元素从上到下，每个都另起⼀⾏
inline-block 也是从左到右，每个元素成块在⼀⾏
2、宽度
inline 宽度为内部inline元素的和，不能⽤width指定
block 默认⾃动计算宽度，可⽤width指定
inline-block 结合前两者特点，可⽤width指定
3、⾼度
inline ⾼度由line-height间接决定，与height⽆关
blokc ⾼度由内部⽂档流元素决定，可以设置height（脱离⽂档流后不算⾼度，float 与 position：absolut/fixed可以让元素脱离⽂档流）
inline-block 跟block类似，可以设置height
4、⽂档流特殊情况：对block 内容超出 height 的⾼度，可以使⽤overflow弥补
overflow:hidden /*隐藏超出内容*/
overflow:visible /*直接显⽰溢出内容*/
overflow:scroll /*有滚轮，但不超出时都有滚轮*/
overflow:auto /*scroll的升级版*/
五、盒模型（box-sizing）
1、类型
context-box 内容盒模型-内容就是盒⼦的边界
border-box 边框盒模型-边框才是盒⼦的边界
2、宽度
context-box width=内容宽度box sizing
border-box width=内容宽度+padding+border
3、推荐
border-box更好⽤，因为可以同时指定内容、padding、border的宽度
5、⼩知识
margin合并
⽗⼦上下margin会合并
兄弟margin会合并
阻⽌合并的⽅法
⽗⼦合并⽤padding/border、overflow：hidden、display：flex挡住
兄弟合并⽤inline-block消除
六、CSS布局
1、float布局
步骤：
⼦元素css⾥加上float:left和width
在⽗元素添加clearfix类
.clearfix{
context:' ';
display:block;
clear:both;
}
经验：
设计时会流⼀些空间或者最后⼀个不设置width
不需要做响应式，这个时专门为IE准备
IE 6/7有双倍margin bug（解决：IE 6/7把margin减半或加上display：inline-block）2、flex布局
/*重点记住*/
/
*⽗元素变成flex容器*/
.container{
display: flex;/*or inline-flex*/
}
/*改变容器⾥item流动⽅向*/
.contant{
flex-direction:row|column; /*item row横排、column竖排*/
}
/*item换⾏*/
.contant{
flex-wrap:wrap;
}
/*item 横排对齐⽅式*/
.item{
justify-content:center/space-between;/*横排居中对齐左右对齐*/
}
/*item 竖排对齐⽅式*/
.item{
align-items:center;/*竖排居中对齐*/
}
3、grid布局
/*重点记住*/
/
*⽗元素变成grid容器*/
.container{
display: grid;/*or inline-flex*/
}
/*⾏列设置*/
.container{
grid-template-columns:40px 50px auto 50px 50px;/*列宽40px 50px ⾃动 50px 40px*/
grid-template-rows:25% 100px auto;/*⾏宽25% 100px ⾃动*/
/*还可以⽤fr ⼀份⼀份代替 1fr 50px 25% auto*/
}
/*单元格的间隙*/
.
container{
grid-gap:12px /*每个格上下左右之间间隙12px*/
grid-row-gap:12px /*每个格左右之间间隙12px*/
grid-column-gap:12px /*每个格上下之间间隙12px*/
}
/*快速布局 grid-template-areas*/
.container{
grid-template-areas:
"A A B"
"C C B"
"D D D";
}
.item1/2/3/4{
grid-area:A/B/C/D;  /*例⼦分item1 item2 item3 item4 类，grid-area属性为 A B C D*/
}
七、CSS定位
1、div的分层（从最底层到最顶层）
z-index:-1>background>border>块级⼦元素>浮动元素>内联⼦元素>z-index:1;
2、position
position:relative 相对定位，⼀般给absolute元素做爸爸，配合z-index（层叠）
positio:absolute 绝对定位，脱离原来位置另其⼀层（关闭按钮），⿏标提⽰，配合z-index，要善⽤left:100%、left：50%加负margin;
position:fixed 悬浮框，烦⼈⼴告、回到顶层按钮，不要⽤到⼿机上
更多查阅
层叠上下⽂
⼋、CSS动画
1、浏览器渲染过程
根据HTML构建HTML树
根据CSS构建CSS树
将两棵树合并成⼀颗渲染树
Layout布局
Paint绘制
Compose合成
2、CSS 动画的两种做法
/*位移 translate*/
transform:translateX(50px); /*X⽅向右移动50px*/
transform:translateY(50px); /*Y⽅向上移动50px*/
transform:translateZ(50px); /*Z⽅向上移动50px*/
/*z轴要添加视点，perspective:1000px */
transform:translate(x,y);
transform:translate3d(x,y,z);
/*缩放 scale*/
transform:scale(1.5); /*放⼤1.5倍*/
transform:scale(1.5，0.5); /*X⽅向放⼤1.5倍，Y⽅向放⼤0.5倍*/ transform:scaleX(1.5); /*X⽅向放⼤1.5倍*/
transform:scaleY(1.5); /*Y⽅向放⼤1.5倍*/
/*旋转 rotate*/
transform:rotate(360deg);/*顺时针旋转360度*/
transform:rotateX(60deg);/*按X轴顺时针旋转60度*/
transform:rotateY(60deg);/*按Y轴顺时针旋转60度*/
作⽤：补充中间帧
语法：transition：属性 时长 过度⽅式 延迟
dispaly:none=>block ⽆法过渡 改成visibility:hidden=>visible c.animation
animation 与 @keyframes 配合
animation：时长 过渡⽅式 延迟 次数 ⽅向 填充模式 是否暂停 动画名语法：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。