liquan20200820

今日日记

栅栏布局

  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

学习心得:

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

标签


Warning: A non-numeric value encountered in /www/wwwroot/www.ycdledu.com/wp-content/themes/storeys-pro/common/_wbt_core.php on line 495

Warning: A non-numeric value encountered in /www/wwwroot/www.ycdledu.com/wp-content/themes/storeys-pro/common/_wbt_core.php on line 495

Warning: Division by zero in /www/wwwroot/www.ycdledu.com/wp-content/themes/storeys-pro/common/_wbt_core.php on line 495

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1