CSS查缺补漏（补充上一条）
CSS查缺补漏
- 前言
- 一、熟记
- 1. flex布局中的弹性伸缩比
- 2. 项目目录的搭建
- 1. 网站根目录
- 2.首页引入CSS文件
- 3.版心居中
前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、熟记
1. flex布局中的弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：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>
<style>
.box {
display: flex;
width: 80%;
height: 200px;
border: 1px solid #000;
}
.box span {
/* 不会区分原来属于什么模式 */
/* width: 100px;
height: 100px;
background-color: pink; */
flex: 1;
background-color: pink;
}
/* 圣杯布局两侧固定，中间自适应 */
.left,
.right {
width: 100px;
background-color: skyblue;
}
.center {
flex: 1;
background-color: purple;
}
.center1 {
flex: 2;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box">
<div class="left">左</div>
<div class="center">中</div>
<div class="center1">中</div>
<div class="right">右</div>
</div>
</body>
</html>
效果图：
2. 项目目录的搭建
1. 网站根目录
网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。
2.首页引入CSS文件
<!-- 顺序要求：先清除再设置 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
3.版心居中
.wrapper {
margin: 0 auto;
width: 1200px;
}