浮动&定位
本文地址:http://www.cnblogs.com/veinyin/p/7606652.html
浮动和定位能够让我们把一些元素放到理想的位置,当然,相比之下 float 只能浮动到左边或右边,而定位可以定位到任意位置,两者各有优劣,在使用时要考虑具体情况,选择最适合的。
还记得曾经练习布局的时候把整个页面使用 position 做完了.... 还好那个是固定长宽而且元素不太多,想想就觉得自己真是太奇葩了....
以下是正文~~似乎好多都是常识?
1 浮动 ( float )
浮动元素周围的外边距不会合并,而且它还会产生一个块级框
浮动元素顶点不能超过之前所有浮动元素的顶端
浮动元素的顶端不会超过顶部行框
浮动元素不会不会发生重叠的现象,上面有浮动元素了就浮动到它下面,左边有浮动元素了,就紧挨着浮动到右边,就这样简单,真是棒极了。定位才不会有这么好的默认效果呢,一不注意就重叠了。
浮动元素必须尽可能的向左或向右,而且会尽最大可能放到最高的地方。
浮动元素可以设置外边距来微调位置,但这样有可能与内容重叠
img{
float: left;
margin: 10px -15px 10px 10px;
}
重叠的结果有两种可能:
1. 其后是一个行内框。 行内框所有内容聚在浮动元素之上显示
2. 其后是一个块框。 块框内容在浮动元素之上显示,其余如边框、背景在浮动元素之下显示
清除浮动。 在不想要其左侧或右侧有浮动元素的 CSS 中加上
clear: left; //或 right 或 both
2 定位 ( position )
最大最小属性
max-width , max-height , min-width , min-height
可以使窗口最大不超过多少或最小不低于多少,可以是数值也可以是百分数。
内容溢出 ( overflow )
visible , hidden , scroll , auto
visible 是默认值,超出了元素框的内容仍会显示。 hidden 仅显示元素框内的内容。 scroll 显示元素框内的内容,但会提供一个滚动条,使用户有途径访问超出元素框的内容。 auto 由浏览器决定如何做,一般会选择给滚动条。
裁剪 ( clip )
rect( top , right , bottom , left) 或 auto
要用都好隔开四个值且这些值不能为百分数。如果值为 auto, 则默认为0.
元素可见性 ( visibility )
visible ( 可见 ), hidden ( 隐藏,但保留其空间 ), collapse
END~~~≥ω≤
最新文章
- 详解Javascript中正则表达式的使用
- java常用设计模式
- 更新App版本的流程
- SQL Server 的数据库简单操作
- BZOJ-1226 学校食堂Dining 状态压缩DP
- 用xml添加动画
- C#:使用Hashtable实现输出那些用户发表主题最多的信息
- JavaScript 建立简单的图片库
- DataGridView之行的展开与收缩
- HTML标签语义对照表
- 搜狗一道java题目 关于对象 synchronized 关键字作用在 int, integer
- smarty模板设计
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(三)搭建步骤
- golang中defer的使用规则
- 《团队-Android手机便签-项目进度》
- % 与 format 进行字符串格式化
- 第一章——机器学习总览(The Machine Learning Landscape)
- C#求一组数的众数
- django-simple-captcha 组件使用
- Nginx 500错误总结