360前端星计划
Posted wangziqiang123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了360前端星计划相关的知识，希望对你有一定的参考价值。
https://github.com/webzhao/fe-camp
https://ppt.baomitu.com/usercenter?user_name=%E5%8D%81%E5%B9%B4%E8%B8%AA%E8%BF%B9
https://ppt.baomitu.com/d/0f4500f7#/1
https://ppt.baomitu.com/d/258e0812#/48
https://ppt.baomitu.com/d/a8a49a00#/
今天是参加360前端星计划的第一天。上课的时候不能用电脑，现在回到酒店把做的笔记记录下来。
html基础
1. DOCTYPE的作用
控制渲染模式，怪异模式，准标准模式，标准模式。
2. XHTML和HTML的区别
要求标签都要闭合，属性要小写，属性值都需要用引号包住。
3. HTML5设计思想
共六点 详情请看ppt
4. 语义化
要求：区分元素类型，包括：元数据元素，引用元素等
区分公用属性：id，title，lang，style，class，自定义data-*
###如何做到语义化：
- 不用生成工具
- 不用HTML写样式
- 命名格式良好：参考schema.org/microformats
教程：webplatform
手册： html：the living stantord
#css
1. 选择器权重
2. 属性继承
3. 安全字体
逗号分隔，sans-serif是无衬线字体，就是所有字的笔画粗细一样，monospace等宽字体（只对英文字体有效）。英文字体放前面，中文字体放后面，是的可以显示英文中文不同字体。
4. 杂项
inherit的含义：继承计算值（计算好后的绝对像素值）
“/”分隔属性
HSL，HSLA
HTML的dir属性决定（text-align）对文字的最后一行没有作用
！important是针对属性的，相当于新的属性，要覆盖important效果，要求在更高优先级的选择器下对属性设置important
类选择器有可能覆盖id选择器（数据溢出），要求看浏览器算法
padding-left百分比的基准值是父元素的宽度，top是自身宽度
所以可以使用padding来实现图片的保持宽高比例显示，避免图像加载时因为延时突然加载出来的页面布局抖动。
max-width 实现宽度自适应
inherit可以把原来不可继承（默认不会继承）的属性继承过来
#浏览器显示布局模型
display:list-item(显示为li)，table（也能生成块级上下文），但是与block有区别，会生成不止一个BFC：before ：after
display：inline 会把内容放到多行中（拆分）
inline-block内容不可被拆分到多行中
行级元素： margin： top，bottom不起作用。padding：起作用但不影响其他元素位置，只是直接覆盖。
line-box 和inline-box
#定位模式
- normal flow（文档流）
- 浮动（float）
- 绝对定位（position）
根元素是in-flow
行内元素会避开浮动元素形成文字环绕图片效果
BFC:
- 会避开浮动元素（捕鱼浮动元素虫爹）
可以用这个来制作自适应两栏布局 - clear 清除浮动实质元素的某一边不与float元素重叠
- BFC内部margin折叠的问题可以用BFC解决，因为BFC之间不会有margin折叠的问题
- zoom：1生成layout（IE）
IFC：
了解： line-height是两行的baseLine的间距
vertical-align 对其line-box的基准线默认是baseline对齐
不同元素的基线位置不一,所以如果行内元素图片有出现外面包裹的div大于图片的高度。是因为图片默认的对齐基线
是baseline，而下面还有bottomline。而图片的base line是底边
定位模型
定位可以用绝对定位确定基点在使用margin来进行微调。
定位的默认值是原来所处位置
z-index的值越大不一定月上，要看堆叠上下文（renderlayer层） （机非兄弟元素不可直接用z-index进行比较）
了解绘制顺序（ppt）
object-fit属性，让img/video标签也能像background：contain那样保持宽高比。
新属性： tranclate3D will-change 可以启动GPU硬件加速，硬件加速的有时是使（layout->paint->composite）
只需要做最后一步的合成，而不需要做前面的重排和重绘。
原文:大专栏 360前端星计划(一)
以上是关于360前端星计划的主要内容，如果未能解决你的问题，请参考以下文章