HTML&CSS

web

发布日期: 2021-12-06

更新日期: 2022-03-18

文章字数: 13.8k

阅读次数:

前言

向无人理想处的，或多余的告白

在这个如果有疾风骤雨惊雷就会非常符合我此时心情但却是无比静谧的深夜里（指0点27分），我痛定思痛，意识到如果不重新学习HTML、CSS、JS的话代价将会是巨大的——就会变得和我的算法一样，会是一种难以结痂的伤口。
走吧，走同一条路也会有不同的风景的。

我大概是2021/01左右学习的前端，距今是过去一年时间了。

说到我为什么要学前端——一开始是学后端的，但是那个时候啊，IDEA编译工具试用期过了我犯懒又不想去申请学生认证，eclipse看上去太老旧了我倍感排斥，这时候漂漂亮亮的VSCode就把我吸引了——但是VSCode配置Java环境又是一件麻烦事，那么好吧——不如咱学前端试试看吧！于是乎，我自此踏上了学习前端的征途。

哈，没错，没有什么别的理由，就是这么简简单单——喜欢，是不需要太多理由的。

一路上，有五彩斑斓甚至有点花里胡哨的特效给我带来的惊艳的视觉冲击，有学习资料不系统和没有正确地做笔记导致的迷茫困惑并且无从复习的雪上加霜，有对这个做起算法来让人爱恨交加的脚本小皇帝的痛斥和赞美，还有太多太多掉进时光里面的影子——一同构成了我的前端学习记忆，我从中发自心底地感到：

三生有幸，学计算机

更新日志

2021/12/06
首次发布这篇博文，当时是为了引领前端新人们入门

2022/01/24
一开始是为了引领新人入门，所以一些内容会细致到离谱，但是现在目标群体变成了我或者像我一样的复习者，所以一些内容对于初学者或许难以接受

2022/03/11
做了一些修正和补充

前置准备

编译工具

名称	评价
sublime text	轻量级，适合入门
vscode	方便装插件，更加全面、美观，以我今天的眼光看来，他是最完美的
intelligent idea	相当全面，写前端的同时还方便写Java代码
webstorm	相对更倾向前端，大家用了都说好

其实用记事本写也可以，只需要把扩展名txt改为html，然后用浏览器打开即可

浏览器

web前端当然要有浏览器才能运行起来，这里注意使用大牌浏览器（比如某绿色浏览器、企鹅浏览器之类的就不要用了）

这里推荐六个浏览器

浏览器	评价	内核
IE（4-11）	万恶之源	Trident
Chrome	基于开源的Chromium的闭源浏览器，个人觉得必装	2013以前是Webkit，之后是Blink
Firefox	推荐装	Gecko
Opera	这个国内好像没什么人用，不太了解	最初是presto，再是Webkit，现在是Blink
Safari	mac的御用浏览器	Webkit
Microsoft Edge	相当于重生的IE，还是挺好用的	Edge

内核诞生时间顺序：

Gecko(1997)->Trident(1997)->KHTML(1998)->WebKit(2001)->Presto(2003)->Blink(2013)->Edge(2014)->Gonna(2016)

上述六个浏览器中，除了IE的兼容性相对拉胯之外，其他都还行。
个人觉得入门至少要在Chrome、FireFox、Edge中三选一

另外，部分属性需要加上浏览器的私有前缀以兼容老版本的浏览器，对应关系如下：

-moz- firefox系列
-ms- ie系列
-webkit- safari、chrome系列
-o- opera系列

资料参考（待补充）

Zeal 自行下载

W3CSchool 自行搜索

MDN 自行搜索

Font Awesome

CodePen
https://codepen.io/

HTML5 ROCKS
https://www.html5rocks.com/

ICON FONT
https://www.iconfont.cn/

HTML

全称是Hyper Text Market Language（超文本标记语言），用来写超文本。
规范是由W3C指定的，大家都会遵循这个标准（除了IE）。

什么是超文本?

普通文本就是文字，超文本指的是流媒体、图片、声音、视频等等

HTML基本结构

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

上述代码就是一个最基本的HTML文件结构，我们一步一步分析

标签
这是构成HTML代码的基本单位
在这里插入图片描述
从图中我们可以得知：

1.形如<…>的就叫标签
2.由<…></…>构成的叫双标签，前者为头标签，后者为尾标签，二者之间可以写东西
3.只有一个<…>的叫单标签
4.标签可以嵌套

文档声明

<! DOCTYPE html>

这其实不是HTML的标签，它是为了告诉浏览器用什么模式标准进行渲染（可以类比编译，把代码变成图形）
这样写就是希望浏览器采用HTML5进行渲染（但是实际上是否这样做完全取决于浏览器）

我们也可以看一下其他模式的写法
HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

当然，我们现在都采用HTML5

HTML文档

HTML基本结构

根标签，也叫html标签是一个双标签，之后我们所有内容将写在其头标签和尾标签之间；
文档头也叫head标签，之间用于书写一些配置类的东西（正如其名，head，头部，作用和大脑一样）
文档体也叫body标签，之间书写页面的主体内容（正如其名，body，身体，决定了整个页面的结构）

使用HTML

新建一个文件，将扩展名（后缀名）改为html，用编译工具打开即可
在这里插入图片描述
书写如下内容

<!DOCTYPE html>
<html>
    <head></head>
    <body>你好，HTML</body>
</html>

如果使用的是sublime text，那么直接按下F12即可渲染
如果是vscode，那么按下alt+b即可（需要安装插件）
如果是idea或者webstorm，那么点击右上角的浏览器图标即可
（不管用什么，鼠标右键之后应该都有“在浏览器打开的选项”）

我们这里采用sublime + chrome
你好HTML

HTML准确地说并不算是编程语言，它最多是个脚本语言，因为它不具备逻辑运算等能力

两类标签

就好像水，如果要控制水，那么首先得想办法把它装起来，这时候我们就需要容器
div标签

区隔标签（应该是divide的缩写），双标签

先别问有什么用，后面再说用处

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    	<div>你好，HTML</div>
	</body>
</html>

有了容器之后，我们就能修改其内容的属性
这里我们来修改一下style属性

<div style="background-color: red">你好，HTML</div>

背景色为红色

同样的还有
span标签

意义不详（大雾）

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    	<div style="background-color: red">你好，HTML</div>
    	<div style="background-color: red">你好，HTML</div>
    	<div style="background-color: red">你好，HTML</div>
    	<span style="background-color: red">hhh</span>
    	<span style="background-color: red">hhh</span>
    	<span style="background-color: red">hhh</span>
	</body>
</html>

行级元素和块级元素

上述两种标签默认的布局是有区别的

类型	效果	例子
块级元素（block）	独占一行，可以修改大小	div，h1，p，ul，table
行级元素（内联元素，inline）	只占据内容的大小，在挤满一行之后才换行，无法修改大小	span, td, a, img

tips：元素指的就是标签

至于修改大小，举个例子：

<div style="background-color: red;height: 100px">你好，HTML</div>
 <span style="background-color: red;height: 100px">hhh</span>

style属性的不同内容之间用分号隔开，末尾可以省略空格
其中px是一个单位，即像素
在这里插入图片描述

常见的基础标签

img标签

首先找个图
香甜的甲基橙？

<!DOCTYPE html>
<html>
    <head></head>
    <body>
		<img src="https://i2.hdslb.com/bfs/face/18b1c56221b25b1ed47543c6574a9562beb195f0.jpg@160w_160h_1c_1s.webp" alt="">
	</body>
</html>

img标签示例

title标签
这个写在head里面

<head>
    <title>网页hhh</title>
</head>

网页标题

a标签

可以理解为超链接

<a href="https://www.baidu.com">比例比例</a>

点击就能跳转到百度页面
点击就可以实现跳转，访问到百度的首页

input标签

<input type="text">
<input type="submit" value="登录">

前者是输入框，后者是提交按钮（不过目前这样是没法提交的）

注意“输入”这个概念，对于计算机来说，不仅是键盘输入，鼠标点击等一系列产生了信息的事件都可以是输入

输入框和输入按钮

ul标签和ol标签
ul是unordered list，ol是ordered list
它们都有二级标签li标签

<ol>
    <li>芒果</li>
    <li>香蕉</li>
    <li>猕猴桃</li>	
</ol>
<ul>
    <li>铅笔</li>
    <li>直尺</li>
    <li>橡皮擦</li>
</ul>

无序列表和有序列表
其实没有大家想的那么高级，什么有序无序，不过是有无序号的区别

table标签

名字	内容
a	1
b	2
c	3

像上面这种表格，我们可以可以用代码实现：

<table>
    <tr>
        <td>名字</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>a</td>
        <td>1</td>
    </tr>
    <tr>
        <td>b</td>
        <td>2</td>
    </tr>
    <tr>
        <td>c</td>
        <td>3</td>
    </tr>
</table>

其实标题那里应该使用th标签，这样更规范，不过呢也不强求了

这里介绍一下emmet语法，我们可以输入上面的内容后按下tab，自动生成上述代码

emmet语法示例

一个表格

注释标签

<!-- 这是注释 -->

由于这个符号手写很难打，所以我们一般都用ctrl+？的快捷键

br标签

<br>

就是换行

实体符号

其实就是转义字符，比如我想在浏览器中展现<或者>符号，却与原有的语句冲突时，直接写会被解析为标签，所以需要有转义符号

&lt;&gt;
<!--对比一下，其中lt是less than的简写，gt是greater than的简写-->
<>

大于小于符号
还有空格
直接写多个空格会被解析为一个空格

1               2          3 <br>
1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3
<!--nbsp是new break-space-->
<!--nbsp是new break-space-->
<!--nbsp是new break-space-->

记住啊，直接多个空格会被压缩为一个空格

属性	值	描述
charset	character_set	定义文档的字符编码
content	text	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	content-type default-style refresh Expires Set-Cookie Pragma Window-target …..	把 content 属性关联到 HTTP 头部
name	application-name author description generator keywords robots copyright revisit-after viewport renderer …….	把 content 属性关联到一个名称比如将“前端开发”关联到keywords，那么就可以做到SEO优化——搜索前端开发然后发现该网页的概率更大

内联框架（待补充）

属性

看完上述代码，我们知道标签内部还是可以写东西的，但是除了style属性之外，标签还有其他的属性

<table  border="1px">
	<tr>
		<td>名字</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>a</td>
		<td>1</td>
	</tr>
	<tr>
		<td>b</td>
		<td>2</td>
	</tr>
	<tr>
		<td>c</td>
		<td>3</td>
	</tr>
</table>

在这里插入图片描述
以及行内向下合并

<table  border="1px">
	<tr>
		<td>名字</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>a</td>
		<td>1</td>
	</tr>
	<tr>
		<td>b</td>
		<td rowspan="2">2</td>
	</tr>
	<tr>
		<td>c</td>
	</tr>
</table>

在这里插入图片描述
也可以行合并

<table  border="1px">
	<tr>
		<td>名字</td>
		<td>内容</td>
	</tr>
	<tr >
		<td colspan="2">a</td>
	</tr>
	<tr>
		<td>b</td>
		<td rowspan="2">2</td>
	</tr>
	<tr>
		<td>c</td>
	</tr>
</table>

在这里插入图片描述

再比如

<input type="text" placeholder="请输入密码">

在这里插入图片描述
不过这些可以慢慢熟悉，现在我们只需要掌握常用到的

颜色及其6种表示方式

（rgba、HSL、HSLA写漏了，不过问题不大）

<div style="color: red;         background-color: black;">123</div>
<div style="color: #f00;        background-color: #000;">123</div>
<div style="color: rgb(255,0,0);background-color: rgb(0,0,0);">123</div>

在这里插入图片描述

方式	简述
英文词汇	很low，但是对于美术不好的人很亲和
十六进制	取值范围是0~ff（ff是16*16，即256，但是从0开始数，所以最大值是255）比如#ffaa33,代表红色值为ff，绿色为aa，蓝色为33，当三种颜色的两位均一样时，可以简写为#fa3这种形式
rgb函数	采用十进制，最大值是255，依次对应red，green，blue 规则和十六进制一样还有rgba函数，会多一个范围是0~1的参数代表透明度

宽高

<div style="width: 200px;height: 200px;background-color: red">456</div>

在这里插入图片描述这里是使用最最常见的px，像素为单位，一个像素有多大，是由个人的电脑的分辨率决定的。
当然还有其他单位，不过这里暂不讨论。

文字
关于文字，那么属性就可多了
这里例举一些

<div>文字</div>
<div style="font-weight: 900">文字0</div>
<div style="font-size: 14px">文字1</div>
<div style="font-family:'宋体'" >文字2</div>
<div style="color: green">文字3</div>

在这里插入图片描述

名称	介绍
font-weight	取值是100-900，决定文字的粗细
font-size	文字的大小，这里的单位是用的px，即像素。当然你也可以采用其他单位。
font-family	字体。如果设置字体的话，可能会因为字体限定了一些样式而导致对字体粗细等设置失效
color	文字颜色，注意，没有font-color

我们思考一个问题

当一个标签存在大量样式的时候，很明显是不易于阅读和后续改进

在这里插入图片描述

但是不用紧张，CSS会为我们解决这个问题

HTML5更新内容

简单总结一下，目前来看至少更新了这些：

新的标签
main header aside section footer canvas等等

Web存储
localStorage sessionStorage等

更多特性
meta元素有了更多的属性

CSS

CSS，Cascading Style Sheets，三个单词的意思分别是大量的，样式，表

官方给的翻译就是层叠样式表，用于存放大量的样式

(层叠有两层含义，一是“大量”，而是指“叠加”——多个样式表的效果可以叠加到一个元素上)

所以HTML是管理结构的，CSS才是管理样式的，更多的样式我们会放到CSS这里讲

选择器

标签选择器

我们想一下一张表长什么样子

在这里插入图片描述

所以CSS作为一张表也该有类似上图的样子——由键值对构成

在这里插入图片描述

没错，CSS可以写在html文件里面，通常我们会把一个style标签写在head标签内部

（其实写哪都能生效，但是规范是写到head里面）

然后在style内写多个键值对来设置样式

class选择器

很明显，上述CSS影响到了所有div标签

而上述的这种用标签名字来选择样式作用的范围的方式，就叫做标签选择器

在这里插入图片描述

假如我们想让第一个div独有这种样式，我们就给它取个名字

在这里插入图片描述

注意不要漏掉前面的点

注意，这里的后面覆盖前面，其前后顺序是以style标签中的内容顺序决定的而不是class名称的顺序

这里的class并不是面向对象编程里面的类，不要混淆，二者没有联系。

id选择器

和class选择器类似，但是id选择器名字前面的是#，并且id选择器不可复用，具有唯一标识性

在这里插入图片描述

比如看一个简单的例子

<a href="#a-good-id">跳转</a>

这个可以实现跳转到id为a-good-id的标签所在的位置。

那么可不可以写class呢？当然不能，因为class可能“重名”，这样就不知道到底该跳转到哪里。

属性选择器

根据标签所具有的属性来进行选择

看个例子

[type="text"]
{
	background-color:#ff0000;
}
[type]
{
	border:5px solid blue;
}

上述两个样式都能作用于

<input type="text">

意思就是用属性来选择，可以只写属性名称，也可以限制属性值

复合选择器

选择器之间通过组合来实现更加复杂的选择

交集选择器

更精准地选择:

div.good {}

这样就选中了class值为good的div标签

并集选择器

多个内容具有相同的css可以像这样写成一块:

div,p{}

这样就同时选中了div和p标签

子代选择器

div>p{}

只选中div的子级p标签

后代选择器

又叫包含选择器，用来选择后代

div p {}

这样就选中了div内所有的p标签

兄弟选择器

对于如下HTML

<div></div>
<p></p>

通过div来选择p则可以像这样操作

div + p {}

表示选中div的紧邻的下一个兄弟p（如果div和p中间隔了一个其他标签，那么这将无法选中）

伪类选择器

带一个冒号，这个要注意和伪元素选择器区分

此处的类指的是标签属性中的class，那为什么是“伪”呢？

因为伪类选择器相当于是根据情况来给元素添加了一个不存在的class名称，并且赋予了响应的样式，它是用于描述一个元素的特殊状态

比如

div > span:nth-child(2n + 1){}  /*可以选中第奇数个子元素*/
div > span:nth-of-type(n){}    /*n计数时不考虑span以外的元素（潜台词就是nth-child()是会考虑除了span以外的元素的）*/
div > span:not(:nth-of-type(1)) /*否定伪类，意味着除了第一个span之外*/
a:link{} /*未访问的链接*/
a:visited{} /*访问过的链接*/

伪元素选择器

带两个冒号（老版本允许一个冒号，但是标准还是双冒号），这个要注意和伪类选择器区分

同理，伪元素是逻辑上有但是实际上并不存在的”元素”，它表示元素的特殊位置

比如

p::first-letter{} /*元素的第一个字母*/
p::first-line{} /*元素的第一行    */
p::selection{} /*元素选中的部分  */
p::before{} /*元素的起始位置    */
p::after{} /*元素的结束位置    */
/*before和after中总是用content属性来设置innerText，并且这样设置的innerText是无法选中的*/

后代选择器、子代选择器、交集选择器、并集选择器、伪类选择器合称复合选择器

特异度

即选择器生效的优先级/权重，计算方法是

先看id选择器个数，记为n个，再看伪类或类选择器个数，记为m，再看标签选择器个数l，那么特异度就是n m l

优先级由高到低具体地说就是：

!important (永远最高)
内联style 1 0 0 0
id选择器 0 1 0 0
class、伪类选择器 0 0 1 0
标签选择器 0 0 0 1
通配选择器 0 0 0 0
继承的样式（永远最低）

继承

有的属性可以继承，有的不可以

比如字体大小，字体颜色等等是可以继承的，会和最近的拥有该属性的父级元素一样

有的属性是不可继承的，比如背景、布局、盒子模型等，但是如果我们想修改这种情况，那我们可以在某属性字段后面加上inherit，比如

* {
    box-sizing: inherit;
}

这里需要注意，默认的背景颜色是transparent透明的，所以在测试背景是否能够继承的时候需要注意别被表象误导

至于具体哪些能继承哪些不能继承，这个就需要用时间去形成记忆了

CSS求值过程

1.确定了DOM树和样式规则

2.filtering: 对应用到该页面的规则用一些条件进行筛选：选择器匹配、属性有效、符合当前media等

（Declared Value声明值：一个元素可能没有或者有多个值，处理声明的值）

3.cascading：按照来源、!import、选择器特异性、书写顺序等选出优先级最高的一个属性值

（Cascaded Value层叠值：在层叠的过程中，选出优先级最高的那个值）

4.defaulting：当层叠值为空的时候，继承或初始化值

（Specified Value指定值：经过cascading和defaulting之后，保证值一定不为空）

5.resolving：将一些相对值或者关键字转化为绝对值，比如em转为px，相对路径转为绝对路径

（Computed Value计算值：一般来说是浏览器会在不进行布局的情况下，所能得到的最具体的值，比如60%）

6.formatting：将计算值进一步转换，比如关键字、百分比转为绝对值

（Used Value使用值：进行实际布局的时候使用的值，均为绝对值，比如400.2px）

7.constraining：将小数像素值转为整数

（实际值：渲染时，实际生效的值，比如上述的400.2px实际生效的是400px）

盒子模型

这里讲的是 标准盒模型，主要是了解margin padding border content 四个概念

这里我们准备两个标签：

<div class="test">一号</div>
<div class="test">二号</div>

至于各种配色，我们这里是为了醒目，别说美感云云~~

内容content

.test{
			background-color:#ff3700;
			width:100px;
			height:100px
	}

用width和height来设置content大小

橙色部分是content

边界border

.test{
			background-color:#ff3700;
			width:100px;
			height:100px;
			
			border: 10px solid blue;
		}

10px是边界宽度，

solid是边界样式，实心线，还有dashed等其他样式，

blue是边界颜色

蓝色是边界border

内边距padding

.test{
			background-color:#ff3700;
			width:100px;
			height:100px;

			border: 10px solid blue;

			padding: 30px;
		}

看图就知道了

内容距离边界的距离就是内边距

顾名思义，内容距离边界30px

外边距margin

.test{
			background-color:#ff3700;
			width:100px;
			height:100px;

			border: 10px solid blue;

			padding: 30px;

			margin: 30px;
		}

外边距就是和其他元的距离啦

顾名思义，和周围隔开30px

另外，我们可以打开浏览器，按下f12，点击右上角的这个图标，再用鼠标悬停在想要查看的图形上，就能查看包括盒子模型在内的相关信息

如图所示

怪异盒模型

设置box-sizing属性为border-box即可切换为怪异盒模型

在怪异盒模型中width和height指定后，设置padding或者border不会撑开容器而是向内压缩

margin塌陷

即margin collapse

（也有叫外边距的重叠、折叠的说法…不过还是margin塌陷顺口些）

当元素A、B垂直分布且分别具有margin-bottom和margin-top属性时，会发生margin塌陷

可以分为两类

兄弟元素之间

竖直方向上margin不会相加，而是取二者中较大的值
但是注意，一正一负值则能够发生算术运算，而两者为负则取绝对值大者

父子元素之间

父级元素如果没有padding-top和border-top，那么这个盒子的上边距会和其内部文档流中的第一个子元素发生上边距的重叠

（也就是说，这个子元素的margin-top要是找不到有效的border或者padding，那么就会不断向上找参照物）

历史由来

这个并非是设计时考虑不周遗留下来的bug

而是有意为之，CSS1.0规范中所说：

Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects

大意就是：margin塌陷是故意这样设计的，因为这样能够在大部分情况下符合设计师的要求

第一次听到这里，我的感受是——这怕是在扯淡吧，改个数值的事情和搞出塌陷这样的设计有什么关系？该不会是为了掩盖CSS设计的漏洞找的借口吧？

但是后来找了一些资料看，1995提出HTML2.0才正式使用，1996才有CSS1.0，那么在1996以前，P标签这类样是固定且无法修改的（这也就是为什么一个div能解决的事情却还要提出那么多标签）

如果当时没有设计margin塌陷，那么竖直均匀分布就难以实现：

1996年前要是有margin塌陷

盒模型的差异

中所周知display有四个常用属性：block、inline、inline-block、none

block

会产生一个块级盒子，内容被放到这个块级盒子中

inline

会生成一个行级盒子，内容分散在这个行级盒子中

inline-block

本身是行级，可以放到行级盒子中；作为一个整体而不会被分散

none

布局时完全被忽略

这里我们需要注意inline：

width height不生效

padding border可以生效，垂直方向上会覆盖其他元素（意味着并不会挤开其他元素）

margin 可以生效，但是竖直上不会影响其他元素

如此种种，综上所述，inline里面不能嵌套block

定位和布局

布局基础

曾经提到过，块级元素和行级（内联元素）元素

看一段代码

行级元素不能直接改宽高

显然，width和height并没有生效，这就和行级元素的性质有关系了，

不过我们可以通过修改display属性来改变元素的默认类型

很明显，这就生效了

这是因为，我们将其类型改变为块级（block）

修改为块级元素

同样地，还有非常多的类型可以尝试，特别是

属性值	效果
inline-block	行级（内联）块元素。综合了二者
flex	弹性元素。非常好的一维布局
grid	网格元素。非常好的二维布局
none	不显示，配合js做一些特效

通过上述知识可以至少可以完成多种形式的两栏或者说n栏布局。

当然，也不是所有布局都是要靠display完成的，还可以使用流式布局、设置margin: auto;水平居中等等

常规流

这是三套定位的规则

常规流 Normal Flow

也叫文档流，包括了行级、块级、表格布局、flex布局、grid布局等等规则

根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow）

常规流中的盒子，在某种排版上下文中参与布局——上下文可以理解为某个范围内

我们细细地嗦一嗦：

行级排版上下文 Inline Formatting Context

因翻译不同而可以叫做行级格式化上下文，行级格式化环境等等

只包含行级盒子的容器会创建一个IFC，其规则为

1.优先在一行内摆放，空间不够则换行

2.text-align 决定一行内盒子的水平对齐

3.vertical-align决定一个盒子在行内的垂直对齐

4.避开浮动元素

块级排版上下文 Block Formatting Context

有的翻译是块级格式化上下文，还有叫块级格式化环境的,
触发这个性质的元素将会变成一个独立的、不会干扰外界的区域
可以把这个看做一个隐藏的属性，不能像其他属性那样直接开启，需要通过一些间接方式开启

反正就是老生常谈的BFC咯

满足以下条件之一的容器会创建一个BFC：

根元素

浮动/绝对定位（absolute或者fixed）/

flex子项/grid子项

overflow不为visible

display设置为 inline-block 或 table系列或 flow-root

….(方式很多，上述几个是常见的，其余可以参考zeal)

排版规则是：

1.盒子从上到下摆放

2.BFC内依旧有兄弟间margin塌陷

3.父元素开启BFC后不会再发生父子间margin塌陷

4.BFC不会和浮动元素重叠，并且可以包裹浮动元素

弹性盒子 Flex Box

也是上下文，别被名字误导了

规则是：

1.自定义摆放的方向（上下左右）

2.自定义摆放顺序

3.可以设置盒子宽高、水平垂直对齐方式

4.自定义是否允许换行

网格盒子 Grid Box

可以粗糙地理解为是二维的Flex Box

浮动流（待补充）

一开始没有flex或者grid，就用float做图文环绕的效果

而正是由于这个初衷，文字会自动环绕在浮动元素周围

后来有了flex等操作之后浮动也就用的少了

浮动的产生不必多说，重点是浮动的性质以及浮动的问题以及解决方案

文档流元素能看见文档流元素，看不见浮动流元素，

这意味着浮动流元素的位置将被后面的文档流元素占据
(换种说法就是浮动流元素会覆盖后面的文档流元素)

也意味着文档流看不见自己内部的浮动流

浮动流元素能看见文档流元素、浮动流元素

这意味着浮动流会被文档流和其他浮动流元素阻挡

也意味着文档流内部的浮动流会被束缚

脱离文档流可以设置宽高等

这意味着行内元素浮动后会变得和块级元素类似，但是不完全一样（比如块级元素默认宽度100%，但是浮动流并不会这样）

（这里说的是脱离文档流，浮动流只是脱离的一种形式，有的定位也会脱离）

+

清除浮动：其一

如果不希望某个元素受到其他元素的浮动影响而改变位置，我们可以清除浮动

注意，是清除某个元素因为浮动受到的影响，而不是清除浮动本身

.div1{
            background-color: lightgray;
            width: 100px;
            height: 100px;
            float: left;
     }
.div2{
            background-color: lightgreen;
            width: 100px;
            height: 100px;
            clear: left;
    /*清除div2左侧的div1的浮动对div2造成的影响*/
    /*注意，如果设置为both，是清除两侧中影响较大那一侧，而不是同时清除两侧，这个大小是如何界定的看下面原理部分的解释*/
     }

原理

据说是设置clear之后，浏览器会为元素添加一个自适应的margin，使其位置不受影响

（据说按下F12也看不到margin的变动，但是原理是如此）

（听上去感觉很荒诞的样子）

而这个所谓的需要添加的margin的值越大，那么就判定这个浮动的影响越大，clear:both则会清除较大那一个

清除浮动：其二

如果不使用BFC，子级又存在浮动流，那么可以像下面这样做

<div class="box">
        <div class="content">浮动元素</div>
        <div class="clearfix">浮动清除器</div>
</div>



.box {
    background-color: bisque;
}
.content {
    width: 100px;
    height: 200px;
    background-color: aquamarine;
    float: left;
}
.clearfix {
    clear: both;
}

这里是属于用HTML结构处理表现上的问题（这本来该是CSS做的），所以这么做还并不够好

仔细一想，这个clearfix里面的文本内容好像没有存在的意义，所以可以删掉；

更进一步地，这个末尾的标签存在就仅仅是为了清除浮动，那么没有必要写这个标签，所以我们删除clearfix之后用伪元素做就好了（这样一来就是CSS亲自解决了）

.box {
            background-color: bisque;
     }
.content {
            width: 100px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
.box::after {
    content: '';	/*设置内容为空*/
    display: block; /*伪元素默认为行内元素*/
    clear: both; /*利用类似margin的东西撑起整个box*/
}

优化

既然都做到这一步了，那么干脆再优化一点吧，顺便把父子间margin塌陷的问题也解决了吧，只需要做一点小小的改动：

.box::before {
    content: '';
    display: table; 
    /*table独占一行，内容为空时没有大小，是此处最好的选择*/
    /*使用inline-block的话因为幽灵节点的关系会占据一个小小的行高从而把下面的元素挤下去*/
}

原理

大概是父子间有这个伪元素间隔，可以作为第一个子元素margin-top的参照物

也可以理解为有了这个伪元素后，第一个子元素逻辑上变成了第二个子元素，所以就不满足父子间margin塌陷的条件了(只有第一个子元素可以触发)

整合

了解到display:table的性质之后，那么就可以整合margin塌陷和高度塌陷的解决方案：

.box::before,
.box::after {
    content: '';
    display: table;
    clear: both;
}

静态定位static

position的默认属性
从上到下，从左到右依次排列
属于正常的文档流，可以用这个解除产生的其他定位方式

相对定位relative

相对自身的（文档流中）初始位置移动
但是元素所占有的空间还在原来的位置
CSS中relative定位后保留原来空间
可以通过设置relative属性但是并不进行移动，以此来配合absolute进行定位

绝对定位absolute

会脱离文档流，不会挤占空间

如果不设置偏移量，那么就其本身位置不会移动;
如果设置偏移量，那么才发生偏移

如果其父级元素满足以下几个条件中至少一个条件：

1.设置了非static的定位
2.具有transform属性
3.具有perspective属性

那么，它相对满足上述条件的父级中距离自己最近的一个进行移动

如果不存在这样的父级，那么相对于谁进行移动？
有的资料说是html，有的说是body，有的说是初始包含块

这个问题放到后面说

水平布局等式

left + margin + border + padding + width (+ left + right ) = 定位参考元素的宽

等式不成立时，则触发过度约束：

如果上述属性中没有值为auto，则浏览器自动调整right使等式成立；

如果上述属性中有值为auto，则浏览器调整值为auto的属性使等式满足；

这个也解释了margin: 0 auto;为什么可以自动居中——浏览器自动调整水平方向的margin使水平布局使等式成立
同理，拆开设置margin-top:auto;和margin-bottom:auto;也可以达到同样的效果

垂直布局等式

在文档流中并不是强制要求满足的，但是定位脱离文档流之后就必须满足：

margin + border + padding + height (+ top + bottom) = 定位参考元素的高

再次强调，这个是在定位元素脱离文档流之后才必须满足的，才有类似水平布局等式的过度约束发生

固定定位fixed

类似于abosolute，也会脱离文档流，但是fixed相对窗口进行移动
会始终固定在窗口的某一位置

根标签是fixed定位

html和body标签，如果二者都开启滚动条，那么body会出现滚动条；如果只有其中一个开启，那么仅有html出现滚动条

比如C站的右下角这几个按钮的父级就是采用的固定定位，无论窗口怎么滑动，它都是在右下角同一位置
CSDN使用CSS的fixed布局样例

黏性定位sticky

（黏性布局是个人翻译…
这是C3的新属性，具体效果类似relative + fixed
即达到某个位置的时候就保持不动

其中son具有sticky属性

<body>

    
    <br><br><br><br><br>
    <div class="son">123</div>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>

效果如下
CSS布局中的sticky布局效果1

当我们向下滑动窗口，发现son开始保持在某个位置了
（这里的某个位置是指我设置的top:10px;）
CSS布局中的sticky布局效果2

继续，依旧保持不动

CSS布局中的sticky布局效果3

定位而脱离文档流的元素，渲染顺序越靠后，层级越高
层级可以通过z-index来手动设置

初始包含块

包含块（ containing block )

-正常情况下:
包含块就是离当前元素最近的祖先块元素
-绝对定位的包含块:
包含块就是离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位则根元素就是它的包含块

一开始我是不知道有这个概念的，但幸亏江宇是个好同志啊和我讨论这个事情，
几度怀疑之后我才发觉这个东西并不简单

探讨这个问题的根本在于，直接父级为body的元素开启绝对定位时，究竟是参照谁？body？html？

答案是参照初始包含块，但是我们如何去理解这个概念，又该如何去验证呢？

网页的结构由外至内是：

浏览器窗口（视口） > 初始包含块 > html根标签 > body >…..

所以初始包含块是包裹html的一层（有一种大象无形的感觉）

但是我们依旧有办法看看它到底在哪

初始包含块示意图

图中可以看到，绝对定位是没有参照html，也没有参照body，而是这个平时从未注意过的初始包含块！

太强了，这哪里是江宇老弟啊，这简直是江宇大帝啊！
竟然初学前端就注意到了这种问题，强至于此，实乃天人也！

另外，还有一个有趣的现象就是，初始包含块的背景颜色是从html由上往下找的，如果html有颜色那么则采用html的颜色；没有则采用body的颜色——这是因为浏览器机制产生的现象

字体（待补充）

字体族

图标字体

位置

其他文本样式

CSS动画（待补充）

基本使用

前端实现小动画效果一般是三种形式：
gif css js

（曾经也是前端三剑客之一的flash已经不在考虑范围之内）

常用属性

动画速度

这个所谓的步长，实际上就是补帧，比如填个10，就是说10帧完成

而linear就是匀速，ease是慢速

3D转换

转换实际上就是说的transform属性
关于transform记住以下几点就好了:

transform可以接多个属性值，而且一般把translate系列放前面

translateZ的参数一遍以px为单位，几乎不会像XY一样用百分比（因为大部分父级不能作为z轴上的参考

注意，translate没有第三个参数，应该使用translate3d来做三个方向上的偏移

而rotate3d则是四个参数，前三个是矢量法自定义转轴，第四个是旋转的角度

z轴的正方向是垂直向上

至于3D，具有 渊博美术知识 的我还是很有话说的

指学过一个月的素描…

而要做3D效果就不能不知道透视（perspective，也可以理解为视距），也可以理解为3D图形在2D平面的投影

——这一点非常重要，不仅是满足远小近大这个特点，更是说图形虽然看上去是3D，但是实际上还是2D（可以旋转图形观察）

如果要做到真正的3D，则需要将父级的默认的transform-style:flat 改为 transform-style: perspective-3d开启立体空间

配合translateZ属性就能明显地看到效果，注意，perspective属性要加在目标的父级上

perspective和translatez可以看做——眼睛的位置和物体的位置

CSS预处理器（待补充）

原生CSS也是支持变量的，语法用 “–变量名:变量值的形式声明,声明的位置可以是html标签选择器内（或者通配符内也行）,而使用变量时的语法则是var(变量名)

变量是CSS3的新特性，一是兼容性不好，二是功能不完善，所以还是需要有预处理器来辅助

这个部分简单提一下，这已经超出CSS本身的范畴了
以后有空单独出一篇写预处理器

Sass

诞生于2007年，也叫SCSS，是对CSS的扩充
可以使用变量、常量、混入、函数等功能，最终会编译出合法的CSS给浏览器使用

严格来说，Sass和SCSS是有区别的，这个区别在于语法规则不一样:

SCSS和CSS一样采用了{}，而Sass采用缩进，不过Sass3之后的版本都支持SCSS这样的语法

Less

诞生于2009年，基于Sass的思想而使用CSS的语法

别的预处理器怎么样不知道，但是Less支持父子级元素的CSS嵌套，这就很棒了

创建和引入

创建的文件扩展名是less，

在html内引入方式和CSS完全一致:

<link rel="stylesheet" href="xxx.css">

就连扩展名也依旧用css而不是less

因为在项目运行的时候，less文件会在同一目录下被编译为一个同名的css文件

但是在less中引入less时，用的是如下语法:

@import "xxx.less"

注释

Less新增单行注释，其内容不会被解析为CSS，但是CSS原有的多行注释会被解析

变量

语法如下，这里的变量依旧是弱类型的，所以值比较随意
至于在何处声明，推荐是在文件的开头直接写

@a:100px;
@b:div233; /* 这是一个class名称 */
body {
    height: 100px + 100px; // 没错，值可以直接运算，变量自然也可以
	width:@a;         
}
// 作为class名、属性名或者作为某个整体的部分（比如字符串拼接）使用时，需要用@{}的形式
.@{b} {
    width: @a;
}
div {
    div {
        // 后代
    }
    >span {
        // 子代
    }
    &:hover {
        // &表示父级的名称，也就是最外层这个div
        // 不能写成div:hover,这样会被视为子级div的hover
        // 但是要注意，&实际上是代指一个字符串，也就是'div'
        // 它可以直接拼接拿来用，比如写成.&233就可以表示.div233
      
    }
}

变量重名时，优先使用较近者

引用

body {
    width: 100px;
    height: $width;
}

这样height就使用了width的值了

继承

也叫扩展….
两种写法：

.div1:extend(.p2) {
    // 继承，懂的都懂吧？
}
.div1 {
    // 这个其实是一个简单的混合函数（mixin）
    .p2(); 
}

两种写法在编译成CSS之后有差异：

前者是变成了复合选择器中的并集选择器，后者则是直接把属性复制
（前者是类似并查集的思想，性能好；后者则是暴力copy，性能差）

这种差异看完后面的混合函数相关的概念之后应该更好理解

类选择器

.p1() {
    width: 100px;
}

类选择器本身不会生效，它的作用就是给别人使用，就像之前提到的继承中的第二个写法那样

混合函数

可以看作函数那样使用:

.mixin_fun(@a， @b:red) {
    width: @a;
    height: 100px;
    color: @b;
}
div {
    .test(200px);
}

其他内置函数

average()之类的，估计还有sum()等等，这些的就不多说了

Less暂时就说这么多吧，再说就偏题了，以后花时间专门学一学更好

Stylus

诞生于2010年，来自Node.JS社区,主要用来给Node项目进行CSS预处理，也支持缩进语法和CSS语法（但是好像人气并不如前两个诶）

其他预处理器

比如Turbine、Swithch CSS、CSS Cacheer、DT CSS等

移动端适配

前置概念

众所周知，物理像素和CSS像素（px）是两码事
物理像素是真实存在且大小固定的一个物理发光单位，而CSS像素是与物理像素存在某种比例关系的值

一般而言，PC端的1px就是1物理像素，而在移动端上则可能不符合这一比例，具体情况如下：

移动端dpr表

解释一下，比如这里的dpr==2.0就意味着pc端的1px在该移动端设备上将显示为2px的效果

我们可以通过如下代码获取当前设备的物理像素比dpr

window.devicePixelRatio

那么，为什么移动端要做这样的设定呢？

Retina显示技术

即 视网膜屏幕显示技术，可以把更多的物理像素点压缩到一块屏幕里面，
从而达到更高的分辨率，并提高屏幕显示的细腻程度

据说这个技术是摩托罗拉公司开发的，没错就是诺基亚那个公司！
我的妈呀，想想诺基亚那个分辨率，里面可能有这个技术简直是惊为天人！

另外，为了开发者调试，浏览器会做一些处理工作
比如模拟dpr==2的移动设备，参数上是说750 * 1800，
那么浏览器模拟时会自动将视口调整为375 * 900

移动端开发选择

一般而言有两种，一种是原页面做兼容，另一种是单独写个页面

响应式布局兼容原页面

% vw vh rem em 用起来，meta视口改一下，布局flex grid——
没有UI大佬的话，
差不多能用就行了，别要求太高

单独写页面

这是国内市场的主流形式，配合navigator对象做一下设备判断选择性跳转页面

另外，这里补充一下媒体查询（虽然感觉这个东西有点过时，但是还是说一下基本语法）

媒体查询

@media [mediatype] and | not | only (media feature) {

}
/*
1. mediatype 是媒体类型
2. and not only 是逻辑谓词，only是指定某个特定的媒体类型，可以省略
3. media feature 媒体特性， 必须有小括号
*/
@media screen and (max-width: 539px) {
    body {
        background-color:blue;
    }
}
/*
	上面这个就表示 小于540px的屏幕
*/

当然，如果全都挤到media里面看着挺臃肿的，所以这里再link引入css的也可以进行媒体查询

<!-- 语法如下 -->
<link rel="stylesheet" media="mediatype and | not | only (media feature)" href=".../style.css">

移动端浏览器内核

一般来说是webkit，所以H5C3还是支持的，如果要考虑一些较新的特性的兼容性的话，
可以试着加上私有前缀webkit兼容

另外，浏览器也有一些特殊的内容，比如touch事件这些，不过此处不再赘述

Serio

https://serio.gitee.io/2021/12/06/html-css/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Serio !

前端

EventLoop中同步异步和微宏任务

时间轮询机制你真的了解吗？

2021-12-07 web

前端操作系统

MySQL

前端也得懂一点数据库才是

2021-12-06 数据库

数据库

前言

向无人理想处的，或多余的告白

更新日志

前置准备

编译工具

浏览器

资料参考（待补充）

HTML

HTML基本结构

使用HTML

两类标签

常见的基础标签

实体符号

meta

概览

一、name

二、http-equiv

内联框架（待补充）

属性

HTML5更新内容

CSS

选择器

标签选择器

class选择器

id选择器

属性选择器

复合选择器

伪类选择器

伪元素选择器

特异度

继承

CSS求值过程

盒子模型

内容content

边界border

内边距padding

外边距margin

怪异盒模型

margin塌陷

盒模型的差异

定位和布局

布局基础

常规流

浮动流（待补充）

静态定位static

相对定位relative

绝对定位absolute

固定定位fixed

黏性定位sticky

初始包含块

字体（待补充）

字体族

图标字体

位置

其他文本样式

CSS动画（待补充）

基本使用

3D转换

CSS预处理器（待补充）

Sass

Less

Stylus

其他预处理器

移动端适配

前置概念

Retina显示技术

移动端开发选择

媒体查询

移动端浏览器内核

你的赏识是我前进的动力