...
1、媒体查询(实列演示)
- 媒体:屏幕、打印机等
- 查询:查询当前屏幕的宽度变化
- 布局前提:在宽度受限,高度不受限的空间内完成
- 根据页面宽度显示不同样式
<!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>媒体查询</title>
<style>
.html {
font-size: 10px;
}
/* 按钮基本样式 */
.btn {
background-color: #46c1fa;
color: #faf6f6;
border: none;
outline: none;
}
.btn:hover {
/* 鼠标移入样式 */
cursor: pointer;
opacity: 0.8;
transition: 0.3s; /* 延时 */
}
.btn.s {
/* 1.2rem = 12px */
font-size: 1.2rem;
}
.btn.m {
font-size: 1.6rem;
}
.btn.l {
font-size: 1.8rem;
}
/* PC优先,从最大的屏幕开始匹配
> 414px
/* only screen 仅支持屏幕,默认值可以省略
@media only screen
@media
*/
@media (min-width: 414px) {
html {
font-size: 12px;
}
.btn {
background-color: #c01ef1;
}
}
@media (min-width: 375px) and (max-width: 413px) {
html {
font-size: 14px;
}
.btn {
background-color: #e089fa;
}
}
@media (max-width: 374px) {
html {
font-size: 16px;
}
.btn {
background-color: #e2b9ee;
}
}
</style>
</head>
<body>
<!-- 媒体:屏幕、打印机等 -->
<!-- 查询:查询当前屏幕的宽度变化,
布局前提:在宽度受限,高度不受限的空间内完成
根据页面宽度现实不同样式
-->
<button class="btn s">按钮一</button>
<button class="btn m">按钮二</button>
<button class="btn l">按钮三</button>
</body>
</html>
width >= 414px效果展示:
375px <= width <= 414px效果展示:
width < 375px效果展示:
2、定位与固定定位实列
STT |
定位 |
说明 |
1 |
position: static; |
静态定位,默认文档流 |
2 |
position: relative; |
相对定位,相对自身在文档流中原来位置 |
3 |
position: absolute; |
绝对定位,相对距离自己最近的定位元素包含块
|
4 |
position: fixed; |
固定定位,相对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>固定定位</title>
<style>
*{
/* 初始化样式 */
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
margin: auto;
width: 380px;
height: 228px;
background-color: #F5DEB3;
/* 固定定位 */
position: fixed;
/* 顶部要留出头部导航的位置 */
top: 10em;
/* 左右相等,将表单挤到正中间 */
left: 20em;
right: 20em;
}
.container > h2{
margin-top: 10px;
margin-left: 10px;
}
.form-login{
display: flex;
flex-direction: column;
}
.form-login-input{
display: flex;
height: 28px;
margin-top: 10px;
margin-left: 10px;
}
.form-login > button{
background-color: #60e0f7;
margin: 18px auto;
width: 120px;
height: 38px;
}
.motal{
/* 固定布局,定位空间在整个屏幕 */
position: fixed;
/* 屏幕视口的四个顶点的坐标 */
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 背景半透明 */
background-color: #3b393980;
}
</style>
</head>
<body>
<div class="motal"></div>
<div class="container">
<h2>用户登录</h2>
<form action="" class="form-login">
<div class="form-login-input">
<label for="">用户名:</label>
<input type="text" neme="username" placeholder="example@mail.com">
</div>
<div class="form-login-input">
<label for="">密码:</label>
<input type="password" name="password" placeholder="password">
</div>
<div class="form-login-input">
<label for="">验证码:</label>
<input type="text" name="captcha">
</div>
<button>登录</button>
</form>
</div>
</body>
</html>
模态框效果展示:
3、Flex 常用属性(实列演示)
- 定义弹性容器:
display: flex;
- 创建 flex 行内容器:
display: inline-flex;
,多个才有效
3.1 flex-direction
: 设置 flex 容器主轴方向
STT |
代码 |
说明 |
1 |
flex-direction: row; |
设置主轴方向: 水平,左到右,默认 |
2 |
flex-direction: row-reverse; |
设置主轴方向: 水平,右到左 |
3 |
flex-direction: column; |
设置主轴方向: 垂直,上到下,默认 |
4 |
flex-direction: column-reverse; |
设置主轴方向: 垂直,下到上 |
3.2 flex-wrap
: 设置 flex 容器主轴方向
STT |
代码 |
说明 |
1 |
flex-wrap: nowrap; |
默认值,不换行,如果当前容器容纳不下,项目会自动收缩 |
2 |
flex-wrap: wrap; |
换行,当前容器容纳不下项目,项目会换行显示,此时创建的容器为多行容器 |
3 |
flex-wrap: wrap-reverse; |
反向换行 |
3.3 flex-flow
: 设置 flex 容器主轴方向与项目换行的简写
STT |
代码 |
说明 |
1 |
flex-flow: row nowrap; |
水平 不换行,默认值 |
2 |
flex-flow: row wrap; |
水平 换行 |
3 |
flex-flow: row wrap-reverse; |
水平 反向换行 |
4 |
flex-flow: column nowrap; |
垂直 不换行 |
5 |
flex-flow: column wrap; |
垂直 换行 |
6 |
flex-flow: column wrap-reverse; |
垂直 反向换行 |
3.4 justify-content
: 设置 flex 项目在容器主轴方向上的对齐方式
STT |
代码 |
说明 |
1 |
justify-content: flex-start; |
主轴起始线对齐,默认 |
2 |
justify-content: flex-end; |
主轴终止线对齐 |
3 |
justify-content: center; |
居中对齐 |
4 |
justify-content: space-between; |
两端对齐,剩余空间在第 1 个和最后 1 个项目之外的项目间平均分配 |
5 |
justify-content: space-around; |
分散对齐,剩余空间在每个项目两侧平均分配 |
6 |
justify-content: space-evenly; |
平均对齐,剩余空间在每个项目之间平均分配 |
3.5 align-content
: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式
STT |
代码 |
说明 |
1 |
align-content: stretch; |
项目拉伸,占据事整个交叉轴 |
2 |
align-content: flex-start; |
所有项目与交叉轴启始线(顶部)对齐 |
3 |
align-content: flex-end; |
所有项目与交叉轴终止线对齐 |
4 |
align-content: center; |
所有项目与交叉轴中间线对齐,居中对齐 |
5 |
align-content: space-between; |
两端对齐,剩余空间在头尾项目之外的项目间平均分配 |
6 |
align-content: space-around; |
分散对齐,剩余空间在每个项目两侧平均分配 |
7 |
align-content: space-evenly; |
平均对齐,剩余空间在每个项目之间平均分配 |
3.6 align-items
: 设置 flex 项目在容器交叉轴方向上的对齐方式 |
STT |
代码 |
说明 |
1 |
align-items: flex-start; |
交叉轴起始线对齐,默认 |
2 |
align-items: flex-end; |
交叉轴终止线对齐 |
3 |
align-items: center; |
居中对齐 |
3.7 align-self
: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |
STT |
代码 |
说明 |
1 |
align-self: auto; |
继承align-items 属性值 |
2 |
align-self: flex-start; |
与交叉轴启始线对齐 |
3 |
align-self: flex-end; |
交叉轴终止线对齐 |
4 |
align-self: center; |
交叉轴中间线对齐,居中对齐 |
5 |
align-self: stretch; |
在在交叉抽上拉伸 |
6 |
align-self: baseline; |
与基线对齐(与内容相关,用的很少) |
3.8 flex-grow
: 设置项目放大因子——分配主轴剩余空间
STT |
代码 |
说明 |
1 |
flex-grow: 0;/flex-grow: initial; |
项目不放大保持初始值 |
2 |
flex-grow: 1; |
项目允许放大,剩余空间平均分配给每个项目 |
3 |
flex-grow: n; |
n 为整数,创建 flex 行内容器 |
- 每个项目放大因子不同时,先求出所有因子之和,
剩余空间/因子和*因子
=对应项目的放大数
3.9 flex-shrink
: 项目收缩因子——主轴空间小于项目空间时,收缩项目空间
STT |
代码 |
说明 |
1 |
flex-shrink: 0; |
项目禁止收缩 |
2 |
flex-shrink: 1;/flex-shrink: initial;; |
项目允许收缩 |
3 |
flex-shrink: n; |
n 为整数,创建 flex 行内容器 |
3.10 flex-basis
: 项目计算尺寸——设置项目大小
- 在分配多余空间前,项目占据的主轴空间
- 浏览器根据这个属性,计算主轴是否有多余空间
- 该属性会覆盖项目原始大小(
width/height
)
- 该属性会被项目的(
min-width/min-height
)值覆盖
STT |
属性值 |
说明 |
1 |
flex-basis: auto; |
默认值,项目原来的大小 |
2 |
flex-basis: *px; |
项目像素 |
3 |
flex-basis: %; |
项目百分比 |
- 优先级:项目大小 < flex-basis < min-width/min-height
3.11 flex
: 项目放大、项目收缩、计算尺寸简写
- 三值语法:
flex: flex-grow flex-shrink flex-basis
,完整语法
STT |
属性值 |
说明 |
1 |
flex: 0 1 auto; |
默认值,不放大 可收缩 初始宽度 |
2 |
flex: 1 1 auto; |
项目自动放大或收缩适应容器 |
3 |
flex: 0 0 100px; |
项目按计算大小填充到容器 |
- 双值语法:
flex: flex-grow flex-basis
STT |
属性值 |
说明 |
1 |
flex: 0 180px; |
禁止放大,按计算大小填充到容器 |
- 单值语法:
flex: flex-grow flex-basis
STT |
属性值 |
说明 |
1 |
flex: 1; |
flex: 1 1 auto; |
2 |
flex: 180px; |
flex: 1 1 180px; |
3 |
flex: initial; |
flex: 0 1 auto; |
4 |
flex: auto; |
flex: 1 1 auto; |
5 |
flex: none; |
flex: 0 0 auto; |
3.12 order
: 设置项目顺序
-
选中项目==>order(n)
, n 是数字,支持负数;数字越小排序越靠前
实例演示查看地址
Flex 常用属性演示