CSS新布局技巧:10种现代布局实现
15 浏览量
更新于2024-09-03
收藏 367KB PDF 举报
"这篇资源主要介绍了使用CSS实现的10种现代布局的代码示例,包括超级居中、可解构的自适应布局和经典的sidebar布局等。文章指出,大部分代码已在主流最新浏览器中实现,适合开发环境中使用。"
本文探讨了在Web开发中使用CSS进行高效布局的方法,特别关注了在没有Flexbox和Grid布局之前的挑战以及它们如何简化布局工作。作者提到在观看web.dev的2020直播时,受到启发决定分享这些现代CSS布局技巧。
1. **超级居中**
在Flexbox和Grid出现之前,垂直居中一直是CSS布局的一个难题。现在,通过结合使用`display: grid`和`place-items: center`,可以轻松实现元素的水平和垂直居中对齐。例如,创建一个类名为`.parent`的容器,并应用上述CSS规则,内部元素将自动居中。
```css
.ex1.parent {
display: grid;
place-items: center;
}
```
2. **可解构的自适应布局**
这种布局模式常见于电商网站,允许元素在视口宽度足够时水平排列,当视口变窄时,元素会堆叠起来。通过设置`flex: 0 1 <baseWidth>`,元素在宽度固定的情况下仍能适应不同屏幕尺寸。例如,创建一个包含3个`.boxgreen`元素的`.parentwhite`容器,应用以下CSS:
```css
.ex2.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ex2.box {
flex: 1 1 150px; /* 不伸展,固定宽度 */
margin: 5px;
}
```
3. **经典的sidebar布局**
这种布局通常用于具有侧边栏和主要内容区域的设计。利用CSS Grid可以方便地实现这种效果。创建一个`.grid-temp`容器,将内容分为两部分:`.main`和`.sidebar`,并定义相应的CSS规则。
```css
.grid-temp {
display: grid;
grid-template-columns: 1fr 3fr; /* 1fr表示sidebar,3fr表示main */
grid-gap: 10px;
}
/* 其他样式 */
```
以上只是10种布局中的3种示例,完整的资源提供了更多实用的布局代码,如响应式设计、卡片布局、多列布局等。为了查看全部代码和演示,读者可以通过链接访问GitHub页面或阅读原文。这些布局技术的广泛支持意味着开发者可以更自由地构建现代、响应式的Web界面。
2020-06-11 上传
2020-07-20 上传
2020-09-25 上传
2020-09-22 上传
2021-04-25 上传
2023-10-14 上传
2019-07-05 上传
2020-09-27 上传
2023-11-02 上传
weixin_38724247
- 粉丝: 8
- 资源: 915
最新资源
- MATLAB新功能:Multi-frame ViewRGB制作彩色图阴影
- XKCD Substitutions 3-crx插件:创新的网页文字替换工具
- Python实现8位等离子效果开源项目plasma.py解读
- 维护商店移动应用:基于PhoneGap的移动API应用
- Laravel-Admin的Redis Manager扩展使用教程
- Jekyll代理主题使用指南及文件结构解析
- cPanel中PHP多版本插件的安装与配置指南
- 深入探讨React和Typescript在Alias kopio游戏中的应用
- node.js OSC服务器实现:Gibber消息转换技术解析
- 体验最新升级版的mdbootstrap pro 6.1.0组件库
- 超市盘点过机系统实现与delphi应用
- Boogle: 探索 Python 编程的 Boggle 仿制品
- C++实现的Physics2D简易2D物理模拟
- 傅里叶级数在分数阶微分积分计算中的应用与实现
- Windows Phone与PhoneGap应用隔离存储文件访问方法
- iso8601-interval-recurrence:掌握ISO8601日期范围与重复间隔检查