前端复习-css

0506

先记一下Markdown语法

#：标题
—分割线
-圆点
-粗体-
–斜体–
俩空格加回车：换行
>：引用
~_删除线~
代码
MarkDown语法-菜鸟教程

day1 css浮动+基础语法+盒模型

基础语法

1. 外联样式表怎么写
2. css2.1选择器类型：标签选择器、id选择器、复合选择器
3. 复合选择器：

交集选择器
p.p1
并集选择器
p,p1
后代选择器
div p
4. css3选择器：元素关系选择器

父子关系
div>p
后一个兄弟
div+p
所有兄弟
div~p
序号选择器：first-child等等
伪类

<!--爱恨准则 active不常用-->
a:linked>a:visited>a:hover>a:active

伪元素

::first-letter(font-size: 1.5)
::first-line
::before(content:"  ")
::after

5. 原子类的使用
6. !important设定样式优先级
7. 去掉margin, padding:

body,ul,p{
    margin: 0;
    padding: 0
}

盒模型

1. 盒模型从内到外：width&height→padding→border→margin
2. box-sizing: 将border和padding内置，宽高即为实际占用空间，移动开发常用；
3. margin垂直方向塌陷：小的margin被大的包裹，水平无此现象
4. display的几种属性值：inline、block、inline-block、none，注意display: none 和visibility: none的区别，前者是完全隐藏放弃空间，后者是可见性设为隐藏依旧占用空间
5. 块级元素可以设置宽高等属性，并可以使用margin: xxpx auto来实现水平居中；注意与文本居中text-align: centre区分
6. 文本设置垂直居中：行高设置为父元素高度（line-height= xxpx;），块设置垂直居中：见后文

0507 day2 css浮动、定位、边框、背景、变形、动画

css3浮动+定位

css浮动

1. 设置浮动后均可直接设置宽高，无论行块
2. 浮动元素能挤就挤
3. 形成BFC的方式：overflow: hidden或使用position定位
4. BFC的作用：阻止margin塌陷；阻止浮动元素覆盖自身
5. 清除浮动：overflow: hidden；设置clearfix类，并使用伪元素添加一个content为空且清除左右浮动的块级元素（常用）;

.clearfix::after{
    content:'';
    clear: both;
    display: block;
}

或者隔一个有高度的“墙”：设置一个有高度的div

css定位

1. 脱离标准文档流（覆盖网页其他元素）的方式：浮动、绝对定位、固定定位
2. 子绝父相：寻找最近的相对定位父元素
3. 使用绝对定位实现垂直（水平）居中：

position: absolute;
top: 50%;
margin-top: -自己高度的一半;
<!--注意：脱离标准文档流后不能使用margin: xxpx auto进行水平居中，水平居中也要写left: 50%这样-->

4. 使用z-index: 999设定覆盖顺序

边框&背景&变形

1. 透明色transparent
2. background-image默认值为x、y均重复
3. background-size的两个属性contain和cover
4. css精灵：http请求数少，但后期改动非常麻烦。使用background-position，偏移量为负数
5. 浏览器私有前缀：
   Chrome:-webkit-;
   IE/Edge:-ms-;
   Firefox:-moz-;
   欧朋:-o-
6. bg-image渐变色：linear-gredient线性渐变；radial-gradient径向渐变
7. 变形：使用origin设置旋转点，默认为中心点；
   旋转变形：transform: rorate(45deg);
   缩放变形：transform: scale(3);
   位移变形：transform: translate(100px, 299px);（兼容到ie9，用于微调）
8. 3D旋转：rotateX/rotateY; perspective:舞台，即透视强度
   css3最浓墨重彩的一笔

动画

1. 所有颜色、变形、数值类型的属性都可以使用transition进行过渡

<!--所有属性 持续时间 匀速 延迟时间-->
transition: all 1s linear 0s;

2. 缓动效果：ease/linear/贝塞尔曲线
3. 过渡效果
4. @keyframe定义动画与调用