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

排序
  • 发布时间
  • 浏览量
  • 点赞数
  • 掌握盒模型的概念 CSS 盒模型: margin-border-padding-content Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域,内边距是透明的。 Content(内容) - 盒子的内容,显示文本和图像。 重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。. 高度和宽度的计算 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边…

    2116次浏览20评论
  •   本任务主要是利用css完成三栏式布局。关于三栏式布局,常规情况下,可以使用float实现,也可以使用relative来实现。 但是,如果要求左右两层定宽,中间层的宽度随浏览器窗口宽度变化而变化,这种情况下,就适合使用圣杯和双飞翼布局。通过对圣杯及双飞翼布局学习之后,我认为两种布局的主旨是在html结构中,使中间的主体层位于左右两层的前面。任务效果图:   基本思路及区别:1.两种布局的基本构思为:首先让中间层100%宽度占满同一高度的空间,在左右两层被挤出中间层所在区域时, 使用margin-left的负值将左右两个层拉回与中间层同一高度的空间,接下来调整左右两层到指定位置, 最后使用中…

    4149次浏览133评论
  • 1.三栏式布局方式:使用浮动的方式float,左右大小固定,中间自适应;使用的方法是左右浮动,中间的层使用margin-left和margin-right来控制距离,最外层的div需要清除浮动 代码如下: <div class="main"><div class="left">左边</div><div class="right">右边</div><div class="center">中间</div></div> &…

    2536次浏览74评论
  • 盒模型 border 边框宽窄、样式和颜色宽度: thin medium thick 非百分比和负值的数值 样式: none hidden dotted dashed solid double groove ridge inset outset 等 padding 盒子内容区和边框的间距没有设定内边距的情况下,内容紧挨着边框。 内边距实际加在声明的盒子宽度上。 margin 盒子与相邻元素的间距中和外边距和内边距 样式表第一条规则 * {margin: 0; padding: 0;} reset.css 叠加外边距垂直方向上的外边距会叠加(重叠),直到一个元素的外边距…

    3808次浏览312评论
  • 关于浮动2017-03-02 09:03

    浮动的设计初衷 文字环绕图片效果原理是:float 破坏了图片的inline box。让图片在 boxes 链中的高度缺失,并脱离 boxes 链 ,让其移动到指定方向同时,同处于文档流中的文字实体不会与浮动元素重叠,而是会绕行 <!--more--> 浮动的特性: block化元素 去除间隙 破坏(父元素的高度) block化元素 浮动元素会生成一个块级框,而不论这个元素本身是什么。也就是是说:无论行内元素还是块元素,被设置浮动之后,display属性值都变为block。但表现是 inline-block 属性。 能block化元素的其它属性: display :…

    816次浏览10评论