【学习打卡】第三天 前端工程师2022版 流体布局

课程名称： 前端工程师2022版

课程章节：流体布局

主讲老师：Alex

课程内容：

今天学习的内容包括：

一、课程简介

1-1 课程简介

常用布局    

固定宽度布局（pc端常用）：缩放到设置的宽度时，视口缩放但页面无法再缩放。    

流体布局（百分比布局%）：不是固定的，而是像容器一样，随着页面变化而变化    

Flex弹性布局（工具，很少单独使用，而是配合其他的布局使用，使布局更加简单）：可替代float使用，对于水平垂直居中，flex布局谁用谁知道，居中问题so easy。   

rem和vw布局：为了实现缩放时候，不只宽度（流体布局）变化，高度也跟着变化，并且内容始终保持开始的宽高比例    

响应式布局（听的比较多的移动端布局方式）：使用了媒体查询来判断我们的屏幕大小，在不同的屏幕大小上进行相应的布局    ：针对不同的屏幕大小来做相应的布局    

Grid网格布局（工具，为了使布局更方便）    

注意：各部局方式并不孤立，根据需要可以结合使用

二、流体布局仿慕课网首页实战

2-1页面结构布局

所有移动端布局都要写viewport

<meta name="viewport" content="width=device-width,inital-scale=1" />

多行文字省略

  /* 多行文字省略 */   
  overflow: hidden;   
  text-overflow: ellipsis;   
  display: -webkit-box;   
  -webkit-line-clamp: 2;   
  -webkit-box-orient: vertical;   
  white-space: normal !important;   
  word-wrap: break-word;

课程收获：

这节课是复习的，因为今天写布局时有点忘记之前的内容了，加深一下印象

今天学习课程共用了20分钟，今天依然状态不好，不知道怎样才能调整好