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-*

###如何做到语义化:

  1. 不用生成工具
  2. 不用HTML写样式
  3. 命名格式良好:参考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

#定位模式

  1. normal flow(文档流)
  2. 浮动(float)
  3. 绝对定位(position)

根元素是in-flow

行内元素会避开浮动元素形成文字环绕图片效果

BFC:

  1. 会避开浮动元素(捕鱼浮动元素虫爹)
    可以用这个来制作自适应两栏布局
  2. clear 清除浮动实质元素的某一边不与float元素重叠
  3. BFC内部margin折叠的问题可以用BFC解决,因为BFC之间不会有margin折叠的问题
  4. 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前端星计划的主要内容,如果未能解决你的问题,请参考以下文章

前端星计划笔记-day1

H5移动端手势密码组件

如何去设计前端框架能力?星巴克消息开放项目从0到1,从点到面的思考

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

360导航招聘高级前端开发工程师

〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景