一、CSS简介
CSS，全拼Cascading Style Sheets，层叠样式表，是由Tim Berners Lee的同事赖先生（Håkon Wium Lie）首先提出的，目前使用最广泛的版本为CSS2.1。
二、CSS语法
① 选择器 {
属性名：属性值；}
② @语法
@charset "UTF-8";
@import url(2.css);
@media (min-width：100px) and (max-width: 200px){
语法①
}
注意事项：@charset "UTF-8" 必须放在第一行，charset是字符集，UTF-8是字符编码encoding。
三、如何调试CSS
主要是Border调试法
四、文档流
文档流动方向
- inline元素，从左到右，直到一行排满再重起一行。
- block元素，从上到下，依次排列，每个元素占一行。
- inline-block，也是从左到右的。
宽度
- display为inline元素的宽度由里面inline元素的宽度决定，不能用width，不要再inline元素中加block元素。
- block默认自动计算宽度，可用width制定（但尽量不要写width：100%）。
- inline-block默认于inline一样，但可用width制定。
高度
- inline高度由行高（line-height）间接确定，跟height、padding无关。
- bolck高度由里面的文档流中的元素决定，可以设height。
- inline-block 类似于block。
五、overflow 溢出
- 当内容大于高度或宽度（容器）时，内容会溢出
- 可用overflow来设置是否显示滚动条
- auto是灵活设置，超出时有，不超出时没有
- scroll是一直有
- hidden直接隐藏溢出部分
- visible直接显示溢出部分
六、脱离文档流
position： absolute；
float：left；
脱离文档流的元素高度不包含在div中
七、两种盒模型
①content-box内容盒，宽度只包含content
content-box
②border-box边框盒，宽度包含border、padding、content
border-box
一般用boeder-box
八、margin合并
只有上下合并，左右不合并
①父子margin合并，爸爸的上边距与第一个儿子上边距合并，爸爸的下边距与最后一个儿子下边距合并。
②兄弟margin合并
阻止父子合并可使用 padding/border/overflow：hidden
阻止兄弟合并使用display：inline-block，兄弟合并是符合预期的。
九、CSS布局
- Float布局（可用于IE浏览器）
- 步骤
子元素加float：left和width
父元素加class =.clearfix
.clearfix: after{
content: '';
display: block;
clear: both;
一般写CSS时，去掉原来的样式
*{margin: 0;padding: 0;box-sizing: border-box;}
- 经验
最后一个div先不设width
IE6/7存在双倍margin问题，有两种解决办法：
①将错就错，把margin减半
margin-left: 10px;
-margin-left: 5px;
②加display: inline-block;
-
flex布局
image.png
父元素container是一个弹性容器，items为子元素
让一个元素变成flex容器
.container{
display: flex; /*or inline-flex*/}
改变items流动方向
.container{
flex-direction: column / row / row-reverse / column-reverse;}
默认的是row横着布局，column是竖着布局，row-reverse是从右往左排，column-reverse是从下往上排
改变折行
.container{
flex-wrap: nowrap / wrap / wrap-reverse;}
默认为nowrap不折行，wrap是折行，wrap-reverse是倒着折行
横轴对齐方式
.container{
justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;}
flex-start左对齐，flex-end右对齐，center居中，space-between把空间放在子元素之间，space-around把空间放子元素周围，每个子元素两边相等，space-evenly平均围绕，横轴对齐方式需在flex-direction不变的情况下
纵轴对齐方式
.container{
align-items: center / flex-start / flex-end / stretch;}
- Grid布局
grid也分container和items，成为container
.container{
display: grid / inline-grid;}
行和列
.container{
grid-template-columns: 40px 50px auto 50px;
grid-template-rows: 25% 100px auto;
}
控制所占行数，以线为准
.container{
grid-row-start: 1;
grid-row-end: 4;
}
控制所占列数
.container{
grid-column-start: 1;
grid-column-end: 4;
}
十、CSS动画浏览器渲染原理
- 根据HTML构建HTML的树（DOM）
- 根据CSS构建CSS的树（CSSOM）
- 将两颗树合并为一颗渲染树（Reder Tree）
- layout布局（文档流、盒模型、计算大小和位置）
- paint绘制（把边框颜色、文字颜色、阴影等画出来）
- composite合成（根据层叠关系展示画面）
不同的属性，渲染流程不同
- 全走一遍
div.remove() 会触发当前小时，其他元素重新布局，再绘制合成 - 跳过layout
改变背景颜色，不需要再布局，直接绘制合成 - 跳过layout、paint
改变transform，只需重新合成
十一、CSS 动画的两种做法（transition 和 animation）
- transition 过渡
- 作用
补充中间帧 - 语法
transition：属性名 时长 过渡方式 延迟（transitio：left 1s linear）
可以用逗号分隔两个不同属性（transition：left 1s，top 2s）
可以用all代表所有属性（transition：all 1s）
过渡方式有： linear/eas（默认的）/ease-in/ease-out/ease-in-out......
注意：并不是所有属性都能过渡
display：none =>block无法过渡，一般改成visibility：hidden =>visible
background无法过渡
opacity透明度无法过渡
- animation 动画
当有中间点时可使用animation，因为transition需要使用两次transform
- 需声明关键帧@keyframes，两种写法
from to
@keyframes slidein{
from{
transform: translateX(0%);
}
to{
transform: translateX(100%);
}
}
百分数
@keyframes identifier{
0%{top: 0; left: 0;}
30%{top: 50px;}
68%, 72%{left: 50px;}
100%{top: 100px; left: 100%;}
}
-
添加动画
-
语法
animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
时长：1s或1000ms
过渡方式：跟transition取值一样
次数：3或2.4或infinite（无穷尽）
方向：reverse（相反）/alternate（轮流）/alternate-reverse（交替反转）
填充模式：none/forwards/backwards/both
是否暂停：paused/running
网友评论