margin: auto 解决了 让一个 正常布局流(normal flow) 中 固定宽度 的 块 元素 水平 居中 的问题，其原理就是：在 writing-mode: horizontal-tb 和 direction: ltr 的前提下，当我们给一个块元素设置 margi…

说到水平居中，有许多方法，最常用的就是margin:0 auto。你知道为什么margin:0 auto可以实现水平居中效果吗？ 块级元素的七大水平属性 块级元素有七个水平属性，分别是： 左外边距ma

48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…

flex属性介绍 平时在项目中Flex布局的使用频率非常高，但是对于flex的几个值的具体用法和使用场景有时候不是很清楚，所以写此文来总结下。 首先，flex属性其实是一种简写，是flex-grow，

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」 CSS width 和 height 的：auto 和 100% 一、 width：auto和height：auto wi

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

flex-shrink 属性的作用：在空间不够时让各个子元素收缩以适应有限的空间了。 flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。 flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。 不会收缩所有的空间，而只会收缩 flex-sh…

经典面试题：说一说从输入URL到页面加载完成之间的过程。 你会发现，这题不论大厂小厂，都会问，为什么？

前言 position定位在css布局中扮演着重要的角色，相信大家都会使用position，但是是否真正的了解它呢？于是我花了一点时间对position常用的属性进行了总结。 1.margin、pad