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

时间  2020-01-10
标签 前端 计划 学习 html css 栏目 快乐工作 繁體版
原文   原文链接

浏览器

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

壳浏览器

  • 360浏览器css

  • UC浏览器html

  • QQ浏览器web

  • 搜狗浏览器算法

HTML

HTML是什么

  • HyperText Markup Languagecanvas

  • 使用标签来描述页面的内容和结构浏览器

Doctype的做用

  • 指定页面的使用标准和版本ide

  • 决定使用哪一种渲染模式布局

渲染模式

  • Quirks Mode (怪异模式)字体

  • Almost standard Mode (标准准模式)优化

  • Standard Mode (标准模式)

注意: 若是当咱们不指定Doctype时，IE六、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

  • 使用逗号分隔的字体族名称

  • 初始值由浏览器设置决定，可继承

字体匹配算法

  1. 浏览器先获取一个系统字体列表

  2. 对于元素中每个字符，使用 font-family 属性及其它属性进行匹配，若是能匹配就暂定该字体

  3. 若是步骤2没有匹配上，选择下一个可选的 font-family 执行步骤2

  4. 若是匹配到一个字体，可是字体中没有该字符，继续对下一个可选的 font-family 执行步骤2

  5. 若是没有匹配到字体，使用浏览器默认字体。

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 为正数的子堆叠上下文

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程