《CSS Layout cookbook》学习笔记

最新推荐文章于 2024-05-20 14:13:44 发布

原创最新推荐文章于 2024-05-20 14:13:44 发布 · 380 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #前端

css 专栏收录该内容

3 篇文章

订阅专栏

本文是关于《CSS Layout cookbook》的学习笔记，涵盖了媒体对象、分栏、居中、粘性底部等多种布局技巧，深入探讨了grid和flex布局，并讨论了兼容性问题。通过实例代码展示了如何实现各种布局效果。

《CSS Layout cookbook》学习笔记

《CSS Layout cookbook》Note

《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>
        <div class="footer"></div>
		<!-- 5.嵌套内 -->
        <div class="media">
            <a class="img">
                <img src="asserts/img3.jpg" alt="Balloons">
            </a>
            <div class="content">
                <p>Lorem</p>
            </div>
            <div class="footer"></div>
        </div>
    </div>
    <!-- 4 -->
</html>

（代码效果）
宽屏效果
窄屏效果
更小屏效果

二、Columns（分栏）

（主要代码—— 左右内容自适应分栏）

1.不需要注意每列的样式差异时使用
2.column-width 控制列的宽度
3.column-rule 增加列之间的规则（下列三项的合并简写）
4.column-rule-width column-rule-style column-rule-color
5.column-gap 控制列之间的间距

.container {
    border: 2px solid rgb(75, 70, 74);
    border-radius: .5em;
    padding: 20px;
    column-width: 10em;
    column-rule: 1px solid rgb(75, 70, 74);
}
<div class="container">
    <p>决定</p>
    <p>jdshs</p>     				       			
    <p>33333</p>
</div>

（代码效果—— 左右内容自适应分栏）
不分栏

更多栏
（主要代码—— 单行等高布局）

.container {
	border: 2px solid rgb(75, 70, 74);
	border-radius: .5em;
	padding: 20px 10px;
	display: flex;
}
.container>* {
	padding: 10px;
	border: 2px solid rgb(95, 97, 110);
	border-radius: .5em;
	margin: 0 10px;
	flex: 1;
}

<div class="container">
	<p>Veggies</p>
	<p>Gumbo</p>
	<p>Turnip</p>
</div>

（代码效果—— 单行等高布局）

（主要代码—— 换行布局）

flex: 1 1 200px; 等价于

flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;

.container {
    border: 2px solid rgb(75, 70, 74);
    border-radius: .5em;
    padding: 20px 10px;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}
.container>* {
    padding: 10px;
    border: 2px solid rgb(95, 97, 110);
    border-radius: .5em;
    margin: 0 10px;
    flex: 1 1 200px;
}

   <div class="container">
        <p>Veggies</p>
        <p>Gumbo</p>
        <p>Turnip</p>
    </div>

（代码效果—— 换行布局）

（主要代码—— 二维行列布局）

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;

.container {
    border: 2px solid rgb(75, 70, 74);
    border-radius: .5em;
    padding: 20px;
    width: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.container>* {
    padding: 10px;
    border: 2px solid rgb(95, 97, 110);
    border-radius: .5em;
    margin: 0;
}

<div class="container">
    <p>Veggies</p>
    <p>Gumbo</p>
    <p>Nori</p>
</div>

（代码效果—— 二维行列布局）
grid布局

三、Center an element（居中）

（主要代码）

.container{
	display: flex;
	align-items: center; /*纵轴*/
	justify-content: center; /*横轴*/
}

四、Sticky footers（粘性底部）

（主要代码）

min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;

* {
    box-sizing: border-box;
}
section {
    height: 400px;
    width: 500px;
}
.wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.page-header,
.page-footer {
    background-color: rgb(75, 70, 74);
    color: #fff;
    padding: 20px;
}
.page-body {
    padding: 20px;
}
.preview {
    height: 400px;
    overflow: auto;
}

<section>
    <div class="wrapper">
        <header class="page-header">header</header>
        <main class="page-body">
            <p>Main</p>
        </main>
        <footer class="page-footer">Sticky footer</footer>
    </div>
</section>

（主要代码）
固定底部

（主要代码——不支持网格布局时）

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.page-header,
.page-footer {
    flex-shrink: 0;
}
.page-body {
    flex-grow: 1;
}

<div class="wrapper">
    <header class="page-header">This is the header</header>
    <main class="page-body">
    <p>Main</p>
    </main>
    <footer class="page-footer">Sticky footer</footer>
</div>

五、Split navigation（导航栏）

（主要代码）

.main-nav {
    display: flex;
}
.push {
    margin-left: auto;
}

<nav>
    <ul class="main-nav">
        <li><a href="">About</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Our Team</a></li>
        <li class="push"><a href="">Contact</a></li>
	</ul>
</nav>

（代码效果）
导航栏

六、Breadcrumb navigation（面包屑）

（主要代码）

.breadcrumb ul {
    display: flex;
}
    
.breadcrumb li::before {
    content: "→";
}
    
.breadcrumb li:first-child::before {
    content: "";
}

<nav aria-label="Breadcrumb" class="breadcrumb">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Category</a></li>
        <li><a href="">Sub-Category</a></li>
        <li><span aria-current="page">Product</span></li>
    </ul>
</nav>

（代码效果）
面包屑

七、List group with badges（列表）

（主要代码）

.list-group li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

<ul class="list-group">
    <li>Item One
        <span class="badge">2</span>
    </li>
    <li>Item Two
        <span class="badge">10</span>
    </li>
    <li>Item Three
        <span class="badge">9</span>
    </li>
    <li>Item Four
        <span class="badge">0</span>
    </li>
</ul>

（代码效果）

八、Pagination

（主要代码）

1.visuallyhidden 给屏幕阅读器提供的样式

class to hide content visually leaving it available to screenreaders.
See notes in cookbook recipe.
https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939

2.aria-label="pagination" on the element

为了方便屏幕阅读器知道我们的分页做了什么并且点击链接将要去往哪里

3.set the aria-hidden attribute on the paging arrows

利于屏幕阅读区读取但是不可见

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
nav {
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    margin-top: 1em;
    padding-top: .5em;
}
.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.pagination li {
    margin: 0 1px;
}
.pagination a {
    display: block;
    padding: .5em 1em;
    border: 1px solid #999;
    border-radius: .2em;
    text-decoration: none;
}
.pagination a[aria-current="page"] {
    background-color: #333;
    color: #fff;
}

<nav aria-label="pagination">
    <ul class="pagination">
        <li><a href="">
        <span aria-hidden="true">&laquo;</span>
        <span class="visuallyhidden">previous</span>
        </a></li>
        <li><a href="">
        <span class="visuallyhidden">page </span>
        1
        </a></li>
        <li><a href="" aria-current="page">
        <span class="visuallyhidden">page </span>
        2
        </a></li>
        <li><a href="">
        <span class="visuallyhidden">page </span>
        3
        </a></li>
        <li><a href="">
        <span class="visuallyhidden">page </span>
        4
        </a></li>
        <li><a href="">
        <span class="visuallyhidden">next</span>
        <span aria-hidden="true">&raquo;</span>
        </a></li>
    </ul>
</nav>

（代码效果）

九、Card（更新中）

（主要代码）

（代码效果）

十、Grid wrapper（更新中）

（主要代码）

（代码效果）

十一、补充内容（flex与grid布局）

MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

博客： http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

属性总结

容器属性
1.display: grid 容器元素为块级元素
display: inline-grid // 容器元素设为行内元素

2.grid-template-columns // 定义每一列的列宽
grid-template-rows // 定义每一行的行高
例：grid-template-columns: 100px 100px 100px; /33.3% 33.3% 33.3%; 例：grid-template-rows: 100px 100px 100px; /33.3% 33.3% 33.3%;

1.repeat()： grid-template-columns: repeat(3, 33.3%); // 重复次数重复值
repeat()： grid-template-columns:repeat(2, 100px 20px 80px); // 后面列全重复2次，即共6列。

2.auto-fill自动填充： grid-template-columns: repeat(auto-fill, 100px);

3.fr关键字： grid-template-columns: 1fr 1fr; // 后者是前者1倍
fr关键字与绝对长度结合使用： grid-template-columns: 150px 1fr 2fr;

4.minmax(): grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 第三列不小于100px 不大于1fr

5.auto关键字: grid-template-columns: 100px auto 100px;

6.指定网格线名称:(行写法同列) grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]
允许一根线多个名字: [fifth-line row-5]
例：两栏布局: display: grid; grid-template-columns: 70% 30%;
例: 十二网格布局: grid-template-columns: repeat(12, 1fr);

3.grid-row-gap // 行间距最新标准: row-gap
例： grid-row-gap: 20px;
grid-column-gap // 列间距最新标准: column-gap
例： grid-column-gap: 20px;
grid-gap // 上两式简写最新标准: gap
例： grid-gap: 20px 20px;

4.grid-template-areas // 定义区域
正常命名： ‘a b c’ ‘d e f’ ‘g h i’
合并单元格： ‘a a a’ ‘b b b’ ‘c c c’
不适用的区域用.代替： ‘a . c’ ‘d . f’ ‘g . i’
网格线命名：起始位置水平垂直网格线：区域名-start / 反之：区域名-end

5.grid-auto-flow // 指定元素的排列顺序
例： grid-auto-flow: row // 默认，先行后列
例： grid-auto-flow: column // 先列后行
例： grid-auto-flow: row dense/ column dense // !!! 有点问题

6.justify-items // 设置单元格内容水平位置
align-items // 设置单元格内容垂直位置
place-items // 上两项的合并简写
例： justify-items/align-items: start \| end \| center \| stretch(拉伸)
例： place-items: start end;

7.justify-content // 设置单元格内容水平位置
align-content // 设置单元格内容水平位置
place-content // 上两项的合并简写
start \| end \| center \| stretch \| space-around \| space-between \| space-evenly
space-around: 项目间间隔是两边的的两倍
space-between: 项目间有间隔但是两边没有间隔
space-evenly: 项目间和两边间隔相同

8.grid-auto-columns // 这个示例有点迷吖
grid-auto-rows

9.grid-template // 简写形式 (不建议合并) // grid-template-columns \| grid-template-rows \| gris-template-areas
grid // 简写形式（不建议合并）
// grid-template-rows \| grid-template-columns \| grid-template-areas
// grid-auto-rows \| grid-auto-columns \| grid-auto-flow

项目属性
1.grid-column-start
grid-column-end
grid-row-start
grid-row-end
例：
grid-column-start: 1; // “某块”列从第1根网格线开始
grid-column-end: 3; // “某块”列从第3根网格线开始
grid-row-start: 2; // “某块”行从第2根网格线开始
grid-row-end: 4; // “某块”行从第4根网格线开始
grid-column-start: header-start; // “某块”指定网格线名字
grid-column-start: span 2; // “某块”左右边框之间跨越2个网格

2.grid-column // 合并简写
// grid-column-start \| grid-column-end
grid-row // 合并简写
// grid-row-start \| grid-row-end
例：grid-column: 1/3; grid-row: 1/2;
例：grid-column: 1/span 2; grid-row: 1/ span 2;

3.grid-area // 指定项目放在哪个区域
例：grid-area: e;
grid-row-start \| grid-column-start \| grid-row-end \| grid-column-end
例：grid-area: 1/1/3/3

4.justify-self // 设置单元格内容水平位置
align-self // 设置单元格内容水平位置
place-self // 上两项简写
start \| end \| center \| stretch