百度前端学院-基础学院-第七天到第八天

第五天到第六天的内容没有记笔记，不好不好。

第七天到第八天的学习目标是：学习布局的各种方式。主要包含position相关和Flexbox相关。

知识点：

1、默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。

2、概念：外边距折叠。

3、position， static，默认值；

relative, 需设置top bottom left, right.方向是反的。与静态定位很相似。

absolute, 需设置top bottom left, right. 原点是最近的设置了position的祖先元素，如果没有，则是html。定位的元素应该在文档流中的间隙不再存在,绝对定位的元素不再存在于正常文档布局流程中。相反，它坐在它自己的层独立于一切。

fixed，这与绝对定位的工作方式完全相同，只有一个主要区别——绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。

4、flex布局。内容较多，请参考https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

学习了flex容器：flex-flow align-items justify-content flex-

flex项：flex

原文地址：https://www.cnblogs.com/yadiblogs/p/8981763.html

时间： 2024-08-29 22:50:41

百度前端学院-基础学院-第七天到第八天的相关文章

百度前端学院-基础学院-第吴课/第六课

今天是一个跨天的任务,学习目标是:掌握CSS盒模型及Float: 盒模型要点: 如果盒子的高度被设置为百分比长度,那么盒子高度不会遵循这个设置了的百分比长度,而是总会采用盒子内容的高度,除非给它设置了一个绝对高度(例如,像素或者 em).这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便. 边界(border)也会忽略百分比宽度设置. 外边距(margin)有一个特殊的行为,称为外边距塌陷: 当两个盒子挨在一起时,二者之间的距离为两个挨着的外边距中最大的那个值,而不是二者的和.

百度前端技术学院task1.10

任务十:Flexbox 布局练习面向人群: 有一定HTML及CSS基础的同学难度: 中重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终

百度前端技术学院task1.9

任务九:使用HTML/CSS实现一个复杂页面面向人群: 有一定HTML/CSS基础的同学难度: 中等重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

（作业）百度前端技术学院任务八：响应式网格（栅格化）布局

百度前端技术学院任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

百度前端技术学院task1.12

任务十二:学习CSS 3的新特性面向人群: 初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

【碎碎念】百度前端技术学院春季班

早上迷迷糊糊被读研阶段的室友的微信叫醒了,邀约组队参加百度前端技术学院春季班(http://ife.baidu.com/),前室友在前端方面还是有一定造诣的,自己本身对前端开发又有一定兴趣,因此准备组团参与下. 想想我的技能树长得确实有点奇葩,最早是做嵌入式的,做了三个月点唱机跑去做产品和实施,跑完了大半个福州高校做某系统推广与实施后觉得做开发的童鞋的Bug有点多就边实施边改代码,久而久之就慢慢转向了开发,想想读研阶段白天上班写C#晚上下班写实验室的Java横向项目的经验也是蛮奇葩的,导致现在我

百度前端学院---小薇学院---任务---12

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 tr th { 8 color: #fff; 9 background-color: #000; 10 } 11 12 tbody tr:nth-child(1), 13 tbody tr:nth-child(2), 14