H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
教程开始
· 排版
· Box模型
Box模型重点在理解内边距和外边距，外边距用于将两个元素隔开，内边距用于控制内容与边距的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* padding: 10px 20px 10px 20px;
border: 5px solid gold; */
/* 两个元素紧挨着一起时，相邻部分的外边距会被压缩成1个 */
/* 外边距用于将两个元素隔开，内边距用与增加内容与边距的距离 */
/* 动手试试，在控制台中看不同内外边距设置的效果 */
padding: 10px 20px;
margin: 10px 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, odit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, odit.
</p>
</body>
</html>
· 元素尺寸
默认情况下，给元素设置宽高，是对内容区域设置宽高，但整个盒子的宽高需要算上内外边距，这在计算元素大小的时候会有一定干扰，可以设置宽高直接作用于整个盒子box-sizing: border-box，方便计算元素之间的距离，内容的位置就靠内边距来控制。宽高的设置只对块级元素有效，所以，想对一个行内元素设置宽高，就需要把行内元素变成行内块级元素display: inline-block，行内块级元素是行内元素，但可以设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通常使用全局选择器，也就是* 对元素做全局设置 */
/* box-sizing默认对伪元素选择器不起作用，需要手动指定 */
*, *::before, *::after{
box-sizing: border-box;
}
.box {
/* 默认情况下，宽高的设置是给内容区域的 */
/* 任何内边距和边框都会改变盒子的实际大小 */
/* 外边距不会改变盒子的大小，但会改变盒子的位置 */
width: 100px;
height: 100px;
background-color: gold;
padding: 20xp;
border: 10px solid greenyellow;
/* box-sizing是告诉浏览器，宽高的设置是作用于内容区域还是整个人盒子 */
/* 默认是内容区域 */
box-sizing: content-box;
/* 当作用区域是整个盒子时，宽高就是整个盒子的宽高 */
/* 内容区域的大小，就不是100x100了，需要排除掉边距后，才是实际的内容区域大小 */
/* 使用border-box的时候，使得计算元素的大小变得容易 */
box-sizing: border-box;
}
span {
background-color: gold;
/* 行内元素默认是没有宽高的，所以此时宽高不生效 */
height: 100px;
width: 100px;
/* 如果一定要设置宽高，需要将行内元素拥有一部分块级元素的功能，可以设置宽高，但并不独占一行 */
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
Hello
</div>
<div class="box">
Hello
</div>
<!-- 行内元素之间的间隙，跟这里两个span标签之间的空格有关系，多个空格会合并为1个空格 -->
<!-- 若两个span标签之间没有空格，页面上两个span也不会就间隙 -->
<span>Hello</span> <span>Hello</span>
</body>
</html>
· 内容溢出
当内容太多，导致容器无法显示完内容时，就会产生溢出，内容会显示到容器之外，此时需要使用overflow属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 3px solid gold;
width: 150px;
height: 150px;
/* overflow属性包含overflow-x和overflow-y */
/* overflow hidden表示不显示溢出部分 */
/* overflow scroll表示溢出部分滚动显示，但windows会一直显示滚动条，不好看，所以通常使用auto */
/* 当有内容溢出时，显示滚动条，没有溢出则不显示 */
/* 有时也可以单独设置x方向或者y方向的溢出规则 */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis, omnis quod quia quibusdam quaerat voluptate dolorem? Cum, impedit? Suscipit, iste accusamus. Dignissimos veniam unde inventore enim, explicabo, aliquid voluptatum minus ad quisquam cupiditate provident rerum officiis consequuntur dolore ut fugiat asperiores quod, tempore odio dolores? Consequuntur, reiciendis eligendi! Commodi, vitae!</p>
</div>
</body>
</html>
· 计量单位
计量单位分为绝对单位和相对单位
绝对单位：px，无论屏幕大小怎么变，元素尺寸都不会变
相对单位： %百分比，vw是相对于浏览器视图区域的宽的百分比，vh是相对于浏览器视图区域的高的百分比，em和rem是相对于字体大小的单位
不同情景下需要用到不同的单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: gold;
/* 50%是相对于父元素的宽度，box的父元素是body */
/* body也没有宽度，就会找body的父元素，就是html元素 */
/* 默认块级元素的宽度是占满一行，50%就是浏览器视图区域的一半 */
width: 50%;
/* 高度这里写100%，会让整个box高度为0，因为box里没有其他元素 */
/* 100%的height是相对于父元素body计算的，body也没有高度 */
/* 高度是根据盒子内元素高度加起来的到的，没有元素，就没有高度，所以body高度为0 */
/* box这里高度也就为0 */
height: 100%;
/* 想让盒子在没有元素的情况下有高度，需要用到视阈的高度单位vh，这就跟元素没关系了 */
/* vh，vw也是百分比的形式，相对于浏览器视阈的百分比 */
height: 100vh;
/* 10em就相当于浏览器字符宽度的10倍 */
/* 如果当前元素没有设置字符宽度，会找上级元素的字符宽度，若都没设置字符宽度，使用默认宽度，默认的字符是16像素 */
/* 这里就是160像素的宽，160像素的高 */
/* em有一个问题，就是会一直往上找上级元素，可能某个上级元素的字符大小，并不合适 */
width: 10em;
height: 10em;
/* 所以使用rem是更好的选择，rem是根据根元素(html元素)的字符大小为基准 */
/* 根元素字符大小默认是16像素 */
/* 这里宽高都是10倍的rem，就都是160像素 */
width: 10rem;
height: 10rem;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
· 定位
- 相对定位：
position: relative，让元素相对于当前位置重新定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boxes {
border: 3px solid lightgray;
}
.box {
width: 5rem;
height: 5rem;
}
.box-one {
background: gold;
}
.box-two {
background: tomato;
/* 需要对元素位置做改变，可以先设置位置对相对位置，相对于元素当前位置，重新定位 */
/* 位置有left，right，top，bottom */
/* 左右上下4个方位，注意，这里可以理解成元素距离每个方向的位置*/
/* 相对定位只对当前元素有效，不影响其他元素位置 */
position: relative;
/* left 元素距离左边的位置，加3rem */
/* 实际是元素向右移动了3rem */
left: 3rem;
/* 或者距离左边负3rem，等同于元素向左移动3rem */
/* left: -3rem; */
/* 设置bottom为4rem后，红色和黄色的div会有重合部分，通过调整z-index，可以调整显示的层级 */
bottom: 4rem;
/* 默认情况下，元素的z-index为0 */
/* 想象从屏幕到眼睛有一条线 */
/* z-index为正数，则距离眼睛越近 */
/* z-index为负数，则距离眼睛越远 */
/* 这里z-index为-1，则红色的这个div会被黄色div覆盖一部分 */
/* 因为黄色的div默认的z-index为0 */
z-index: -1;
}
.box-three {
background: lightskyblue;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
</div>
</body>
</html>
- 绝对定位：绝对定位是元素相对于容器的位置来定位，此时容器的定位必须是相对定位，绝对定位的元素，不会影响容器内其他元素的排版，就跟它不存在一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boxes {
border: 3px solid lightgray;
/* 绝对定位是元素相对于容器元素的定位 */
/* 使用绝对定位时，容器元素必须是相对定位 */
/* 此处为容器元素 */
position: relative;
}
.box {
width: 5rem;
height: 5rem;
}
.box-one {
background: gold;
}
.box-two {
background: tomato;
/* 绝对定位是元素相对于容器元素的定位 */
/* 使用绝对定位时，容器元素必须是相对定位 */
/* 绝对定位的元素，将不在容器内其他元素常规排列规则内 */
/* 当前元素的位置，不会影响其他元素在容器内的排版 */
position: absolute;
/* left right, top, bottom就时相对于容器元素的左右上下边距*/
/* right 0, bottom 0就是元素距容器元素右边距离时0，底部距离时0，也就是右下角的位置 */
/* 当值为0时，不需要提供单位 */
right: 0;
bottom: 0;
/* 默认情况下，元素的z-index为0 */
/* 想象从屏幕到眼睛有一条线 */
/* z-index为正数，则距离眼睛越近 */
/* z-index为负数，则距离眼睛越远 */
/* 这里z-index为-1，则红色的这个div会被黄色div覆盖一部分 */
/* 因为黄色的div默认的z-index为0 */
z-index: -1;
}
.box-three {
background: lightskyblue;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
</div>
</body>
</html>
- 固定定位，固定定位是元素相对于整个浏览器视域的定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boxes {
border: 3px solid lightgray;
/* 为了让页面可以滚动，增加页面高度 */
height: 200vh;
}
.box {
width: 5rem;
height: 5rem;
}
.box-one {
background: gold;
}
.box-two {
background: tomato;
/* 固定定位是元素相对于浏览器视域的定位 */
position: fixed;
/* left right, top, bottom就时相对于浏览器视域的左右上下边距*/
/* left 0, top 0就是元素距容器元素左边距离时0，顶部距离时0，也就是左上角的位置 */
/* 并固定在那里，无论页面有多长，或者滚动页面，固定定位的元素位置都不会变 */
/* 当值为0时，不需要提供单位 */
left: 0;
top: 0;
/* 默认情况下，元素的z-index为0 */
/* 想象从屏幕到眼睛有一条线 */
/* z-index为正数，则距离眼睛越近 */
/* z-index为负数，则距离眼睛越远 */
/* 这里z-index为1，则红色的这个div会覆盖黄色div一部分 */
/* 因为黄色的div默认的z-index为0 */
z-index: 1;
/* 固定定位元素的宽高，除了使用width和height外 */
/* 还可以根据固定定位元素距离浏览器视域的边距来确定宽高 */
/* 这里用宽度举个例子 */
/* 当前元素距离浏览器视域左右各2rem的宽度，视域中间部分，就是元素的宽度了 */
left: 2rem;
right: 2rem;
/* 设置好边距后，宽度为auto，浏览器会根据边距自动计算元素宽度 */
width: auto;
}
.box-three {
background: lightskyblue;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
</div>
</body>
</html>
· 元素的浮动(尽量少用，会对其他元素布局有影响，需要单独处理)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.avatar {
width: 5rem;
height: 5rem;
background-color: gold;
/* 使用浮动位置时，原本是块级元素，会独占一行 */
/* 但此时avatar元素附近的元素会自动环绕着avatar */
float: left;
margin-right: 0.5rem;
}
.tweet {
border: 5px solid gainsboro;
}
.clear{
/* 清除浮动效果 */
/* 有时浮动效果会影响到你不想被影响的元素，这个时候需要清除不想被影响的元素的浮动效果 */
/* clear可以清除左，右的浮动效果，或者同时清除左右两边的浮动效果*/
clear: both;
}
/* 清除多余的浮动效果，使avatar能被父元素识别(tweet) */
.clearfloat::after {
content: '';
display: block;
/* 清除浮动效果 */
/* 有时浮动效果会影响到你不想被影响的元素，这个时候需要清除不想被影响的元素的浮动效果 */
/* clear可以清除左，右的浮动效果，或者同时清除左右两边的浮动效果*/
clear: both;
}
</style>
</head>
<body>
<!-- 应用clearfloat这个class，你会看到tweet边框就会框住avatar -->
<!-- 取消clearfloat这个class，你会看到tweet边框没有框住avatar -->
<article class="tweet">
<div class="avatar"></div>
<p>Lorem ipsum dolor sit amet.</p>
<!-- 如果注释掉这个段落，你会发现article的边框变矮了 -->
<!-- 并没有受avatar的高度影响，这就是浮动元素的父元素塌缩问题 -->
<!-- 父元素是看不见浮动元素的，所以当p标签被注释后，article并不知道有avatar这个元素 -->
<!-- 直接变矮，只包括了第一个p标签 -->
<!-- 另外，应用clear这个类后，这个p标签不会围绕这个avatar，因为去除了浮动效果 -->
<p class="clear">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium laboriosam voluptates repudiandae quasi voluptatibus cumque fugiat accusantium porro. Perferendis delectus earum nam iste labore quod nulla voluptatem ut ipsam itaque, obcaecati est fugit inventore, illum distinctio minus natus culpa optio praesentium blanditiis eveniet quos ex! Id voluptate perferendis consectetur sint.</p>
</article>
</body>
</html>
· 弹性盒子
弹性盒子是一种单向排列元素的排版方式，也是很常用的排版方式
-
弹性盒子坐标系
image.png
在row排列方式下，横轴(x轴)为主轴，纵轴(Y轴)为正交轴
在column排列方式下，纵轴(Y轴)为主轴，横轴(X轴)为正交轴 -
弹性盒子对齐
image.png
justify-content是设置元素在主轴上的对齐方式
align-items是设置元素在正交轴上的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 3px solid lightgray;
/* 开启flex */
display: flex;
/* 设置元素排列方向，默认是row */
flex-direction: row;
/* 设置元素沿主轴的对齐方式 */
/* 此时为row排列方式，所以主轴是横轴 */
/* 沿主轴等距分散排列 */
justify-content: space-evenly;
/* 第一个和最后一个元素在主轴两端，中间元素等距分散排列 */
justify-content: space-between;
/* 两端的元素距离容器边缘有间距，间距为容器中元素之间间距的一半 */
justify-content: space-around;
/* 按主轴起始点开始排列，左对齐 */
justify-content: flex-start;
/* 按主轴起始点开始排列，右对齐 */
justify-content: flex-end;
/* 按主轴中心排列，居中排列 */
justify-content: center;
/* 为了展示正交轴排列效果，需要增加容器高度 */
/* 容器虽然是弹性盒子布局，但也是一个块级元素 */
/* 高度是根据容纳的元素决定的，这个高度无法展示垂直排列效果 */
height: 90vh;
/* 正交轴底部对齐，可以想象成把正交轴横过来，就是类似主轴的右对齐 */
align-items: flex-end;
/* 正交轴剧中对齐 */
align-items: center;
/* 正交轴顶部对齐，可以想象成把正交轴横过来，就是类似主轴的左对齐*/
align-items: flex-start;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</body>
</html>
align-content多行对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 3px solid lightgray;
/* 开启flex */
display: flex;
/* 设置元素排列方向，默认是row */
flex-direction: row;
/* 按主轴中心排列，居中排列 */
justify-content: center;
/* 为了展示正交轴排列效果，需要增加容器高度 */
/* 容器虽然是弹性盒子布局，但也是一个块级元素 */
/* 高度是根据容纳的元素决定的，这个高度无法展示垂直排列效果 */
height: 90vh;
/* 正交轴剧中对齐 */
align-items: center;
/* 默认flex是不会换行的，元素越多，会缩小元素大小，以便在一行内显示，这里设置成可以换行 */
flex-wrap: wrap;
/* 将多行作为一个整体，沿正交轴排列 */
align-content: flex-end;
align-content: flex-start;
align-content: center;
align-content: space-around;
align-content: space-between;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
<div class="box">O</div>
<div class="box">P</div>
</div>
</body>
</html>
align-self自对齐
自对齐会覆盖当前元素在正交轴上的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 3px solid lightgray;
/* 开启flex */
display: flex;
/* 设置元素排列方向，默认是row */
flex-direction: row;
/* 按主轴中心排列，居中排列 */
justify-content: center;
/* 为了展示正交轴排列效果，需要增加容器高度 */
/* 容器虽然是弹性盒子布局，但也是一个块级元素 */
/* 高度是根据容纳的元素决定的，这个高度无法展示垂直排列效果 */
height: 90vh;
/* 正交轴剧中对齐 */
align-items: center;
/* 默认flex是不会换行的，元素越多，会缩小元素大小，以便在一行内显示，这里设置成可以换行 */
flex-wrap: wrap;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
.box-one {
/* 设置元素自己的对齐方式，不影响其他元素及盒子的对齐方式 */
/* 该属性会覆盖作用于该元素的正交轴的对齐 */
align-self: flex-start;
align-self: flex-end;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</body>
</html>
· 元素大小
flex-grow放大比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 3px solid lightgray;
/* 开启flex */
display: flex;
/* 设置元素排列方向，默认是row */
flex-direction: row;
/* 按主轴中心排列，居中排列 */
justify-content: center;
/* 为了展示正交轴排列效果，需要增加容器高度 */
/* 容器虽然是弹性盒子布局，但也是一个块级元素 */
/* 高度是根据容纳的元素决定的，这个高度无法展示垂直排列效果 */
height: 90vh;
/* 正交轴剧中对齐 */
align-items: center;
}
.box {
/* 设置flexible box里元素的宽度，会覆盖width的值 */
/* 如果主轴是纵轴，则会覆盖height的值 */
flex-basis: 5rem;
/* 增长属性，0是不增长 */
/* 设置增长属性后，元素会占满可以使用的空间*/
/* 或者使用auto，让浏览器自己计算 */
flex-grow: 1;
/* 设置了flex-grow后，浏览器会统计所有设置过的增长比例的总和 */
/* 然后将剩余空间除以增长比例总和，再按各自增长比例计算出宽度 */
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
.box-one {
/* 缩放这，也可以单独给某个元素设置宽度 */
/* 设置弹性放大系数为0，即为保持原大小，剩余空间就留给另外的元素 */
flex-grow: 0;
}
.box-two {
flex-grow: 1;
}
.box-three{
flex-grow: 1;
}
</style>
</head>
<body>
<!-- flex-basis 用于设置每个元素的初始大小-->
<!-- flex-grow 用于弹性增长系数-->
<!-- flex-shrink 用于弹性收缩系数 -->
<!-- flex 上述3个弹性属性的简写 -->
<!-- 这些设置仅针对于盒子内的元素，而不是盒子本身 -->
<div class="container">
<div class="box box-one">A</div>
<div class="box box-two">B</div>
<div class="box box-three">C</div>
</div>
</body>
</html>
flex-shrink缩小比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 3px solid lightgray;
/* 开启flex */
display: flex;
/* 设置元素排列方向，默认是row */
flex-direction: row;
/* 按主轴中心排列，居中排列 */
justify-content: center;
/* 为了展示正交轴排列效果，需要增加容器高度 */
/* 容器虽然是弹性盒子布局，但也是一个块级元素 */
/* 高度是根据容纳的元素决定的，这个高度无法展示垂直排列效果 */
height: 90vh;
/* 正交轴剧中对齐 */
align-items: center;
}
.box {
/* 设置flexible box里元素的宽度，会覆盖width的值 */
flex-basis: 15rem;
/* 缩减属性，告诉浏览器在空间不足时如何压缩元素 */
flex-shrink: 1;
/* 使用flex时，第一个参数表示flex-grown，第二个参数表示flex-shrink，第三个参数表示flex-basis */
flex: 1 1 15rem;
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
.box-one {
/* 缩小比例设置，*/
/* 设置弹性缩小系数为1，即为保持原大小 */
/* 在空间不足时，将不会缩小这个元素 */
flex-shrink: 0;
}
.box-two {
/* flex-grow: 1; */
}
.box-three{
/* flex-grow: 1; */
}
</style>
</head>
<body>
<!-- flex-basis 用于设置每个元素的初始大小-->
<!-- flex-grow 用于弹性增长系数-->
<!-- flex-shrink 用于弹性收缩系数 -->
<!-- flex 上述3个弹性属性的简写 -->
<!-- 这些设置仅针对于盒子内的元素，而不是盒子本身 -->
<div class="container">
<div class="box box-one">A</div>
<div class="box box-two">B</div>
<div class="box box-three">C</div>
</div>
</body>
</html>
· Grid布局
开启Grid布局display: grid
设置行数grid-template-rows
设置列数grid-template-columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
/* 设置行列的大小和数量 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(2, 100px);
/* 也可以使用简单语法来实现3行2列的Grid */
/* grid-template: repeat(3, 100px) / repeat(2, 100px); */
border: 3px solid lightgray;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
· Grid元素对齐
Grid中的元素都在各自的小方格里
image.png
Grid对齐方式有
横轴对齐justify-items
纵轴对齐align-items
网格容器横轴对齐justify-content
网格容器纵轴对齐align-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
/* 设置行列的大小和数量 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(2, 100px);
/* 也可以使用简单语法来实现3行2列的Grid */
/* grid-template: repeat(3, 100px) / repeat(2, 100px); */
border: 3px solid lightgray;
/* 横轴居中对齐，另外还有start，end两个选项和stretch拉伸选项*/
justify-items: center;
/* 纵轴居中对齐，另外还有start，end两个选项和stretch拉伸选项 */
/* 拉伸选项在元素固定宽高时没有效果，去掉固定宽高 */
/* 则元素会横向纵向拉伸，填满整个格子 */
/* 拉伸选项是默认生效的选项 */
align-items: center;
/* 网格容器横轴居中对齐，另外还有start，end两个选项 */
justify-content: center;
/* 网格容器纵轴居中对齐，另外还有start，end两个选项 */
align-content: center;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
· Grid格子大小，间隔设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
/* 设置行列的大小和数量 */
/* 设置第一行高度100px，第二行高度根据内部元素自动计算，第三行高度100px */
/* 设置第一列宽度是可用空间的30%，第二列宽度是可用空间的70%，这里用fr表示可用空间，不是容器空间 */
grid-template: 100px auto 100px / 30fr 70fr;
border: 3px solid lightgray;
/* 行间隙 */
row-gap: 10px;
/* 列间隙 */
column-gap: 10px;
/* 行 列间隔，如果行列间隔相同，写一个值就可以了 */
/* gap: 10px 20px; */
height: 100vh;
}
.box {
background: gold;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
· Grid中合并单元格
移动行grid-row
移动列grid-column
移动行列grid-area，放弃食用，难读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
/* 设置行列的大小和数量 */
/* 设置第一行高度100px，第二行高度根据内部元素自动计算，第三行高度100px */
/* 设置第一列宽度是可用空间的30%，第二列宽度是可用空间的70%，这里用fr表示可用空间，不是容器空间 */
grid-template: 100px auto 100px / 30fr 70fr;
border: 3px solid lightgray;
/* 行间隙 */
row-gap: 10px;
/* 列间隙 */
column-gap: 10px;
/* 行 列间隔，如果行列间隔相同，写一个值就可以了 */
/* gap: 10px 20px; */
height: 100vh;
}
.box {
background: gold;
}
.box-one {
/* 元素移动到第二列，第一行，其余元素会跟着移动，填充到box-one的位置*/
grid-column: 2;
/* 移动行 */
grid-row: 1;
/* 元素保持在第一行第一列，但合并了第一行第二列和第二行的单元格 */
/* span表示要合并几个单元格 */
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
· 指定区域后合并
可以使用grid-template-area给单元格起名字，然后合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
/* 设置行列的大小和数量 */
/* 设置第一行高度100px，第二行高度根据内部元素自动计算，第三行高度100px */
/* 设置第一列宽度是可用空间的30%，第二列宽度是可用空间的70%，这里用fr表示可用空间，不是容器空间 */
grid-template: 100px auto 100px / 30fr 70fr;
border: 3px solid lightgray;
/* 一对双引号就代表一行，在每行里给单元格取名字，有几个就取几个 */
/* 如果单元格之间有空的单元格，用 . 表示 */
/* 比如 ". footer" */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
/* 行间隙 */
row-gap: 10px;
/* 列间隙 */
column-gap: 10px;
/* 行 列间隔，如果行列间隔相同，写一个值就可以了 */
/* gap: 10px 20px; */
height: 100vh;
}
.box {
background: gold;
}
.box-one {
/* 合并名字为header的单元格 */
grid-area: header;
}
.box-four {
/* 合并名字为footer的单元格 */
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box box-four">D</div>
</div>
</body>
</html>
· 隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.first {
/* 直接隐藏元素，后续元素会占据该元素的位置 */
display: none;
/* 只在显示的层面隐藏元素，但元素还在它之前的位置，只是不显示内容 */
visibility: hidden;
}
</style>
</head>
<body>
<p class="first">First</p>
<p>Second</p>
</body>
</html>
· 媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: column;
}
.box {
background: gold;
padding: 1rem;
}
.box:nth-of-type(2) {
background: dodgerblue;
padding: 1rem;
}
/* 在屏幕宽度到600或以下的时候，使用row排列方式 */
@media screen and (min-width: 600px) {
.container {
flex-direction: row;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam consequatur magnam ad blanditiis, tempore non quibusdam, eius quos porro perferendis similique laborum tempora sequi dignissimos voluptas tenetur qui nisi molestiae aliquid! Sint consequatur, temporibus error quisquam dolor sequi, rem vitae reiciendis accusamus beatae id. Sunt laborum provident unde corporis inventore.</p>
</div>
<div class="box">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur veniam possimus, quasi enim neque impedit veritatis architecto voluptatibus corporis assumenda eius illum nulla molestiae autem vitae, repellat nam soluta exercitationem fugiat error ullam qui. Vero reiciendis illum earum hic fugit iusto illo quaerat dolores recusandae quidem. Consequuntur rerum culpa velit!</p>
</div>
</div>
</body>
</html>
