CSS/HTML - Basic & Tricks

[tomoya06]

CSS

参考下前端工匠-CSS一节

盒子模型

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。每个盒子包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

box-sizing

盒模型分为 IE盒模型 和 W3C标准盒模型。

• IE盒模型：属性width、height包含border和padding，指的是content+padding+border。
• W3C标准盒模型：属性width、height只包含内容content，不包含border和padding。

通过设置CSS的box-sizing属性，可以定义使用哪个盒模型。默认值为content-box，即标准盒模型；设为border-box则用的是IE盒模型。下图【图片来源】，在设置width相等的情况下，上方为标准盒模型，下方为IE盒模型。

BFC

参考10分钟理解BFC原理

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

1. 普通流 (normal flow)：在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
2. 浮动 (float)：在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
3. 绝对定位 (absolute positioning)：在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

能触发BFC的属性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的特性：

1. 同一个 BFC 下外边距会发生折叠
2. BFC 可以包含浮动的元素（清除浮动）
3. BFC 可以阻止元素被浮动元素覆盖

CSS布局以及尝试

水平、垂直居中

方案介绍参考前端工匠博客
代码实现对比参考CodeSandbox

瀑布流

实现参考自己代码。原理是根据页面宽度居中放置N条纵列容器，每次往最短的容器添加一个item元素。

[tomoya06]

WEBP

简述

Google主导的一种同时提供了有损压缩与无损压缩的图片文件格式，文件体积相比PNG和JPG有大幅减小。根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

兼容性

传闻只有PC端+Android端的Chrome对WEBP支持较好。但截至2020-09-29，各浏览器对webp格式图片的支持率总体已经达到80%左右了（大人时代变了！）

实践

在线上使用时，还是要考虑少数浏览器的不兼容。基本思想是在浏览器不支持WEBP格式时，换用PNG/JPG等格式的图片。

1. 纯HTML实现

使用<picture> + <source> / <img>标签，一个picture中可包含多个image source，由浏览器根据设定的属性或支持程度来选用要展示的图片。

完整文档参考MDN，最简实现参考codesandbox

<picture>
	<source srcset="https://dy-pic0.iqiyipic.com/image/20200709/18/vm/a3959f0d9e394a1c8b1e3b15610676c0.webp" type="image/webp" />
	<img src="https://dy-pic0.iqiyipic.com/image/20200709/16/wp/3e6d1acd4343402a83e2ededbe757fb3.png" />
</picture>

2. 借助js判断

参考CSS TRICKS提供的方法，Modernizr提供了判断浏览器兼容性的封装方法，据此可以设置不同的background-image。

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

[tomoya06]

Flexbox

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

基本概念

一些属性

具体用法看MDN文档或者阮一峰的图文并茂教学吧。

flex-direction 主轴方向

column / column-reverse / row(默认) / row-reverse

justify-content 项目在主轴上的对齐方式

align-items 项目在交叉轴上如何对齐

align-content 多根轴线的对齐方式

align-self 单个项目覆盖align-items的属性