百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

摆放新大陆

作者黎泉课程第七天到第八天:学习布局385次浏览12018-05-11 14:31

笔记时间:

2018.5.11

课程目标:

通过大量练习,来学习布局的各种方式。

课程时长:

12小时,已达标。

学习成果:

Position相关概念及使用Postion进行布局的场景和方法

定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为。
  • 默认的静态定位,意味着块级元素垂直布局,内联元素水平布局,外边距折叠。
  • 相对定位仍占据正常的文档流,通过tblr控制偏移方向(top,bottom,left和right的工作方式——如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。),显示方式仍为原来的display(因没有离开文档流,但当加入float后脱离文档流,显示方式就变为inline-block。)
  • 绝对定位的元素不再存在于正常的文档布局流程中,通过tblr控制与绝对定位元素的定位上下文的边的距离(默认情况下,它是<html>元素)`显示方式变为inline-block。
  • 固定定位的元素与绝对定位元素工作方式完全相同,只有一个主要区别:固定定位元素相对浏览器视口本身。
  • 实验属性sticky其允许定位的元件像它被相对定位一样动作,直到其滚动到某一阈值点,它变得固定。
  • z-index值影响定位元素在z轴(即一条从屏幕到你的脸的虚线轴)的位置。
    注意:是的,外边距仍会影响定位的元素。 然而,外边距折叠不会。
    通常,导航栏,一些边栏,固定广告栏,W3C里的红色告示框都用到了Position进行布局,MDN里相关方法有选项卡消息框(absolute)和滑动面板消息(fixed)。
    

Flexbox相关概念及使用Flexobx进行布局的场景和方法

弹性盒子提供了工具,允许快速创建曾经被证明用CSS很难实现的一些复杂,灵活的布局和功能。当元素表现为 flex 框时,它们沿着两个轴来布局:主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main startmain end。
交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross startcross end。
设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)(本例中是 <article> 元素。

常用于:

  1. 在父内容里面垂直居中一个块内容。
  2. 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
  3. 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。
    方法:
  4. 指定需要设为弹性盒子的父元素为display:flex(flex容器);
  5. flex-direction指定flex项排列方向。
  6. 布局中使用定宽或者定高的时候,需要flex-wrap:wrap换行。(2.和3.缩写flex-flow: row wrap;)
  7. flex属性按比例设置大小,有三个可选值flex:flex-grow,flex-shrink, flex-basis;
  8. 使用align-items和jusity-content设置水平和垂直对齐方式。
  9. 使用order属性排序元素。

掌握常用的两栏、三栏布局的各种方式

两栏

  1. 双inline-block方案:需要vertical-align:top,需要box-sizing:border-box,需要font-size:0。还可能需要width:calc();
  2. 双float方案:需要box-sizing,需要.clearfix,还可能需要width:calc();
  3. float+margin-left方案:需要.clearfix。
  4. absolute+margin-left:需要position:relative,需要min-height。
  5. 使用float+BFC方法:需要overflow: auto;,需要.clearfix。
  6. flex方案,需要display:flex。
  7. grid方案,需要display:grid。

三栏

  1. 以上7种双栏的变体。
  2. 圣杯,使用三栏float,relative+中间width:100%+padding+margin-left+left。
  3. 双飞翼,使用中间嵌套<div>+三栏float+中间(是父元素div哟)width:100%+margin+margin-left。

心得:

首先通过这些天的学习,完全掌握了定位使用方法,显示方式(包括自身怎么显示,relative+floar怎么显示)等,同时学会了选项卡消息框的编写应用,无JS控制元素(:check)(感谢高大上的MDN),接触了块状元素的流体特性,知道了margin如何影响定位(正常影响但不折叠),学习了flex的初级使用,强无敌的grid还一知半解,说起圣杯的高度自适应,那篇原文中的方法很强大,margin负值+padding正值(比负值大一点)。明明有好多要写的,感觉写出来有不多,看来墨水还很少,以后学到什么先赶紧随笔记下来也比想着日后记下来好。T-T。

0条评论