百度前端技术学院任务三--三列布局
2016-04-10 16:05
274 查看
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,这样的意思是将子元素的盖度设置为不能超过父元素
任务描述:
- 掌握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,这样的意思是将子元素的盖度设置为不能超过父元素
相关文章推荐
- 百度前端技术学院 task3
- 简单遮罩层(比较简陋,纯js)
- get获取Json
- CSS3_文本效果&字体
- 剑指offer系列之5:用两个栈来实现队列
- javascript冒泡排序小结
- Jq/Js收集
- iOS ReactiveCocoa简单使用笔记
- 对jQuery的事件绑定的一些思考
- Got an exception - Unexpected character 0xfeff in identifier
- could only be replicated to 0 nodes, instead of 1
- php实习的tips(mysql_fetch_assoc返回值问题)
- webkit内核简介
- Web前端前沿技术专业术语解读
- 小技巧当从后台传入数据时不要传null最好是个空对象入json中
- 【剑指offer系列】 数组中出现数字超过一半的数字___29
- 剑指offer系列之4:重建二叉树
- 如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度
- js中自执行函数的作用
- JS高级程序设计学习笔记——继承