定位浮动拾遗

---恢复内容开始---

浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从

文档流中取出并对该元素尽量向左或者向右移动,周围的内容将会环绕该元素。所以,浮动会对兄弟元素的布局造成

影响,而且其效率较低,代价较高。

绝对定位则是完全脱离文档流,直接相对于包含块进行定位,对兄弟元素的布局没有影响。

绝对定位是根据定位元素的包含外边距的框(外边框)到包含块内边界(边框内部)的偏移进行定位。

display,float,position之间的爱恨纠葛:(转自W3help)

设定值

计算值

inline-table

table

inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block

block

其他

同设定值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

CSS实现水平|垂直居中漫谈

利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right mar...

3599
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

4076
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之float

1、float的历史   float设计的初衷仅仅是为了文字环绕效果。   示例代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DT...

3705
来自专栏前端知识分享

第9天:CSS精灵图

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

3253
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

49210
来自专栏HTML5学堂

HTML5视音频-解决全屏下出现的控制栏

HTML5学堂:HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能,功能虽好用,但是它的默认样式有点淡淡的忧伤,问题虽存在,...

3606
来自专栏编程之旅

iOS开发 ——全机型适配思路

最近一直在研究学习ReactiveCocoa,并且在给项目转型到MVVM模式打基础,所以博客也很久没有更新了。

1832
来自专栏互联网杂技

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

4195
来自专栏pangguoming

html5调用手机陀螺仪实现方向辨识

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

3201
来自专栏君赏技术博客

AutoLayout简洁之道

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。 2.是进行两个试图进行约束的 3.是对于单个试图进行约束的,默认相对于父试图。 4.是对于约...

1062

扫码关注云+社区

领取腾讯云代金券