360前端星计划学习-HTML + CSS

浏览器

浏览器	渲染引擎	JavaScript引擎
IE	Trident	JScript
Edge	EdgeHTML	Chakra
Safari	Webkit	Nitro
Chrome	Blink	V8
FireFox	Gecko	SpiderMonkey
Opera	Prasto -> blink	Carakan -> V8

壳浏览器

360浏览器
UC浏览器
QQ浏览器
搜狗浏览器

HTML

HTML是什么

HyperText Markup Language
使用标签来描述页面的内容和结构

Doctype的作用

指定页面的使用标准和版本
决定使用哪种渲染模式

渲染模式

Quirks Mode (怪异模式)
Almost standard Mode (标准准模式)
Standard Mode (标准模式)

注意: 如果当我们不指定Doctype时，IE6、IE7会采用怪异模式渲染页面，IE8以标准模式渲染页面，firefox11也是以标准模式渲染页面。

enter image description here

HTML设计思想

兼容已有内容
避免不必要的复杂性
解决现实问题
优雅降级
尊重事实标准

HTML5变化

Doctype、meta
新增语义化标签
去除纯表示性的标签
WebStorage、canvas、video、audio、拖拽、离线

语法

标签不区分大小写、推荐小写
空标签可以不闭合
属性不必引号。推荐双引号
某些属性值可以省略，如required、readonly

图片

图片宽高

不指定高宽：原图大小显示
指定宽度：按比例缩放到指定宽度
指定高度：按比例缩放到指定高度
指定高宽：强制按照指定高宽显示

图片格式

jpg：照片
png：色彩较少时使用，png24可以半透明
gif：无法半透明，可以多帧做动画
WebP

注意: WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。更多...

语义化

提升代码的可读性、可维护性
搜索引擎的优化（利于SEO）
提升无障碍性

CSS

选择器

简单选择器

通配选择器 *
标签选择器 p
id选择器 #id
类选择器 .class

属性选择器

[attr]只使用属性名，但没有确定任何属性值;
[attr="value"]指定属性名，并指定了该属性的属性值;
[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表以空格隔开，其中词列表中包含了一个value;
[attr^="value"]指定了属性名，并且有属性值，属性值以value开头;
[attr$="value"]指定了属性名，并且有属性值，而且属性值以value结尾;
[attr*="value"]指定了属性名，并且有属性值，而且属值中包含value;
[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值;

伪类 (pseudo-classes)

基于 DOM 之外的信息去（比如根据用户和网页的交互状态）选择元素。

a:link    { ... }   /* 未访问过的链接 */
a:visited { ... }   /* 已访问过的链接 */
a:hover   { ... }   /* 鼠标移到链接上的样式 */
a:active  { ... }   /* 鼠标在连接上按下时的样式 */
a:focus   { ... }   /* 获得焦点时的样式 */

选择器组合

直接组合

E[foo="bar"]
E.warning
E#myid
#myid.warning
.warning[foo="bar"]

后代组合

/* 后代选择器 */
  article p {...}
/* 亲子选择器 */
  article > p {...}

相邻兄弟

input[type="check"] + label {...}

通用兄弟

.active ~ li {...} /* 选择所有兄弟 */

同时为一组选择器定义样式

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

选择器优先级`根据特异度判断(Specificity)`

选择器	内联?	id个数	(伪)类个数	标签个数	特异度
#nav .list li a:link	0	1	2	2	0122
.hd ul.links a	0	0	2	2	0022

哪条声明起作用？

找出匹配到的该属性所有声明

根据规则来源，优先级从低到高：

浏览器预设

用户设置

网页样式

同一来源中，按照特异度排序，越特殊优先级越高

特异度一样时，按照样式书写顺序，后面的优先级高

有 !important 时的变化

找出匹配到的该属性所有声明

根据规则来源, 优先级从低到高：

浏览器预设

用户设置

网页样式

含 !important 的网页样式

含 !important 的用户设置样式

同一来源中，按照特异度排序，越特殊优先级越高

特异度一样时，按照样式书写顺序，后面的优先级高

css文本样式`可继承`

font-family

使用逗号分隔的字体族名称
初始值由浏览器设置决定，可继承

字体匹配算法

浏览器先获取一个系统字体列表
对于元素中每一个字符，使用 font-family 属性及其它属性进行匹配，如果能匹配就暂定该字体
如果步骤2没有匹配上，选择下一个可选的 font-family 执行步骤2
如果匹配到一个字体，但是字体中没有该字符，继续对下一个可选的 font-family 执行步骤2
如果没有匹配到字体，使用浏览器默认字体。

font-family 使用

英文字体放在中文字体前面
最后总是添加通用字体族

font-size

定义文字的大小，可使用px、百分比、em等做单位
取值
- 绝对值 xx-small | x-small | small | medium | large | x-large | xx-large
- 相对值 larger | smaller
- 长度
- 百分数，相对于父元素计算值
初始值为 medium（由浏览器设置决定，一般16px），可继承

长度单位em

一般是相对于元素 font-size 的计算值的
用在 font-size 属性上时，是相对于父元素的 font-size 计算值

font-style

定义文字以斜体还是正常方式显示
取值：normal | italic | oblique
初始值为 normal，可继承

font-weight

定义文字的粗细程度
取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900
初始值为 normal，可继承

line-height

元素所属的 line box 所占高度
初始值为normal（具体值由浏览器决定），可继承
取值：<长度> | <数字> | <百分比>
段落文字一般取值1.4～1.8

line-height:26px; 表示行高为26个像素
line-heigth:120%;表示行高为当前字体大小的120%
line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12，行高还是父元素的行高)
line-height:2.6;表示行高为当前字体大小的2.6倍
不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;他的行高为28px;子元素尺寸为12px，不需要再定义行高，他默认的行高为24px。（例如：子元素12px，他的行高是24,不会继承父元素的28）

text-align

定义文本在容器内的对齐方式
取值：left | right | center | justify
初始值由 HTML 的 dir 属性决定，可继承

letter-spacing

指定字符之间的间距
取值：normal | <length>
初始值为 normal，可继承

word-spacing

指定单词之间的间距
取值：normal | <length>
初始值为 normal，可继承

text-indent

指定文本缩进
取值：normal | <length> | <percentage>
初始值为 0，可继承

text-decoration

定义了文本的一些装饰效果，比如下划线、删除线等
初始值为none，可继承
其它值：underline | line-through | overline

white-space

指定空白符如何处理
取值：normal | nowrap | pre

word-break

指定是否允许在单词中间换行
取值： normal | break-all | keep-all

box model

width的值为百分比时，参考的是父元素盒子的width;
height的值为百分比时，参考的是父元素盒子的height;
padding的值为百分比时，参考的是父元素的width;
margin的值为百分比时，参考的是父元素的width;

块级元素(Block-level Elements)

会被格式化成块状的元素
例如 p、div、section 等
将 display 设置为 block、list-item、table 使元素变为块级

行级元素(Inline-level Elements)

不会为其内容生成块级框
让其内容分布在多行中
display 设置为 inline、inline-block、inline-table 使元素变为行级

margin：行级盒的 margin-top 和 margin-bottom 不会产生效果
padding：行级盒的 padding-top 和 padding-top 不影响行布局

块级盒子中的子盒子的生成

块级盒子中可以包含多个子块级盒子
可以包含多个行级盒子
不在行级元素里面的文字，会生成匿名行级盒。比如:

<p>Some<em>Text</em></p>

块级盒子中不能同时包含块级和行级盒子。遇到这种情况时，会生成匿名块级盒来包含行级盒。比如:

<div><h1>标题</h1><span>2016-12-12</span></div>

行级盒子内的子盒子的生成

行级盒子内可以包含行级盒子
行级盒子包含一个块级盒子时，会被块级盒子拆成两个行级盒子，这两个盒子又分别被匿名块级盒包含

定位模式

常规流(Normal Flow)
浮动(Float)
绝对定位(Absolute Positioning)

常规流

除根元素、浮动元素和绝对定位元素外，其它元素都在常规流之内(in-flow)
而根元素、浮动和绝对定位的元素会脱离常规流(out of flow)
常规流中的盒子，属于块级格式化上下文或行级格式化上下文

块级格式化上下文 (Block Formatting Context)

盒子在容器（包含块）内从上到下一个接一个地放置
两个兄弟盒之间的竖直距离由 margin 属性决定
同一个 BFC 内垂直 margin 会合并
盒子的左外边缘挨着容器（包含块）的左边

块级格式化上下文(BFC) 的特性:

BFC 内的浮动不会影响到BFC外部的元素

BFC 的高度会包含其内的浮动元素

BFC 不会和浮动元素重叠

BFC 可以通过 overflow:hidden 等方法创建

BFC 的创建:

浮动框

绝对定位框

非块级的块容器(inline-block)

overflow 属性非 visible 的块框

BFC的作用:

清除浮动

防止 margin 折叠

双栏布局

行级格式化上下文 (Inline Formatting Context)

盒子一个接一个水平放置
盒之间的水平 margin，border和padding 都有效
同一行的盒子所在的矩形区域叫行盒(Line box)
当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒里
行盒内的水平分布由'text-align'属性决定
如果一个行级块无法分割(单词、inline-block)，该元素会被作为一个整体决定分布在哪一个行盒

浮动（float）

浮动元素从常规流中脱离，被漂浮在容器(包含块)左边或右边
浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
浮动元素不会影响其后面的流内块级盒
但是浮动元素后面的行级盒子会变短以避开浮动元素

position

static，非定位，默认值
relative，相对定位（相对自己）
absolute，绝对定位，相对非 static 祖先元素定位
fixed，相对于视口绝对定位

relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用 top、left、bottom、right 设置偏移长度
流内其它元素当它没有偏移一样布局

absolute

脱离正常流
相对于最近的非 static 祖先的 padding box 定位
不会对流内元素布局造成影响
可以有 margin，但不会折叠

fixed

相对于 Viewport 定位
不会随页面滚动发生位置变化

z-index 堆叠层次

为定位元素指定其在 z 轴的上下等级
用一个整数表示，数值越大，越靠近用户
初始值为 auto，可以为负数、0、正数

注意: z-index大的不一定在上面，要考虑到层叠上下文
关于层叠上下文

堆叠上下文的生成

Root 元素
z-index 值不为 auto 的定位元素
设置了某些 CSS3 属性的元素，比如 opacity、transform、animation 等

绘制顺序

在每一个堆叠上下文中，从下到上：
- 形成该上下文的元素的 border 和 background
- z-index 为负值的子堆叠上下文
- 常规流内的块级元素非浮动子元素
- 非定位的浮动元素
- 常规流内非定位行级元素
- z-index 为 0 的子元素或子堆叠上下文
- z-index 为正数的子堆叠上下文