BIT前端训练营 | 20220104课 web布局下

一、讲解作业

flex布局
分left，right
left设置宽度30%，right自适应，则设置flex：1.表示flex-grow，shrink，basis都为1。
画线框图

纯文本垂直居中:文字居中＋行高设置
拆分导航：用flex，flex-between
input输入框，当focus不显示框，则

input{
outline：none；
}

个人中心板块：
头像，姓名等：水平居中（css定位：子绝父相＋偏移left，top/transform）

消息三个图标：也可以用flex
消息图表上的数字：包裹在消息图标内，子绝父相在进行偏移
鼠标悬浮展示其他消息：

伪类：hover
悬浮出来就展示，没悬浮就隐藏
用浮动
或者flex布局：设置布局方式flex-direction为column，则此时主轴就是垂直方向，交叉轴是水平方向。
align-items：flex-end，flex-start。
align-self:指定某个元素的方向，这样就可以做出某些元素向左，某些元素向右的浮动效果
记事本：
记事本title用position：sticky
内容用无序列表实现
图片用浮动属性，就实现了文字围绕图片。记得清除浮动，不然会影响到后续布局
添加板块，让内容的父类容器指定flex，内容指定flex：1，自适应分配区域，才能使添加板块一直固定在下方
邮箱
收件箱/已发送
头像名字也是用浮动

二、响应式设计

name:源信息作用的类型
content：指定初始
user-scalable：no
媒体查询：

举个例子：
针对不同的屏幕大小，方块的背景颜色不同

css样式后面会覆盖前面，所以有个优先级

用比例单位，相对长度单位，为了响应式设计
rem：针对根元素的比例大小做缩放
百分比：相对于父元素
视口单位：vh视口高度:相对视口高度（Viewport Height），视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的尴尬问题。一般用vh，就不用设置父元素的高度了。
vw视口宽度:是包含了滚动条的，一般用%好一些