Css中position、float和clear整理
2016-04-28 11:39
302 查看
Position:
absolute | 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。 元素的位置通过"left","top","right"以及"bottom"属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过"left","top","right"以及"bottom"属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20"会向元素的LEFT位置添加20像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。 |
inherit | 规定应该从父元素继承position属性的值。 |
float:
块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候,该元素的宽度也会随之变化。当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。overflow|position:absolute|float:left/right都可以产生包裹性,替换元素也同样具有包裹性。
在具有包裹性的元素上想利用width:auto;来让元素宽度自适应浏览器宽是不行的。
元素浮动后,父元素会塌陷此时可以使用clear来清除浮动,让父
clear:
clear属性指定:一个元素是紧挨着前面的
clear属性既可以用于浮动元素,也可以用于非浮动元素。
当应用于非浮动块时,它将元素的
当应用于浮动元素时,它将元素的
要被清除的相关浮动元素指在相同
注释:如果你想要一个元素将所有浮动元素包含在内,你既可以将这个容器设置为浮动,又可以通过
::after
设置clear属性作为替代。
#container:after{ content:""; display:block; clear:both; }
clear的方式有2种,一种是使用伪类,另外一种是使用一个clear的元素,这样外面的元素就会包含它中间的浮动元素了。
外边距合并:
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
参考:
参考文章:
相关文章推荐
- 使用CSS的position属性控制页面布局的入门教程
- 解析CSS编写中的属性优先级问题
- 详解CSS中的伪类与伪元素及二者间的区别
- 如何解决css帧keyframes在yuicompressor下压缩问题
- CSS层级关系
- ios 找出导航栏下面的黑线(可隐藏,改变样式等)
- css新特性 box-flex/flex 弹性盒状模型
- DIV+CSS颜色边框背景等样式
- 使用 stylelint检查CSS_StyleLint
- css3和js实现重力感应(经测试,andriod4.2支持)
- CSS3新特性,兼容性,兼容方法总结
- CI 里去掉index.php 并 识别css js 文件 技巧
- 《CSS设计指南》笔记--HTML标记与文档结构
- CSS3 input 输入框蓝光特效
- 初识scss(1)
- 使用 stylelint检查CSS_StyleLint
- css 定位 float属性
- css div float属性
- css 定位
- 即将要被淘汰的兼容之--CSS Hack