本文共 1905 字，大约阅读时间需要 6 分钟。
前端开发是Web应用开发的核心环节，涉及HTML、CSS和JavaScript的结合与应用。作为初次接触前端开发的技术人员，掌握基础知识是立足的关键。
在CSS中，position: absolute; 定位模式是基于父元素的定位系统。如果你使用 Flexbox 或 CSS Grid，则父元素也需要明确设定定位模式（relative 或 absolute）。绝对定位的元素会被脱离文档流，类似于静态定位以外的第一个定位元素，这一点在Flex布局中尤为重要。
CSS盒模型可以用盒子来描述布局，核心是盒子模型。box-sizing属性有两种模式：
content-box：标准盒模型，元素的宽高等于内容尺寸。border-box：怪异盒模型，元素的宽高等于内容尺寸加上内边距和边框大小。浮动具有其特殊性，如果未处理，会导致布局问题。常用的清除方法有三种：
.clearfix类：通过使用伪元素布局表格结构清除内容。overflow:hidden 和**display: -inline-block**：将浮动元素变为行内框。position:absolute 或**fixed**：将浮动元素移出普通流。CSS3 引入了诸多新特性，提升了设计和布局的能力。
transition：需要触发事件才能更改属性（如点击、hover），提供2帧过渡效果。animation：在无事件触发下，发生自定义的时间表反应动画，可以进行每帧处理。word-wrap：处理长文字不自动换行。text-shadow：为文本添加阴影效果。gradient：支持多种颜色渐变方式。transform：支持拉伸、缩小、旋转等变换操作。calc()：允许在布局中执行数学计算。Flexbox是现代布局的主要工具，简化了多样布局的实现。
flex-direction：默认为行内排列，可通过row、column等设置列型布局。justify-content：对齐方式，如center、space-between等。align-items：对齐方式，如center、flex-start等。flex-wrap：控制元素的换行方式，如wrap、nowrap。想要实现自适应布局，可以通过 Flexbox或 CSS Grid，提升开发效率。
水平垂直居中可以通过多种方式实现，Flex布局是最简单的：
.item { display: flex; justify-content: center; align-items: center;} 对位布局而言，使用 Absolute定位也是常见选择，如下：
.item { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);} 我倡导使用Flexbox，因为它对新手更友好，且代码简洁。对于对位布局，可以根据具体需求判断是否采用。
在移动端开发中，使用rem单位以根元素为基准，可以进行布局，同时确保适配不同分辨率屏幕。
最值得推荐的布局模式是基于Flexbox的圣杯布局，适用于两边宽度固定、中间自适应的场景，如下：
.container { min-width: 550px; font-size: 20px;}.column { height: 300px; position: relative; overflow: hidden;}.left { width: 200px; margin-left: -200px;}.right { width: 150px; margin-left: -150px;} 另一个优雅的解决方案是基于Flexbox的双飞翼布局，代码简洁度更高：
.container { min-width: 500px;}.column { float: left;}.center { margin-left: 200px; margin-right: 150px;} 在实际开发中，使用Flexbox比浮动更简单，且更容易调试和维护。在多栏布局场景下，共享-space的效果也更为自然。
转载地址：http://bmezk.baihongyu.com/