今日日记

栅栏布局

1. ​ 在父元素中加 row,在列元素中加上 col-n,栅栏布局平均分成12份，offse-n内偏移 offset-n n代表的是几份

弹性布局

1.父级容器中声明 d-flex,主轴的方向flex-row,flex-colum,flex-row-reverse

2.主轴的排列方式：justify-content-start/center/end/between/around

1. 交叉轴的排列方式：align-items-start/center/end
2. 主轴换行：flex-wrap flex-wrap-reverse
3. 内容垂直对齐：align-content-start/center/start/end/between/around/evenly

响应式布局

@media screen and (max-width) and(min-width):

1. 常用的关键字:speech 这是屏幕阅读器 print打印机 screen这是屏幕 all这是 针对所有容器

2. and/not/only

   • and可以放在设备关键词之后，用以链接多个设备
   • not 表示否定，一般放在@media之后，表示禁用
   • only：仅仅，表示只适用这个设备显示器

3. 屏幕的划分：超大屏：xl 大屏lg 中屏 md 小屏 sm 超小屏幕xs

4. xl:min-width:1200px

5. lg:min-width:992px max-width:1190px

6. md:min-width:768px max-width:991px

7. sm:min-width:576px max-wdith:767px

8. xs:max-width:575px

学习心得：

今日学习了响应式布局，收获良多