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

排序
  • 发布时间
  • 浏览量
  • 点赞数
  • 定位与flex2018-05-12 18:13

    定位 文档流 正常的布局流(在布局介绍文章中提到)是将元素放置在浏览器视口内的系统。默认情况下, 块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。 内联元素互相之间以及任何相邻(或被包裹)的文本内容位于同一行上,只要在父块级元素的宽度内有空间可以这样做。如果两个相邻元素都在其上设置外边距,并且两个外边距接触,则两个外边距中的较大者保留,较小的一个消失——这叫外边距折叠 position 静态定位(元素在文档流中的正常位置) position:absolute;(默认值)相对定位(占据正常文档六中的位置) …

    1517次浏览90评论
  • Day7_82018-05-11 22:22

    width和height:设置内容框(content box)的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其它框。padding: 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。border:CSS 框的边界(border)是一个分隔层,位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。margin:外边距(margin)代表 CSS 框周围的外部区域,称为外边距,它在布局中推开其它 CSS 框。其表现与 padding 很相似;溢流:overf…

    542次浏览10评论
  • 摆放新大陆2018-05-11 14:31

    笔记时间: 2018.5.11 课程目标: 通过大量练习,来学习布局的各种方式。 课程时长: 12小时,已达标。 学习成果: Position相关概念及使用Postion进行布局的场景和方法 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为。 默认的静态定位,意味着块级元素垂直布局,内联元素水平布局,外边距折叠。 相对定位仍占据正常的文档流,通过tblr控制偏移方向(top,bottom,left和right的工作方式——如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。),显示方式仍为原来的display(因没有离开文档流,但当加…

    425次浏览20评论
  • flex和垂直居中2018-05-10 00:16

    flex 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)(本例中是 <article&g…

    724次浏览10评论
  • 页面布局2018-05-09 12:30

    日期:2018年5月7日-9日今天的学习总用时:三天今天学习的目标:学习掌握页面布局的各种方式 多栏布局有三种基本的实现方案:固定宽度、流动、弹性。 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到 1100像素宽。其中 960 像素是最常见的,因为这个宽度适合所有现代显示器,而且能够被 16、12、10、8、6、5、4 和 3 整除,不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素数。 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间…

    414次浏览00评论
  • 定位2018-05-09 10:37

    position: static 默认值:将元素放入它在文档布局流中的正常位置 position: relative 相对定位,相对于元素原来的位置移动,偏移前的位置保留。在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。 position: absolute;绝对定位的元素不再存在于正常文档布局流程中,不占用空间,原来占用的位置被删除。相对于设置了position:relative或者position:absolute的包含容器为基准定位,元素的margin依然有效,没设置就是相对于根元素定位。浮动元素不同,浮动于正常流中移除,保留部分流动性,会影响后面的内容,文字文字内…

    391次浏览00评论
  • 布局的学习2018-05-05 17:18

    定位 默认position: static; 绝对定位相对于最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动 position: absolute; top: 120px; right: 0; width: 300px; height: 200px; 相对定位在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。 position:…

    734次浏览50评论
  • position 静态定位 position:static(默认) 相对定位 position:relative 配合使用top,bottom,left和right 绝对定位 position:absolute 配合使用top,bottom,left和right注意:绝对定位是相对于设置有display:relative的祖先元素,如果没有,最终会相对于<html>元素 固定定位 position:fixed与绝对定位的工作方式完全相同区别是固定定位元素相对于浏览器视口本身 堆叠顺序 z-index Flexbox display: flex;如图 属性 属性 值 备注 flex-…

    1431次浏览184评论