2020.4.8 学习笔记

一、HTML与前端

二、了解CSS

1. CSS工作机制

QS: CSS加载或者解析过程会产生阻塞吗？JS呢？

2. 页面中使用css的三种方法：

• 外联 <link>
• 嵌入 <style>
• 内联 <p style = "">

PS: link 与@import的区别？

1. link是HTML方式， @import是CSS方式
2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
3. link可以通过rel="alternate stylesheet"指定候选样式
4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5. @import必须在样式规则之前，可以在css文件中引用其他文件

3. CSS选择器

• 通配选择器 *
• 标签选择器 a p input
• id选择器 #logo
• 类选择器 .container
• 属性选择器 [disable]
• 属性值 input[type="password"] a[href^="#"] a[href$=".jpg"]
• 伪类选择器 a:link li:forst-child
• 组合器
  • 直接组合 AB
  • 后代组合 A B
  • 亲子组合 A>B
• 选择器组 h1,h2,h3

4. 颜色

rgb（red, green,blue)

rgba（red, green,blue,1)

5. font字体

-family

html{
	font-family:Optima,serif;
}

• 字体列表最后写上通用字体族
• 英文字体放中文前

style weight size/heighth family

三、深入CSS

1. 样式优先级

！important >内联> id > 类 | 伪类 > 元素选择器 > 继承 | *

标签选择器	计算权重公式
继承或者 *	0,0,0,0
元素（标签选择器）	0,0,0,1
类，伪类	0,0,1,0
ID	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

2. 布局

布局基础技术

盒模型

四条边框颜色不同时

宽高为0

设置透明

块级和行级

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p

• 行内元素有：a b span img input select strong
• 空元素：<br> <hr> <img> <input> <link> <meta>

3. 常规流

根元素、浮动、绝对定位会脱离常规流

行级上下文IFC

• 只包含行级盒子的容器回创建IFC
• IFC内排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时换行
  • text-align决定水平方向
  • vertical-align决定行内垂直对齐
  • 避开float元素

块级上下文BFC

• 会产生BFC的情况：根元素、浮动、绝对定位、inline-block、Flex和Grid子项、overflow不是visible的块盒

• BFC内排版规则

  • 盒子从上往下
  • 垂直margin合并
  • BFC内的margin不会和外面的合并
  • BFC不会和浮动元素重叠

Flex Box

• 新型排版上下文
• 可以控制盒子的摆放方向、顺序、宽高、水平垂直对齐、换行

Grid

• 划分网格布局

四、CSS进阶

1. 变形

Transform

translate 平移 rotate 旋转

scale 缩放 skew 倾斜

• 本身占有的空间仍然保留，不会对其他元素的布局产生影响
• 属性值的前后顺序不一样，展现的效果不同
• 3D变换：perspective属性设置视角，设置人眼与屏幕的距离

2. 动画

Transition

transition-property 元素的变化的CSS属性

transition-duration 持续时间

transition-timing-function 快慢速度

transition-delay 延迟时间

Animation

通过对元素进行定义关键帧的方式，实现更加复杂的动画效果。

animation-name 名字

animation-duration 持续时间

animation-timing-function 快慢速度

animation-delay 延迟时间

animation-iteration-count 播放次数

animation-direction 动画播放方向（正向、逆向、正反交替）

@keyframes down{
  from{
    margin-top:0;
    ocpacity:1;
  }
  50%{
    margin-top:0.5em;
    ocpacity:0.3;
  }
  to{
    margin-top:0;
    ocpacity:1;
  }
}

.dom{
	animation:down 1.5s ease infinite;
}

3. 响应式设计

设置视口vieport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

图片尺寸设置

img{
	max-width:100%;
}

background-size

cover 背景图片把容器覆盖，图片比例会变（装饰性）

contain 缩放到容器内，保证图片完整显示（商品类）

media query

@media screen and(min-width:480px){
	.dom{
	}
}
// width/height,

rem

计算的时候总是根据html的font-size来计算大小。配合媒体查询使用。