《CSS 科学知识归纳》
详解 CSS
CSS 是 Håkon Wium Lie 赖老先生发明者的，CSS 吓人的地方是它是竹节式样表，如式样竹节（能数次对同一个示例展开式样新闻稿）、示例竹节（能用不同选择器对同一个原素展开式样新闻稿）、文档竹节（能用数个文档展开竹节），这些优点使 CSS 极其灵巧，也为 CSS 后来被聊著遗留下安全隐患。CSS 的版
版时间重点项目CSS 11996年不必管CSS 21998年加进功能定位、z-index、media、不必管CSS 2.12004~2011年采用最广为的版(IE全力支持)CSS 31999年开始起算当代版，分组件(IE8部分全力支持)CSS 4*分组件升级换代实战经验
可以在caniuse.com查阅什么样应用程序全力支持 CSS 的什么样优点Border 增容法：揣测某一原素有问题时就给这个原素加 border，border 没再次出现表明示例错了或是错别字，border 出现了看一看边界线与否合乎预期，bug 化解了才能把 border 删去*文档格式流
壳状路径
inline 原素右面，抵达最左边才会转义block 原素由上而下，每一个都另起带队inline-block 也是右面长度
inline 长度为外部 inline 原素的和，不能用 width 选定block 预设手动排序长度，能用 width 选定inline-block 紧密结合前二者特征，能用 width 选定度
inline 度由 line-height 间接地确认，跟 height 毫无关系block 度由外部文档格式流原素决定，能设 heightinline-block 跟 block 类似于，能设 height*盒数学模型
CSS 有三种盒数学模型，分别是：
content-box 文本盒-以箱子里的文本为边界线border-box 前面板盒-以前面板为边界线式子
content-box width = 文本长度border-box width = 文本长度 + padding + bordermargin 分拆
margin 分拆有兄妹二人 margin 分拆以及兄妹 margin 分拆兄妹二人分拆能采用：padding/border、overflow：hidden、display：flex 化解兄妹分拆能用 inline-block 消解关于产业布局
CSS 的产业布局有
一般来说长度产业布局，一般长度为 960/1000/1024px，不一般来说长度产业布局，主要靠文档格式流的基本原理来产业布局积极响应式产业布局，PC 上一般来说长度，智能手机上不一般来说长度的一种混和产业布局产业布局方法有
float（须要相容 IE9 时采用，须要给父原素加进 clearfix）flex（一维产业布局采用 flex，大部分应用程序都相容 flex）Grid（二维产业布局用 Grid，但现在 Grid 产业布局还未普及）应用程序渲染过程
根据 HTML 构建 HTML 数(DOM)根据 CSS 构建 CSS 树(CSSOM)将两棵树分拆成一颗渲染树(render tree)Layout 产业布局(文档格式流、盒数学模型、排序大小和位置)Paint 绘制(把前面板颜色、文字颜色、阴影等画出来)Composit 合成 (根据竹节关系展示画面)CSS 动画的三种做法
1.transform(变形)
四个常用功能
位移 translate缩放 scale旋转 rotate倾斜 skewtransition(过渡)
transition 的作用是用来补充中间帧
语法
transition: 属性名 时长 过渡方式 延迟transition：left 200ms linear能用逗号分隔两个不同属性transition：left 200ms,top 400ms能用 all 代表所有属性过渡方式有：linear | ease | ease-in | ease-out | ease-in-out……实战经验
一般都须要配合 transition 过渡,transition 属性能手动脑补中间帧inline 原素不全力支持 transform，须要先变成 block并不是所有属性都能过渡，display：none => dispaly:block 没法过渡一般改成 visibility: hidden => visible过渡必须要有起始注意性能
并没有 repaint(重新绘制)比改 left 性能好采用示例(使用 transform 制作鼠标悬停时红心放大)
<div class=“heart”>
<div class=“left”></div>
<div class=“right”></div>
<div class=“bottom”></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.heart {
margin: 100px;
display: inline–block;
position: relative;
transition: all 1s; /** all表示所有属性 */
}
.heart:hover {
transform: scale(1.5);/**鼠标悬停时红心放大1.5倍 */
}
.heart > .left {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateX(31px);/**旋转45度 向X轴旋转31px */
bottom: 50px;
left: -50px;
border-radius: 50% 0 0 50%;
}
.heart > .right {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateY(31px);/**旋转45度 向Y轴移动31px */
bottom: 50px;
right: -50px;
border-radius: 50% 50% 0 0;
}
.heart > .bottom {
background-color: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
2.animation
采用方法
新闻稿关键帧 @keyframes xxx加进动画缩写语法
animation: 时长 | 过渡方式 | 延迟 | 次数 | 路径 | 填充模式 | 与否暂停 | 动画名
加 forwards 能让动画停在最后一帧
采用示例 (采用 animation 制作跳动的红心)
<div class=“heart”>
<div class=“left”></div>
<div class=“right”></div>
<div class=“bottom”></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.heart {
margin: 100px;
display: inline–block;
position: relative;
animation: .5s heart infinite alternate–reverse;/**时长为0.5s 动画名为heart 一直执行 动画反向播放*/
}
@keyframes heart {
0%{
transform: scale(1);
}
100%{
transform: scale(1.2);
}
}
.heart > .left {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateX(31px);/**旋转45度 向X轴旋转31px */
bottom: 50px;
left: -50px;
border-radius: 50% 0 0 50%;
}
.heart > .right {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateY(31px);/**旋转45度 向Y轴移动31px */
bottom: 50px;
right: -50px;
border-radius: 50% 50% 0 0;
}
.heart > .bottom {
background-color: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
