美文网首页
浮动和定位

浮动和定位

作者: CK星空 | 来源:发表于2017-12-14 23:19 被阅读13次

在CSS中,我最怕的就是浮动和定位。我是因为浮动和定位而怕CSS。但是怕,也得攻下来。

这篇文章再次复习一下浮动和定位。

浮动

《CSS权威指南》里这么描述浮动,
“首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...一个元素浮动时,其他内容会环绕该元素。”

浮动的作用是把一个元素浮动到某个位置,会脱离文档流,就像一个人漂浮在空中那样。
然而,它是有副作用的,一旦元素使用了浮动,会影响该元素附近的元素,就像这个人被披上了浮动后,周围的人都会围绕他,而他还漂了起来。所以需要清除浮动。实际应用中,元素经常莫名其妙地错乱,就是这个属性搞的鬼,我以前也花了很长时间来理解这个属性。比理解函数难多了,花的时间也很多。
然而,实际使用还是会出现各种问题,所以我是能不用浮动,尽量不用浮动。尽量用margin来控制元素的布局,否则到后面维护起来,改一个元素,其它元素到处跑,脑袋马上就宕机了。

定位

主要讨论relative和absolute
relative:元素偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
就像一辆车飞起来了,后面的车不能前进,因为它的幻影还在原来的位置。
absolute:元素框从文档流完全删除,并相对于其包含块。
absolute一般会和relative配合使用。使用前是需要理清楚元素之间的关系。一个元素设置了absolute,它是相对于父元素偏移,这个父元素需要设置relative,否则就相对于body。
通俗地说就是,儿子能听爸爸的,但是这个爸爸需要relative加身,否则就听爷爷的,这个爷爷就是body。

相关文章

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • 浮动和定位

    关于浮动 使用场景:需要将大的布局排列成一行,一般使用浮动;对于小的布局排列一般使用inline-block即可;...

  • 浮动和定位

    float浮动 脱离文档流 元素会按照我们指定的方向移动,碰到父级的边界或者前边的浮动元素停止例:float:le...

  • 浮动 和 定位

    浮动 浮动元素特征 元素脱离正常的文档流,其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的...

  • 浮动和定位

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素会从普通流中取出,浮动到左边或...

  • 浮动和定位

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? float CSS属性指定一个元素应沿...

  • 浮动和定位

    css的三种布局方式: 1.标准流: 从上面往下面布局 2.浮动 3.定位 在标准流下,分为三种元素: 块级元素 ...

网友评论

      本文标题:浮动和定位

      本文链接:https://www.haomeiwen.com/subject/wwglwxtx.html