【随笔】IFE-task3总结

IFE百度前端学院-任务三-总结

本任务难度为简单，可复习了float和position属性。

任务目标

• 掌握HTML/CSS布局的概念
• 掌握盒模型的概念
• 掌握position与float的概念以及在布局时的用法

任务描述

• 使用 HTML 与 CSS 按照示例图实现三栏式布局。
• 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度

任务链接：http://ife.baidu.com/task/detail?taskId=3

总结：

代码地址

·一些实现总结：

设置body的margin满足浏览器宽度

body{margin: 20px;}

分别设置左右div为float属性，中间div设置margin达到自适应

.team-info{width: 200px;float: left;background: #fff;}.personal-info{width: 120px;float: right;background: #fff;}.introduce{margin: 0px 180px 40px 260px;background: #fff;}

container高度随子元素最高高度变化，使用overflow：hidden

.container{width: auto;overflow: hidden;  background-color: #eee;}

完成效果

·相关知识整理：

关于float

1.浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

2.float属性：　　

① left ：元素向左浮动。

　　② right ：元素向右浮动。

　　③ none ：默认值。

　　④ inherit ：从父元素继承float属性。

关于css清除浮动

参考链接：http://www.cnblogs.com/ForEvErNoME/p/3383539.html

关于position定位

参考链接：

position：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

position及float各种效果举例：http://www.barelyfitz.com/screencast/html-training/css/positioning/

关于css direction属性

可以改变文本方向，挺好玩。可以做到一些float效果但是不会使内容跑到流外。

可能的值：
值           |         描述
ltr            |         默认。文本方向从左到右。
rtl            |         文本方向从右到左。
inherit     |         规定应该从父元素继承 direction 属性的值。

关于display：table-cell 

参考链接：

http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

http://www.520ued.com/article/table-cell