FY的web从零自学日记（5）

今天来学一学用CSS布局，正常布局的话就是普通文档流，之前的实践中也看到了，就是从上到下、从左到右的布局方式，很丑。。。。。所以为了美化页面，我们来搞一下CSS布局，CSS布局包含：尺寸和定位，接下来看看应该怎么实现这个东西。

Flex容器

flex-direction:
排列方向

flex-wrap

flex-basis
主轴大小

flex-grow
剩余空间处理

flex-shrink
溢出空间处理

align-items
主轴排列方式

justify-content
垂直排列方式

适用于导航、拆分导航、元素居中、绝对底部。

定位

position

• static 静态定位
  默认的定位方式

• relative 相对定位
  相对于前一个容器的位置

• absolute 绝对定位
  相对于前面的第一个非静态定位容器的位置

• fixed 固定定位
  相对于浏览器窗口的位置

• sticky 粘性定位
  relative和fixed的结合

float

浮动，可以改变该元素本身在正常布局六中跟随其他元素的行为，因为会影响到后面的元素，所以不建议使用。
清除浮动 clear

页面操作

meta标签（用了一下好像没用。。。）

> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=1.0：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例

相对长度

rem相对于根元素做的大小匹配
百分比相对于父元素的比例
视口单位 vh，vw，vmin，vmax

移动端的rem

占满宽度的元素%优于vw
占满高度的元素vh优于%