《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">