css布局 弹性布局 和 网格布局
这里就不写这两种布局的内容了
弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
网格布局链接:https://www.jianshu.com/p/d183265a8dad
小测试:
用 flex 与 grid 实现如下即可:

<html>
<head>
<style> /* flex */
.box {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box div {
width: calc(100% / 3);
height: 100px;
border: 1px solid black;
} /* grid */
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
} .box div {
height: 100px;
border: 1px solid black;
}
</style>
<head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<body>
</html>
css布局 弹性布局 和 网格布局的更多相关文章
- 关于css布局的记录(二) --网格布局
网格布局 学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习 1.定义: 顾名思义,网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局 使用方法:display:gri ...
- CSS进阶之模拟Bootstrap网格布局
目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 使用BootStrap网格布局进行一次演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android零基础入门第32节:新推出的GridLayout网格布局
原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS躬行记(9)——网格布局
网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CS ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 纯CSS最小响应网格布局
lemonade.css是一个超级小的CSS可以帮助你创建一个完全响应和灵活自如的网格布局,包括所需网页的头部. 样式链接 <link rel= href=> HTML结构这样创建一个多列 ...
随机推荐
- 【11.18总结】从SAML出发在重定向中发现的XSS漏洞
Write-up地址:How I Discovered XSS that Affects around 20 Uber Subdomains 作者:fady mohammed osman 总算回家了, ...
- IntelliJ IDEA 历史版本下载地址
地址:https://confluence.jetbrains.com/display/IntelliJIDEA/Previous+IntelliJ+IDEA+Releases scala插件:htt ...
- QQ开发技术资料集锦
1.GG2013:可在广域网部署运行的QQ高仿版 http://www.cnblogs.com/justnow/category/503400.html 2. 苏飞博客: C#仿QQ皮肤-皮肤控件窗体 ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- [BZOJ4475][JSOI2015]子集选取[推导]
题意 题目链接 分析 显然可以看成一个位数为 \(n\) 的二进制数然后每一位分开考虑然后求和.最后的答案是 \(w^n\) 的形式. 考虑一个dp. 定义状态 \(f_{i}\) 表示选择了长度为 ...
- 用 Python 给程序加个进度条,让你的看起来更炫酷?
对于开发或者运维来说,使用 Python 去完成一些跑批任务,或者做一些监控事件是非常正常的情况.那么如何有效地监控任务的进度?除了在任务中加上 Log 外,还能不能有另一种方式来了解任务进展到哪一步 ...
- 关于恶意说说自动在QQ空间转发的机制
有些很讨厌的带链接说说,只要你在手机打开它,就会自动转发,内容极其不雅 一怒之下我决定看个究竟首先,在此页开头有此关键语句: <iframe src="http://rtb.map.q ...
- hdu1232畅通工程(并查集,简单题)
传送门 最少好要修多少条路太能使全部城镇连通.只要用并查集算可以连通的城市的组数,修的路就是组数减1 #include<bits/stdc++.h> using namespace std ...
- 自己编写的:centos6.6上编译安装apache2.4+php5.6+mysql5.6【亲自】
在centos6.6上安装apache2.4+php5.6+mysql5.6 关于wget的安装 将之前装系统的.iso文件挂载到光驱 由于我在/home/jinnan/下建立了一个cdrom文件夹 ...
- Oracle中解析XMLType格式字段
背景:项目从某数据交换平台获取XML数据,以Oracle的XMLType格式保存在数据库字段中,需要建立触发器.存储过程,在保存数据时解析XML字段,将数据写入其他业务表中. 参考资料:Oracle的 ...