慕课网——全面系统讲解CSS (一)

前言

在上一个项目中深感 css 知识的不足, 不能理解讲师的布局, 所以下定决心好好补一下课.

今天开始学习《全面系统讲解 CSS 工作应用+面试一步搞定》，加油！

准备知识

使用 Ajax 时, 可不可以不使用 form 表单进行提交请求?

可以, 但是仍然推荐使用 form 表单进行提交, 原因:

可以使用 submit / reset 等特性
可以批量获取表单
可与框架结合进行表单验证

HTML5 的新特性:

语义标签
- 使开发者更方便清晰构建页面的布局
增强型表单
视频和音频
- 音频：<audio src=" "></audio>
- 视频：<video src=" "></video>
Canvas 绘图与 SVG 绘图
地理定位
拖放 API
WebWorker
- 通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行.
WebStorage
- localStorage
- sessionStore
WebSocket

详细内容参考: 《HTML5 新特性总结》

HTML5 元素分类:

按默认样式分

按默认样式分	块级 block	行内 inline	inline-block
常见元素	区块元素 div / section	文本相关标签 span / strong	表单元素 input / selection

按内容分

Metadata
顾名思义，Metadata元素意指那些定义文档元数据信息的元素 — 其作用包括：影响文档中其它节点的展现与行为、定义文档与其它外部资源之间的关系等。以下元素属于 Metadata：base, link, meta, noscript, script, style, template, title

Flow
所有可以放在body标签内，构成文档内容的元素均属于Flow元素。

Sectioning
指定义页面结构的元素，具体包含以下四个：article, aside, nav, section

Heading
所有标题元素属于 Heading，也即以下6个元素：h1, h2, h3, h4, h5, h6

Phrasing
所有可以放在p标签内，构成段落内容的元素均属于 Phrasing 元素。比如：em、strong ，另外如：audio、video、img、select、input 等元素(经测试，这些元素都可以放置在p标签中)。Phrasing 元素内部一般只能包含别的 Phrasing 元素。

Embedded
所有用于在网页中嵌入外部资源的元素均属于Embedded元素，具体包含以下9个：audio, video, img, canvas, svg, iframe, embed, object, math

Interactive
所有与用户交互有关的元素包括 a, input, textarea, select 等。

细节参考: 《W3C HTML5标准阅读笔记 – 元素分类》

HTML 元素的嵌套关系

块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素
- 反例: a 可以包含 div

HTML 的默认样式

每个浏览器都会自带默认样式, 但是在开发中会造成页面不统一的问题.
解决方案: CSS Reset
- CSS Tool: Reset CSS & YUI: CSS Reset — 清除浏览器默认样式
- Normalize.css — 统一各浏览器默认样式
- *{margin:0;padding:0} — 最简单方法, 可能存在性能浪费

真题:

DOCTYPE 的意义?

让浏览器以标准模式渲染, 如: 盒子模型宽度是否包含 padding 值.
让浏览器知道元素的合法性, 如: 在 XHTML 中标签必须完全闭合.

HTML / XHTML / HTML5 的关系

HTML 属于 SGML
XHTML 是对 HTML 进行 XML 严格化的结果
HTML5 不属于 SGML 或 XML, 是一种独立的规范

em 和 i 的区别

em 表示强调, i 纯样式标签表示斜体
在 HTML5 中 i 一般用作图标

语义化的意义

代码可读性更强, 容易维护
浏览器容易理解结构
有助于 SEO

哪些元素可以自闭合

表单元素: input
img
br / hr
head 中的 meta / link

HTML 与 DOM 的关系

DOM 是由 HTML 解析而来的
JavaScript 维护的是 DOM 而不是 HTML

CSS 基础

选择器

选择器的解析方式:

从右向左解析, 先找符合最具体条件的元素, 再向左搜索是否含有对应的上级元素.

相比从左向右搜索, 这种方式可以提高性能.

选择器权重

ID 选择器 (100) > 类 / 属性 / 伪类(:hover{}) (10) > 元素 / 伪元素(::before{}) (1) > 其他选择器 (0)

例子:

P.S. 低权重选择器叠加再多也不如一个高权重选择器优先, 上文的权重数值只在其他元素一致时有用.

!important 优先级最高
使用内联样式时, 优先级高
相同权重, 后写的生效

字体

字体族在定义时不加引号.

自定义字体 & 使用网络字体

行高

行高由 line-box 决定, line-box 由 inline-box 决定

图片底部空隙问题

原因: 行内元素是按照基线对齐, 而非底线对齐. 解决方法: vertical-align: bottom 即可.

背景

设置背景:

rgba & hsla
url 自定义背景

性能优化:

雪碧图

原理: 将许多图标放在一张图片上, 通过控制显示位置来显示单个图标, 减少 http 请求次数, 减少图片大小.

图标缩放主要是为了适配分辨率不同的屏幕, 当网页要显示在移动端三倍屏上时, 雪碧图就应该被缩小 3 倍, 不然显示在移动端会特别模糊.

base64 转换

通过 base64 图片转换工具, 将图片转换成字符串, 减少 http 请求, 增加代码体积, 建议只在少量的小图标上使用.

滚动

auto 模式在内容没有超出容器时没有滚动栏, scroll 模式不管有没有超过都有滚动栏.

换行

overflow-wrap — 是否以单词结束换行
word-break
white-space — 是否换行

装饰性属性

CSS Hack

不合法但生效的写法
主要用于区分不同浏览器, 兼容不同版本浏览器
缺点: 难维护易失效

真题:

伪类和伪元素的区别?

伪类表示状态
伪元素是真的代表元素
前者单冒号, 后者双冒号

《伪元素 ::after 和 ::before 应该这么用》

CSS 布局

常用布局方法:

table 表格布局
float 浮动 + margin
inline-block 布局
flexbox 布局

position 属性:

z-index:

除 static 以外的元素可以设置 z-index
数值越大越优先显示

flexbox 布局

弹性盒子
盒子本来就是并列的
指定宽度即可

PC 端要写大量的兼容性代码, 移动端比较适用.

float 对自身的影响

形成 “块” (BFC)

对父级元素的影响:

高度塌陷

inline-block 布局

需要解决空隙 — 原因: 代码中间的一些空白字符
- 通过设置父元素字体大小为 0 即可

前言

准备知识

CSS 基础

选择器

字体

行高

背景

滚动

换行

装饰性属性

CSS 布局

CATALOG

FEATURED TAGS

FRIENDS