完成的事
- 实验了内联元素在排版上的状况,
- 学习了flex布局,并应用开发简单页面。
- 媒体查询@media相关的知识,了解了其关于自适应的关系。
- 了解了rem对自适应的影响。
解决的问题
- rem是怎么自适应屏幕宽度的变化的,实际上是经过js动态获取屏幕宽度的变化的程度,让html字体大小也一样程度变化,即实现rem等比扩大和缩小
- inline元素设置宽高不起做用,但设置padding,margin,border是起做用的,其padding,margin,border再也不文档流之中。其自身宽高不受父容器限制。
- img等inline-block元素能够设置宽高,但也inlie元素的特性,其宽高不会受文档流的控制
- inline-flex实际相似于inline-block,inline-flex容器大小由内容决定,但可自行设置宽高,flex布局的容器宽度不因内容变化。
仍有的困惑
- rem自适应屏幕的方式只参考了屏幕宽度的变化,高度呢?要不要考虑
开发步骤
flex布局的简单应用
- 主要应用flex布局在垂直方向的居中和在水平方向的两端对齐或各项间距相等拉开对齐
- 布局后,可有padding,margin来控制间距缝隙,行内元素能够用宽度,和其自身属性来排列
关于flex
采用flex布局的容器有两个轴,各项目按照主轴去排列,direction方向即改变主轴的方向和项目在主轴上的排列方向,是横仍是行,是从左到右排列仍是反过来,即row,column,row-reverse。那要是主轴排不下,能够选择换行wrap,还能够选择向上换行,wrap-reverse。flow就是二者的结合属性。
定义主轴上的排列方式还能够定义主轴上的对齐方式,是从主轴开始对齐仍是末尾处开始对齐,仍是中间对齐。是各个之间拉开间距,仍是两端靠着边而后拉开边距。说完主轴再就是交叉轴,交叉轴上与内联的垂直对齐方式差很少,有居中对齐,基线对齐等html