范叶亮的博客
·
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，分别用于不同的定位需求。
➡️
