css样式布局

css参考手册（菜鸟教程地址）：https://www.runoob.com/cssref/css-reference.html
sass变量（菜鸟教程地址）：https://www.runoob.com/sass/sass-variables.html
响应式布局（菜鸟教程地址）：https://www.runoob.com/cssref/css3-pr-mediaquery.html
响应式布局（菜鸟教程地址）： 移动端适配

防御试CSS：防御试css地址

CSS单位：CSS单位详解地址1

Flex布局教程地址1(语法篇)：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex布局教程地址2(实例篇)：https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解：https://blog.csdn.net/m0_37058714/article/details/80765562
css解决高度自适应问题（使用flex）：https://blog.csdn.net/wenxiukeke/article/details/87165182

CSS Grid网格布局教程地址：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

1、弹性盒子

代码css： display: flex;
说明：父级div开启弹性盒子，子div会排成一行；

<div style="display: flex;">
  <div style="background-color: red;">123</div>
  <div style="background-color: blue;">456</div>
  <div style="background-color: red;">789</div>  
</div>

显示结果:

1.1、开启弹性盒子，使弹性盒子中的div在一行平均分配

css代码:
	display: flex;
	justify-content: space-between;

显示结果:

2、div中文本居中

div中文本水平居中： text-align: center;
div中文本垂直居中： line-height: div的高度值;

文本超出div，设置滚动条：

当内容超出div时,自动出现滚动条的条件:
	1、内容必须在div中；
	2、div要设置宽高；
	3、overflow 设置 auto；

设置：
	1、overflow:auto;
		当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条；
	2、overflow-x:auto;
		当内容宽度超出div宽度，自动出现水平滚动条；
	3、overflow-y:auto;
		当内容宽度超出div高度，自动出现垂直滚动条；
	注意：
		设置好后会自动换行；
		white-space:nowrap;	这个会强制文字在同一行显示

3、div的设置边框

css代码：
	border: 1px #000000 solid;

<div style="border: 1px #000000 solid;width: 100px;height: 100px;"></div>

4、div定位

css代码：
	父级容器(开启绝对定位)：position: relative;
	子容器(设置相对定位)：position: absolute;

<!-- 这里在父容器中随意设置子容器的位置 -->
<div style="position: relative;">
	<div style="position: absolute;">
	</div>
</div>

5、页面布局自适应（响应式布局）

1、首先正常写样式布局
2、使用 “@media”
具体请查看菜鸟教程: https://www.runoob.com/cssref/css3-pr-mediaquery.html

// 正常样式
.biz-box-left {
  width: 50%;
  height: 400px;
  margin-top: 10px;
}

// 当最大宽度1500px时,改变指定样式
@media only screen and (max-width: 1500px) {
  // 将biz-box-left样式的宽度变为100%
  .biz-box-left {
    width: 100%;
  }
}