百度前端技术学院 task3
来源:互联网 发布:beat it软件 编辑:程序博客网 时间:2024/04/28 12:46
1 百度前端任务三出现问题:
任务描述:
任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务描述
- 使用 HTML 与 CSS 按照 示例图(点击查看) 实现三栏式布局。
- 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试 position 和 float 的效果,思考它们的异同和应用场景。
- 注意测试不同情况,尤其是极端情况下的效果。
- 图片和文字内容请自行替换,尽可能体现团队的特色。
- 调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
实现思路:
设置三个div,分别代表左中右三个区域.让左边的左浮动右边的又浮动,中间的的左右浮动大一点.
遇到的第一个问题:
当三个div如此布局时,那么会出现,如下现象
会将右边的div挤下去,
经过分析发现对三种布局理解的不是很清楚(流式布局,浮动布局和固定布局)
默认的是流式布局,由于class=center的div没有使用浮动布局和固定布局,那么那就是默认的流式布局
div是一个块状元素,那么它本身就应该是占据一行,所以他就会把右边的div挤下去.明白这一点,那么我们可以推测如果将center的div放到最前面,那么他也会将左边的div挤下去.实验证明是正确的
所以这个问题的解决方法是将center的div放置在最后面.这样就不会出现流式布局挤掉浮动布局了.
PS 主要是 center的div宽度不固定.如果他的宽度固定,可以使用float:left,和margin:0 auto;解决.
同时这个还有其他的方法,比如说使用
这三种方法不是很适合这道题,其实是复习一下水平居中的知识.
2遇到的第二个问题:
题目中要求外面的盒子要根据三个div的高度来自适应,
但是又是三种布局问题,他只是对流式布局进行自适应,所以出现问题.
解决办法:1 在父级元素中使用最小高度.min-hight:600px
2 使用overflow:auto,这样的意思是将子元素的盖度设置为不能超过父元素
0 0
- 百度前端技术学院 task3
- 百度前端技术学院task
- 百度前端技术学院task
- 百度前端Web技术学院
- 2017百度前端技术学院
- 百度前端技术学院第一题
- 百度前端技术学院第二题
- 练习1:百度前端技术学院
- 练习2-百度前端技术学院
- 百度前端技术学院,第一阶段学习笔记
- 百度Web前端技术学院--水平垂直居中
- 百度Web前端技术学院--三栏式布局
- 百度前端技术学院(IFE)第一阶段任务
- 百度前端技术学院 JavaScript Task 01
- 2017百度前端技术学院-自定义右键菜单
- 2017百度前端技术学院-自定义checkbox/radio
- 百度前端技术学院任务之JS篇
- 百度前端技术学院task13-task15的总结
- 转载:原码, 反码, 补码 详解
- 没有内容的营销是放空枪 你的内容能让人尖叫吗?
- IOS学习 第三方框架 SDWebImage ARC与MRC混编
- 蓝桥杯——算法训练 P1103
- AndroidManifest.xml file missing!问题
- 百度前端技术学院 task3
- 【数据结构与算法09】图
- 35.JLabel、JTextField、JPasswordField、JTextArea、JPanel、setBorder
- JavaWeb后台管理系统设计与开发(旅游自助系统)
- MyReport报表引擎2.7.9.0——新增水印功能
- 智能指针
- selenium+python send_keys() 上传文件
- R中的函数
- STL heap 的用法