范叶亮的博客
·
CSS 布局和定位
原文中文，约21100字，阅读约需51分钟。
📝
内容提要
本文介绍CSS中的网格布局，包括网格线、网格单元、网格轨道和网格区域等概念，以及父元素和子元素属性。最后，介绍了grid属性，它是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow属性的简写。
🎯
关键要点
-
CSS布局和定位是网页元素显示的基本属性。
-
CSS盒模型由外边距、边框、内边距和内容组成。
-
块级盒子会换行并占据父容器的全部可用空间，内联盒子不会换行。
-
display属性控制元素的布局方式，常用的有block、inline和inline-block。
-
弹性布局提供了一种有效的方式来布局和对齐元素，基于弹性流向。
-
网格布局是一种二维布局系统，包含网格容器、网格项目、网格线、网格单元、网格轨道和网格区域。
-
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow属性的简写。
-
定位属性包括static、relative、fixed、absolute和sticky，分别用于不同的定位需求。
🏷️
