1.基于rem单位的屏幕等比例缩放
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>Document</title>
<style>
/* 知识点 */
/* 浏览器通常来说，最小的字体大小是 12px */
/* 浏览器通常来说，默认的字体大小是 16px */
.box {
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">你好 世界</div>
</body>
</html>2---自适应屏幕分辨率demo
<!DOCTYPE html>
<!-- 设置默认字体大小为我们所定义的标准字体大小 -->
<html lang="en" style="font-size: 20px;">
<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>
body {
margin: 0;
}
.box {
background-color: #f00;
/* width: 300px;
height: 300px; */
/* 3. 根据标准字体大小计算rem值 */
width: 15rem;
height: 15rem;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
// 1. 确立参考系，定义标准设备的屏幕宽度和字体大小
// 2. 比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小
// 3. 将页面样式中的 `px` 单位换算并替换为 `rem`，方法是`?rem = 元素的尺寸 / 标准字体大小`
// 4. 绑定窗口的 `resize` 和 `load` 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 `html` 的字体大小
const html = document.querySelector('html')
// 1. 我们定义 标准屏幕宽为 600px 标准字体大小为 20px;
// 2. 计算新的屏幕尺寸下的新的字体大小
let newFontSize = window.innerWidth / (600 / 20)
// 重新计算字体大小
function resize() {
let newFontSize = window.innerWidth / (600 / 20)
console.log(newFontSize);
// 设置html根节点的字体大小
html.style.fontSize = `${newFontSize}px`;
}
// 3. 绑定窗口尺寸变化事件和页面加载事件
window.addEventListener('resize', resize)
window.addEventListener('load', resize)
</script>
</html>3--- css预编译工具
<!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>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="box"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>hello world</h1>
<div class="box2"></div>
<h2>hello world</h2>
<div class="box3">
hello world
</div>
<div class="box4">
hello world
</div>
</body>
</html>2 --- bootstrap
4.1---第一个bootstrap程序
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
<script src="./js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button class="btn btn-primary">按钮</button>
</body>
</html>4.2--- container布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 使用bootstrap的容器进行响应式布局的话，需要在head标签中加入此meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<style>
.content {
width: 100%;
height: 100px;
background-color: violet;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">container</div>
</div>
<div class="container-sm">
<div class="content">container-sm</div>
</div>
<div class="container-md">
<div class="content">container-md</div>
</div>
<div class="container-lg">
<div class="content">container-lg</div>
</div>
<div class="container-xl">
<div class="content">container-xl</div>
</div>
<div class="container-xxl">
<div class="content">container-xxl</div>
</div>
<div class="container-fluid">
<div class="content">container-fluid</div>
</div>
</body>
</html>4.3--display显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 使用bootstrap的容器进行响应式布局的话，需要在head标签中加入此meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<style>
.box {
display: flex;
}
</style>
</head>
<body>
<!-- 语法:
在 xs 断点下: d-{value}
xs 以上: d-{breakpoints}-{value}
-->
<!-- 当屏幕宽度小于 sm 时显示 -->
<div class="container d-block d-sm-none">小于 sm</div>
<!-- 当屏幕宽度为 md 时 显示 -->
<div class="container d-none d-sm-block d-md-none">md</div>
<!-- 当屏幕宽度大于 lg 时 显示 -->
<div class="container d-none d-md-block">大于 lg</div>
</body>
</html>4.4--- float_position_flex
<!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>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<style>
.box {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- float-start 左浮 -->
<!-- float-end 右浮 -->
<!-- clearfix 清除浮动 -->
<div class="clearfix">
<div class="box bg-warning float-start"></div>
<div class="box bg-success float-start"></div>
<div class="box bg-danger float-end"></div>
</div>
<div class="box bg-primary"></div>
<!-- position https://getbootstrap.com/docs/5.2/utilities/position/
position-{value}
value: absolute relative fixed sticky
-->
<div style="height: 600px" class="d-flex justify-content-center">
<div style="width: 600px; height: 500px" class="border position-relative">
<div class="box bg-danger position-absolute top-50 translate-middle-y"></div>
<div class="box bg-danger position-absolute start-50 translate-middle-x"></div>
<div class="box bg-danger position-absolute end-0 top-50 translate-middle-y"></div>
<div class="box bg-danger position-absolute start-50 bottom-0 translate-middle-x"></div>
<div class="box bg-danger position-absolute start-0 top-0"></div>
<div class="box bg-danger position-absolute end-0 top-0"></div>
<div class="box bg-danger position-absolute start-0 bottom-0"></div>
<div class="box bg-danger position-absolute end-0 bottom-0"></div>
<div class="box bg-danger position-absolute start-50 top-50 translate-middle"></div>
</div>
</div>
<!-- flex https://getbootstrap.com/docs/5.2/utilities/flex/ -->
<!-- flex 的使用基本上就是把所有flex的属性变成了class类 -->
<div style="height: 400px;" class="bg-success d-flex justify-content-end align-items-center align-content-center">
<div class="box bg-warning flex-grow-1"></div>
<div class="box bg-primary"></div>
<div class="box bg-primary align-self-end flex-shrink-0"></div>
<div class="box bg-primary"></div>
<div class="box bg-primary"></div>
<div class="box bg-primary"></div>
</div>
</body>
</html>4.5-- gird网格
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<h1>网格布局基本用法</h1>
<div class="container">
<!-- 行 -->
<div class="row">
<!-- 列
col 语法: col-{breakpoints}-{value}
例如: col-sm-3 col-lg-12
value: 范围在 1~12
bootstrap 中 一行 row 被等分为 12 分 那么col的value值代表的是占多少份
例如: col-3 此单元格占 12分之3份
-->
<div class="col">
<div class="bg-primary">1</div>
</div>
<div class="col">
<div class="bg-primary">2</div>
</div>
<div class="col">
<div class="bg-primary">3</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="bg-primary">1</div>
</div>
<div class="col">
<div class="bg-primary">2</div>
</div>
<div class="col">
<div class="bg-primary">3</div>
</div>
</div>
</div>
<h1>纵向排列方式</h1>
<div class="container">
<!-- 在 row 上可以使用flex 的 align-items 来进行竖直方向的排列 -->
<div class="row border border-3 align-items-center" style="height: 300px;">
<div class="col">
<div class="bg-success">1</div>
</div>
<div class="col">
<div class="bg-success">2</div>
</div>
<div class="col">
<div class="bg-success">3</div>
</div>
</div>
</div>
<h1>横向排列方式</h1>
<div class="container">
<!-- 在 row 上可以使用 flex 的 justify-content 来进行水平方向的排列 -->
<div class="row border border-3 justify-content-between">
<div class="col-2">
<div class="bg-warning">1</div>
</div>
<div class="col-2">
<div class="bg-warning">2</div>
</div>
<div class="col-2">
<div class="bg-warning">3</div>
</div>
</div>
</div>
<h1>单元格偏移</h1>
<div class="container">
<div class="row border border-3">
<!-- offset 设置单元格左侧的偏移量 数字代表的含义和 col 相同 -->
<div class="col-3 offset-3">
<div class="bg-danger">1</div>
</div>
<div class="col-3 offset-3">
<div class="bg-danger">2</div>
</div>
</div>
</div>
<h1>单元格间距</h1>
<div class="container">
<!-- 添加单元格间距使用 gutter 首字母为 g
可以使用 g-{value} 或 gx-{value} gy-{value}
g-{value} 水平和竖直间距
gx-{value} 水平间距
gy-{value} 竖直间距
-->
<div class="row text-light g-5 border border-3">
<div class="col-4">
<div class="bg-info">1-1</div>
</div>
<div class="col-4">
<div class="bg-info">1-2</div>
</div>
<div class="col-4">
<div class="bg-info">1-3</div>
</div>
<div class="col-4">
<div class="bg-info">2-1</div>
</div>
<div class="col-4">
<div class="bg-info">2-2</div>
</div>
<div class="col-4">
<div class="bg-info">2-3</div>
</div>
</div>
</div>
<h1>可以指定每一行显示多少列</h1>
<div class="container">
<!-- row-cols-{breakpoints}-{value} 让一行显示多少列 -->
<div class="text-light row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="bg-dark">1</div>
</div>
<div class="col">
<div class="bg-dark">2</div>
</div>
<div class="col">
<div class="bg-dark">3</div>
</div>
<div class="col">
<div class="bg-dark">4</div>
</div>
<div class="col">
<div class="bg-dark">5</div>
</div>
<div class="col">
<div class="bg-dark">6</div>
</div>
<div class="col">
<div class="bg-dark">7</div>
</div>
<div class="col">
<div class="bg-dark">8</div>
</div>
<div class="col">
<div class="bg-dark">9</div>
</div>
<div class="col">
<div class="bg-dark">10</div>
</div>
<div class="col">
<div class="bg-dark">11</div>
</div>
<div class="col">
<div class="bg-dark">12</div>
</div>
</div>
</div>
</body>
</html>4.6 color
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<!-- 背景色 https://getbootstrap.com/docs/5.2/utilities/background/ -->
<!-- 文本色 https://getbootstrap.com/docs/5.2/utilities/colors/ -->
<!-- 文本+背景色 https://getbootstrap.com/docs/5.2/helpers/color-background/ -->
<h1>背景色</h1>
<!-- bg-{value} -->
<div class="bg-primary">1</div>
<div class="bg-secondary">1</div>
<div class="bg-success">1</div>
<div class="bg-danger">1</div>
<div class="bg-warning">1</div>
<div class="bg-info">1</div>
<div class="bg-light">1</div>
<div class="bg-dark">1</div>
<h1>文本色</h1>
<!-- text-{value} -->
<div class="text-primary">hello world</div>
<div class="text-secondary">hello world</div>
<div class="text-success">hello world</div>
<div class="text-danger">hello world</div>
<div class="text-warning">hello world</div>
<div class="text-info">hello world</div>
<div class="text-light">hello world</div>
<div class="text-dark">hello world</div>
<h1>文本+背景色</h1>
<!-- text-bg-{value} -->
<div class="text-bg-primary">hello world</div>
<div class="text-bg-secondary">hello world</div>
<div class="text-bg-success">hello world</div>
<div class="text-bg-danger">hello world</div>
<div class="text-bg-warning">hello world</div>
<div class="text-bg-info">hello world</div>
<div class="text-bg-light">hello world</div>
<div class="text-bg-dark">hello world</div>
</body>
</html>4.7--.size_space_stack
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.box {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- size: https://getbootstrap.com/docs/5.2/utilities/sizing/ -->
<h1>元素大小</h1>
<div class="text-bg-primary w-25">25%</div>
<div class="text-bg-secondary w-50">50%</div>
<div class="text-bg-success w-75">75%</div>
<div class="text-bg-warning w-100">100%</div>
<div class="text-bg-danger w-auto">auto</div>
<div class="container d-flex" style="height:400px;">
<div class="text-bg-primary h-25">25%</div>
<div class="text-bg-secondary h-50">50%</div>
<div class="text-bg-success h-75">75%</div>
<div class="text-bg-warning h-100">100%</div>
<div class="text-bg-danger h-auto">auto</div>
</div>
<!-- vh vw 是相对于视口的宽高 -->
<!-- <div class="vh-100 vw-100 bg-danger"></div> -->
<!-- space: https://getbootstrap.com/docs/5.2/utilities/spacing/ -->
<h1>内边距外边距</h1>
<!-- 内边距 使用 p- 开头 -->
<!-- p-{value}: 设置四周的内边距 -->
<div class="box bg-warning p-1"></div>
<!-- p{dir}-{value}: 设置指定的一边的方向
dir 取值为 t b s e 分别代表 上下左右
-->
<div class="box bg-warning pt-3"></div>
<div class="box bg-warning pb-3"></div>
<div class="box bg-warning ps-3"></div>
<div class="box bg-warning pe-3"></div>
<!-- p{axis}-{value}: 设置水平或竖直轴上的内边距
axis: 取值为 x y 分别代表 水平和竖直
-->
<div class="box bg-warning px-3"></div>
<div class="box bg-warning py-3"></div>
<!-- 外边距的写法和内边距一摸一样 -->
<div class="box bg-warning m-2"></div>
<div class="box bg-warning mt-2"></div>
<div class="box bg-warning mb-2"></div>
<div class="box bg-warning ms-2"></div>
<div class="box bg-warning me-2"></div>
<div class="box bg-warning mx-2"></div>
<div class="box bg-warning my-2"></div>
<!-- stacks: https://getbootstrap.com/docs/5.2/helpers/stacks/ -->
<h1>元素间的间距</h1>
<!-- vstack 竖直方向产生间距
gap 间距的大小
-->
<div class="vstack gap-1">
<div class="box bg-success"></div>
<div class="box bg-success"></div>
<div class="box bg-success"></div>
</div>
<!-- hstack 水平方向产生间距 -->
<div class="hstack gap-2">
<div class="box bg-success"></div>
<div class="box bg-success"></div>
<div class="box bg-success"></div>
</div>
</body>
</html>4.8--size_space_stack
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.box {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- size: https://getbootstrap.com/docs/5.2/utilities/sizing/ -->
<h1>元素大小</h1>
<div class="text-bg-primary w-25">25%</div>
<div class="text-bg-secondary w-50">50%</div>
<div class="text-bg-success w-75">75%</div>
<div class="text-bg-warning w-100">100%</div>
<div class="text-bg-danger w-auto">auto</div>
<div class="container d-flex" style="height:400px;">
<div class="text-bg-primary h-25">25%</div>
<div class="text-bg-secondary h-50">50%</div>
<div class="text-bg-success h-75">75%</div>
<div class="text-bg-warning h-100">100%</div>
<div class="text-bg-danger h-auto">auto</div>
</div>
<!-- vh vw 是相对于视口的宽高 -->
<!-- <div class="vh-100 vw-100 bg-danger"></div> -->
<!-- space: https://getbootstrap.com/docs/5.2/utilities/spacing/ -->
<h1>内边距外边距</h1>
<!-- 内边距 使用 p- 开头 -->
<!-- p-{value}: 设置四周的内边距 -->
<div class="box bg-warning p-1"></div>
<!-- p{dir}-{value}: 设置指定的一边的方向
dir 取值为 t b s e 分别代表 上下左右
-->
<div class="box bg-warning pt-3"></div>
<div class="box bg-warning pb-3"></div>
<div class="box bg-warning ps-3"></div>
<div class="box bg-warning pe-3"></div>
<!-- p{axis}-{value}: 设置水平或竖直轴上的内边距
axis: 取值为 x y 分别代表 水平和竖直
-->
<div class="box bg-warning px-3"></div>
<div class="box bg-warning py-3"></div>
<!-- 外边距的写法和内边距一摸一样 -->
<div class="box bg-warning m-2"></div>
<div class="box bg-warning mt-2"></div>
<div class="box bg-warning mb-2"></div>
<div class="box bg-warning ms-2"></div>
<div class="box bg-warning me-2"></div>
<div class="box bg-warning mx-2"></div>
<div class="box bg-warning my-2"></div>
<!-- stacks: https://getbootstrap.com/docs/5.2/helpers/stacks/ -->
<h1>元素间的间距</h1>
<!-- vstack 竖直方向产生间距
gap 间距的大小
-->
<div class="vstack gap-1">
<div class="box bg-success"></div>
<div class="box bg-success"></div>
<div class="box bg-success"></div>
</div>
<!-- hstack 水平方向产生间距 -->
<div class="hstack gap-2">
<div class="box bg-success"></div>
<div class="box bg-success"></div>
<div class="box bg-success"></div>
</div>
</body>
</html>4.9---text
<!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>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<!-- https://getbootstrap.com/docs/5.2/utilities/text/ -->
<!-- 对齐方式 -->
<div class="border border-5 text-end">hello world</div>
<!-- 换行和溢出 -->
<div style="width: 300px" class="border border-5 text-nowrap overflow-scroll">
hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello
worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world
</div>
<!-- 字体大小 -->
<div class="fs-1">hello world</div>
<!-- 粗细和加斜 fst-italic fst-normal -->
<div class="fw-bolder">hello world</div>
<div class="fst-italic">hello world</div>
<!-- 行高
lh-{value}
value: 取值范围 1 sm base lg
-->
<div style="width: 300px" class="border border-5 lh-1">
hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello
world
</div>
<!-- 文本装饰线 -->
<div class="d-inline text-decoration-underline">
hello world
</div>
<div class="d-inline text-decoration-line-through">
hello world
</div>
<a class="text-decoration-none" href="#">hello world</a>
</body>
</html>
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
