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