六、CSS
365psd、psd web、dribble.com
<一>重要概念
1.文档流
1）流动方向
inline 元素从左到右，到达最右边才会换行，不要在inline里写block元素
block 元素从上到下，每一个都另起一行
inline-block 也是从左到右
2）宽度
inline 宽度为内部 inline 元素的和，不能用 width 指定
inline-block 结合前两者特点，可用 width
3）高度
inline 高度由 line-height 间接确定，跟 height 无关
block 高度由内部文档流元素决定，可以设 height
inline-block 跟 block 类似，可以设置 height
4）overflow：hidden（隐藏溢出部分）、visible（显示溢出部分）、scroll（永远显示）、auto（灵活设置）
overflow-x\overflow-y
5）脱离文档流：
position：absolute/fixed
float：left
2.盒模型
border-Box 边框盒 - 边框才是盒子的边界
2）公式
border-Box width = 内容宽度 + padding + border
3）哪个好用
border-Box 好用
4）margin上下合并：
<1>哪些情况会合并
父子 margin 合并
兄弟 margin 合并
<2>如何阻止合并
父子合并用 padding / border 挡住
父子合并用 overflow: hidden 挡住
父子合并用 display: flex，不知道为什么
兄弟合并是符合预期的
兄弟合并可以用 display: inline-block 消除
3.长度单位
1)px 像素
2)em 相对于自身 font-size 的倍数
3)百分数
4)整数
5)rem
6)vw 和 vh
4.颜色
1)十六进制 #FF6600 或者 #F60
2)RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)：a代表透明度
3)hsl 颜色 hsl(360,100%,100%)
<二>CSS布局
1.
2.float布局
1）步骤
子元素加float：left和width
父元素加.clearfix
2)经验
（1）最后一个块元素不加width，可以给一个max-width
（2）IE6/7:margin-left:10px + _margin-left:5px
or display:inline-block
3)利用负margin进行平均布局
代码：http://js.jirengu.com/wutigireje/1/edit?html,css,js,output
http://js.jirengu.com/darogaxeqa/1/edit
3.flex布局
1)container属性
flex-direction:row;/*row-reverse/column/colume-reverse*/
flex-wrap:Nowrap;/*wrap/wrap-reverse*/
justify-content:space-between;/*space-around/space-evenly*/（横轴）
align-items:streach/center（纵轴）
align-content:streach/end/around/
2)item属性
(1)order可改变顺序
(2)flex-grow控制宽度（针对多余空间）
(3)flex-shrink:压缩宽度（针对多余空间）
flex-shrink:0防止变瘦
(4)flex-basis：基准宽度
(5)flex:flex-grow flex-shrink flex-basis
(6)align-self单独控制单个item
3)display：flex
4.grid布局
1）grid-temple-columns:40px 50px auto 50px 40px//横向布局
2）grid-temple-rows:25% 100px auto;//纵向布局
3）grid-row/column-start/end:第几根线
4）grid-（row/column）-gap:间隙
5）grid-template-areas:可放多个字符串
http://js.jirengu.com/fucucowafa/1/edit?html,css,output
5.CSS定位
1）div分层
2）position
<1>取值
(1)static:默认值（在文档流中）
(2)relative
升起来，在文档流中，位置偏移
给absolute元素做父元素
配合z-index使用
(3)absolute
找祖先元素第一个被定位的元素
(4)fixed
以viewport为基准
(5)stiky粘滞定位
<2>层叠上下文
（2）每个小世界的z-index与外界无关，只有同一个世界内才能相互影响
（3）opacity影响该整体内所有元素
6.CSS动画
1）各属性动画适用方式：https://csstriggers.com/
2）transform全解
transform:scale() rotate()
<1>translate
(1)translateX/Y/Z:**px
(2)translate(%,%),translateX/Y/Z(%):偏移自身长度的百分比
http://js.jirengu.com/wopahovika/1/edit?html,css,js,output
<2>scale缩放
(1)scaleX/Y(0.5/1.5)
(2)scale(1.5,0.5)
<3>rotate旋转
(1)rotate(1080deg)
(2)rotateX/Y
http://js.jirengu.com/wowonayaro/1/edit?html,css,output
<4>skew
(1)skew(1080deg)
(2)skewX/Y
<5>实例
跳动的心：http://js.jirengu.com/laboniloqa/1/edit?html,css,output
3）transition过渡
<1>补充中间帧
<2>transition:属性名 时长 过渡方式 延迟
<3>transition:left 200ms linear(匀速)
<4>可用逗号分隔两不同属性
<5>transition：left 200ms,top 400ms
<6>all代表全部属性 all 200ms
<7>过渡方式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step-start/step-end/steps
<8>display:none->block没办法过渡,应该用visibility：hidden->visible
<9>background可以过渡
<10>opacity可过渡
<11>必须要有起始
<12>利用setTimeout或监听transitioned改编动画
http://js.jirengu.com/qupiluwonu/1/edit?html,css,output
4）animation
<1>@keyframes 名字{关键帧}(from to和百分数两种写法)
<2>forwards：动画执行后不回起始
<3>animation:时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名字
<4>方向：reverse/alternate/alternate-reverse
<5>天种模式：none/forwards/backward/both
<6>是否暂停：paused/running
<7>例子：http://js.jirengu.com/yitumituhi/1/edit
原文地址：https://blog.csdn.net/weixin_41715020/article/details/117372420
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
