标签：布局   render   class   百分比   cal   open   含义   权重   item   

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前端星计划(一)

标签：布局   render   class   百分比   cal   open   含义   权重   item   

原文地址：https://www.cnblogs.com/wangziqiang123/p/11618479.html