开头语

本文记录一下笔者对于 HTML 和 CSS 的学习。

编辑器

首先且最重要的是选择一个比较合适的编辑器，在这方面我使用过notepad++，vscode和idea

IDE

集成开发环境（Integrated Development Environment，简称 IDE）是一种辅助程序开发人员开发软件的应用软件，在开发工具内部就可以辅助编写源代码文本、并编译打包成为可用的程序，有些甚至可以设计图形接口。

简单来说，IDE 会集成了很多工具、插件和环境，常见代码提示、错误提示、编译工具等等，在 IDE 下面打开一个 web 项目，很多的辅助信息都帮你解析好了。
而相对来说，IDE 比起文本编辑器就会笨重很多，尤其在多项目开发管理、编辑器启动的时候，速度明显下降。

前端常用的 IDE 是 Webstorm 。

文本编辑器

文本编辑器最大的优势，便是轻。像项目多的时候，常常是打开多个文本编辑器，也不至于卡顿。

而文本编辑器通常也是很灵活的，可以安装需要的一些插件，也能获得想要的辅助功能。

前端常用的文本编辑器有 Sublime、VSCode 等。

HTML 与 CSS

上一篇也有简单说过 HTML 相关的，我想想这里说些啥的好。
这里主要针对一些样式的逻辑来说明，其他详细的属性和设置值在 w3c 或是 MDN 上学习。

盒子模型

我们能从控制台的 Element 模块里，找到这样的盒子模型：

盒模型(box model)是 CSS 中的一个重要概念，它是元素大小的呈现方式。

概念

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性（像它的颜色，背景，边框方面）和位置是渲染引擎的目标。

在 CSS 中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。
每个盒子有四个边：外边距边（margin）,边框边（border）,内填充边（padding）与内容边（content）。

margin 叠加

当两个或更多个垂直边距相遇时，它们将形成一个外边距（margin）。

margin的叠加会有一些混淆，需要注意的地方是：
外边距（margin）的高度等于两个发生叠加的外边距的高度中的较大者。
需要注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

盒模型计算

CSS3 中新增了一种盒模型计算方式：box-sizing属性。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

content-box（默认）

元素宽高(width/height)等于：content
布局所占宽高等于：width/height(content) + border + padding

padding-box

元素宽高(width/height)等于：content + padding 布局所占宽高等于：width/height(content + padding) + border

border-box

元素宽高(width/height)等于：content + padding + border
布局所占宽高等于：width/height(content + padding + border)

内联元素与块状元素

内联元素

内联元素又称行内元素等，表示位于行内的元素。
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行。
内联元素的宽度高度不起作用。

常见的内联元素：<a>/<span>/<i>/<strong>等。

块状元素

块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素。
块状元素排斥其他元素与其位于同一行。
块状元素的宽度高度起作用。

常见的块状元素有：

<div>/<p>/<h1>/<h2>…<h6>/<ul>/<ol>
HTML5 新元素: <section>/<article>/<header>/<footer>等

常用的 display 属性

block：块状元素

可容纳其他块状元素或内联元素
排斥其他元素与其位于同一行
宽度高度起作用，block元素可以设置宽度width和高度height，有效

inline：内联元素

位于行内，即位于块状元素或者其他内联元素内
只能容纳文本或者其他内联元素
允许其他内联元素与其位于同一行
inline 元素的宽度高度不起作用

inline-block 元素

与inline元素相似的地方
- 位于行内，即位于块状元素或者其他内联元素内
- 允许其他内联元素与其位于同一行
与block元素相似的地方
- 可容纳其他块状元素或内联元素
- 宽度高度起作用
使用inline-block可以很方便解决一些问题:
- 使元素居中
- inline元素a/span设置宽高
- 将多个块状元素放在一行

float 浮动

float属性定义元素在哪个方向浮动。
float属性可应用于图像，使文本围绕在图像周围。

使用float还可能遇到高度塌陷的问题，而可以使用几个方法解决：

父元素使用overflow: hidden（此时高度为auto）
使父元素也成为浮动float元素
使用clear清除浮动

元素定位

文档流：正常的文档流也叫普通流，在 HTML 里面的写法就是从上到下，从左到右的排版布局。

而我们常用的布局，与position样式属性紧紧相关。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

relative

生成相对定位的元素，相对于其正常位置进行定位。

relative的特点：

保持原有文档流，但相对本身的原始位置发生位移，且占空间
元素也遵循从上到下，从左到右的排版布局
相对于其正常位置进行定位，在这里设置了relative的元素相对其原本位置（position: static）进行位移
元素占有原本位置，因此下一个元素会排到该元素后方
元素占位不会随着定位的改变而改变。也就是说relative在文档流中占有的位置与其原本位置（position: static）相同

这里有个需要注意的地方：虽然relative元素占位与static相同，但会溢出父元素，撑开整个页面（document）。

absolute

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
元素的位置通过left, top, right以及bottom属性进行规定。

absolute的特点：

absolute元素脱离文档流
absolute元素不占位，因此下一个符合普通流的元素会略过absolute元素排到其上一个元素的后方
absolute元素的定位是相对于static定位以外的第一个父元素进行定位

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过left, top, right以及bottom属性进行规定。

fixed的特点：

fixed元素脱离文档流
fixed元素不占位
fixed相对于浏览器窗口来定位，不管是否有static定位以外的父元素
absolute元素会随着页面的滚动而滚动，而fixed不会

结束语

由于我是一个纯小白，所以这里的学习其实查阅了很多资料希望自己也能有所收获！！！！

第六届字节跳动青训营第三课：学习HTML与CSS | 青训营

开头语

编辑器

IDE