在网页设计中，我们经常需要创建各种几何形状和动态布局。以前这些效果大多需要JavaScript来计算，但现在CSS提供了原生的三角函数支持，让我们能够用纯CSS实现复杂的数学计算。

你在写CSS时，一定遇到过这些问题：想让一个盒子的高度总是宽度的一半，希望字体大小能随着屏幕宽度自动调整，需要元素在动画中平滑移动，过去，这些效果往往需要JavaScript帮忙计算。但现在，CSS自己就能搞定。

页面上的登录窗口、加载动画、提示信息，我们每天都会遇到需要居中显示的场景。这个看似简单的需求，却让很多开发者感到头疼。为什么一个居中有这么多种实现方式？今天我们就来彻底解决这个问题。

Flexbox 布局本身没有问题。问题在于我们使用它的方式。你曾经遇到的许多“Flexbox 问题”，其实并不是真正的 bug：而是父元素和子元素在沟通上出现了误解；

Flexbox（弹性盒子）是 CSS3 中引入的一种强大且兼容性好的布局方法。使用 flexbox，可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。

响应式的概念覆盖了自适应，但响应式包含的东西更多，响应式的布局可以根据屏幕的大小自动调整页面的展示方式；自适应有一个致命缺点：如果屏幕尺寸太小

text-align 一般运用在块级元素中，使其中的文本对齐。实际上，运用在块级元素中的text-align会使其包含的内联元素水平对齐。place-content 属性是align-content和justify-content的简写

如果我告诉你，你只需要知道 3 个 CSS 属性就可以制作一个完全响应式的 CSS 网格，如下所示：让我们从 HTML 布局开始。

本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时

静态布局描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的；自适应布局描述：不同屏幕分辨率下，保持原有展示方式。即元素的位置会变化而大小不会变化

w3school指出，text-align用于设置块级元素内文本的水平对齐方式。如果想使inline元素或inline-block元素居中对齐，可以使用text-align: center方法，对于block元素无法使用text-align实现居中对齐

CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利弊。

方格中间有一定的间隙，间隙是固定的。应该如何布局会更加完美呢，比如要保证在布局完成的情况下，可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候，这样的布局依然能够不受影响

BFC是页面上的独立渲染区域，外边距折叠/塌陷：父子关系在父级加overflow:hidden，兄弟关系给其中一个兄弟设置成独立的BFC。

两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在CSS面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能