《CSS Layout cookbook》学习笔记
《CSS Layout cookbook》Note
资源来自:MDN
具体网址: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook
学习顺序:按照官方目录
一、Media objects(媒体对象)
(主要代码)
/* 补充笔记 */
display: grid;
发展过程:float -> flex -> grid
区别:flex 一维布局 grid 二维布局
推荐学习网址(日后扩展):
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
这里只研究一下用到的属性grid-template-columns:
定义每一列的列宽grid-template-rows
定义每一行的行高grid-template-areas
用于定义区域grid-gap
设置行间距与列间距的缩写grid-column-start
img {
max-width: 100%;
}
p {
margin: 0 0 1em 0;
}
@media (min-width: 500px) {
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.media-flip {
grid-template-columns: 1fr fit-content(250px);
grid-template-areas:
"content image"
"footer image";
}
.media>.media {
grid-column-start: 2;
}
.media-flip>.media {
grid-column-start: 1;
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
}
<!-- 1.两列+右列头+右列底 -->
<div class="media">
<div class="img">
<img src="asserts/img3.jpg" alt="Balloons">
</div>
<div class="content">
<p>Lorem</p>
</div>
<div class="footer">
An optional footer goes here.
</div>
</div>
<!-- 1 -->
<!-- 2.两列+右列头 -->
<div class="media">
<div class="img">
<img src="asserts/img3.jpg" alt="Balloons">
</div>
<div class="content">
<p>Lorem</p>
</div>
<div class="footer"></div>
</div>
<!-- 2 -->
<!-- 3.两列+左列头+左列底 -->
<div class="media media-flip">
<div class="img">
<img src="asserts/img3.jpg" alt="Balloons">
</div>
<div class="content">
<p>Lorem</p>
</div>
<div class="footer">
An optional footer goes here.
</div>
</div>
<!-- 3 -->
<!-- 4.嵌套外 -->
<div class="media">
<a class="img">
<img src="asserts/img3.jpg" alt="Balloons">
</a>
<div class="content">
<p>Lorem</p>
</div>