浮动和定位

1.浮动的特性

(1)浮动的元素排在同一排

(2)浮动的元素内容撑开宽度

(3)浮动的元素脱离文档流(BFC)

(4)浮动的元素支持所有的css样式

(5)浮动的元素提升层级半级(http://study.163.com/course/courseLearn.htm?courseId=1003112011#/learn/video?lessonId=1048171334&courseId=1003112011这个视频讲的很清除)

2.BFC:简单的理解就是清除浮动,用来处理浮动元素脱离文档流的问题

https://www.jianshu.com/p/76484dff1cb5

(1)父级也浮动

    弊端:左右的margin:0 auto ;会失效

(2)父级元素加display:inline-block;

    弊端:左右的margin:0 auto ;会失效

(3)给父级加高

    弊端:可扩展性不好(要根据子元素的高来更改)

(4)br标签

    写法:<br/>

    作用:换行

    <br clear="all"/>

不推荐,不符合w3c规范,w3c要求结构行为样式三者分离

(5)clear

    clear元素的某一方向不允许出现其他的浮动元素

同样不符合w3c规范

left

right

both:推荐使用

one

(6)伪类清除浮动

:after{

content:"";display:block;clear:both;

}

目前主流方法,推荐使用(淘宝再用)


加zoom:1是因为IE6.7不支持after。为了浏览器的兼容性

(overflow:hidden也可以)https://blog.csdn.net/hukaihe/article/details/51298665

https://blog.csdn.net/sunopar/article/details/51680765

https://blog.csdn.net/haluoluo211/article/details/51462644


3.定位:把一个元素按照一定的方式定到页面的某一个位置

position

相对定位  relative    针对自己本身的位置进行定位

绝对定位  absolute  针对有定义的父级的原点进行定位,如果父级没有定位,会找父级的父级身上有没有定位,如果有,针对父级的父级的原点进行定位。以此类推,如果都没有定位,针对document进行定位。

提示:绝对定位即使没有初始值,也一定要设置值(设为top:0px;left:0px;)

固定定位  fixed         针对页面窗口进行定位

注:IE6不支持固定定位

偏移量  left  top   right  bottom

提示:left  top  比  right  bottom 的优先级高,所以有了left设置right效果根据left决定

4.定位的三种特性

相对定位  relative

(1)不影响元素本身的特性

(2)不使元素脱离文档流

(3)提升层级

(4)无法触发BFC

(5)针对自己本身进行定位

绝对定位  absolute

(1)会使元素完全脱离文档流

(2)内容撑开宽度和高度

(3)使元素支持所有的css样式

(4)提升层级  z-index:数值;    定位层级设置。数值越大,层级越高。

(5)绝对定位要和相对定位配合使用(父级用相对,子级用绝对)

(6) 针对有定义的父级的原点进行定位,如果父级没有定位,会找父级的父级身上有没有定位,如果有,针对父级的父级的原点进行定位。以此类推,如果都没有定位,针对document进行定位。

(7)如果绝对定位的子级有浮动,可以省略清除浮动的操作

固定定位 fixed

(1)不兼容IE6

(2)针对窗口进行定位

(3)如果固定定位的子级有浮动,可以省略清除浮动的操作

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

浮动和定位

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭