发表于： 2019-10-28 19:16:43
1 1018
今日完成：
任务1：
HTML自适应
配置
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
视口（viewport）：浏览器显示页面内容的区域
width=device-width：视口宽度=屏幕宽度
initial-scale=1.0：浏览器打开是的比例=1.0不缩放
单位设置为：
% 百分比，父元素长度为参照或
vw/vh屏幕（宽度/高度）的百分比
以方便缩放
基本实现task1
明日完成：
任务3切图
了解图片自适应
问题：
不能很好适应屏幕左边边框空格比右边小，内容没有居中？
收获：
弹性盒模型（flex）
flex布局主要依靠父容器和元素组成
首先使用display：flex 来设置为父容器，元素默认为横向排序。
flex-wrap: wrap;子元素溢出换行
justify-content:space-between;对齐方式：每个子元素间隔一致。
返回列表
评论