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;
}
