这是我参与「第四届青训营」笔记创作活动的第2天

1、使用css的方法

有三种方式。

第一种是内联，直接在标签内添加style属性来控制该标签内容，不建议使用

<p style="font-size:26px;color: pink;"> 字体大小26px </p>

第二种是嵌入式写法，在<head></head>内添加<style></style>来选择控制相应的内容

<style> p{ font-size:26px; color: pink; } </style>

第三种是链接外部CSS文件来更改当前页面的内容的样式，也叫外链。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外链</title> 
<link rel="stylesheet"  href="css/index.css" /> 
</head> 
</html>

推荐使用使用link则为先加载CSS后加载HTML

2、阻塞浏览器渲染的css

一般情况下，阻塞渲染有两种情况，css阻塞和js阻塞，大多数情况是由于外部或内部的link标签的引入，使得后面的标签需要等待前面css和js引入后才会进行后续的dom的渲染。

引起阻塞渲染的错误代码：

<body> 
<h1> AAA </h1>
<link href="css.css" rel="stylesheet">
<script src="./.js"> </script> 
<h2> BBB </h2> 
</body>

解决方法为，css文件一般在head部分引入，js文件根据需求可以在head部分或者最后html渲染完毕后引入

3、Flex Box：

为什么要使用flex布局?

新的方案flex布局，可以简便、完整、响应式地实现各种页面布局。

使用了flex布局的盒子模型设置垂直居中就非常简单了，只需要设置 align-items:center; 属性。

可以控制子级盒子的
- 摆放流向
- 摆放顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

flex-direction 属性决定主轴的方向（也就是排列方向）。有4个属性值可以设置。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

align-items 属性定义项目在交叉轴上如何对齐。

justify-content 属性定义了项目在主轴上的对齐方式。

4、flex布局设置居中：

常见的一种方式就是使用flex布局设置居中。

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

display: flex;写在父元素上这就是定义了一个伸缩容器
justify-content 主轴对齐方式，默认是横轴
align-items 纵轴对齐方式，默认是纵轴

优点：简单、方便、快速，三行代码搞定。

<div class="box">
<div>水平垂直居中</div> 
</div> 
<style> 
.box { 
display: flex; 
align-items: center;// 纵轴对齐方式，默认是纵轴 子元素垂直居中
justify-content: center; //纵轴对齐方式，默认是纵轴 
}
</style>

css中的flex布局 | 青训营笔记

1、使用css的方法

2、阻塞浏览器渲染的css

3、Flex Box：

4、flex布局设置居中：