inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题
2017-02-22 15:00
323 查看
我们知道内联元素是不能设置宽、高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素。
例1:
可以发现这是a已经成了块级元素,可是块级元素为什么还会处在一行之中呢? 因为脱离文档流了啊,当然不会遵循文档流中的规范了。
例2:
在上面的例子的基础上添加display:inline-block;可以发现:即使我们已经把其display强行设置为了inline-block,但是只要浮动,其display属性又会变成block。
上面的两个例子,我们使用float:right; position:fixed; position:absolute; 都会得到同样的结论。
例1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>floattest</title> <style> div.wrap { width: 500px; height: 300px; margin: 100px auto 0 auto; background-color: #ccc; } a { border:thin solid blue; float: left; width: 200px; height: 100px; } </style> </head> <body> <div class="wrap"> <a>这是一段文字</a><a>这是另外一段文字</a> </div> </body> </html>
可以发现这是a已经成了块级元素,可是块级元素为什么还会处在一行之中呢? 因为脱离文档流了啊,当然不会遵循文档流中的规范了。
例2:
在上面的例子的基础上添加display:inline-block;可以发现:即使我们已经把其display强行设置为了inline-block,但是只要浮动,其display属性又会变成block。
上面的两个例子,我们使用float:right; position:fixed; position:absolute; 都会得到同样的结论。
相关文章推荐
- 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 解决: 排列inline-block元素出现顶部不对齐的问题
- div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)
- VS中出现 inline”之后应输入“(”错误问题解决方法
- z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象)
- position:absolute、float、display:inline-block 区别
- inline-block元素水平居中问题
- IE6下与float元素相邻的position:absolute元素消失BUG
- 关于inline-block元素的行高问题
- 子元素用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- inline-block元素间的间隙问题
- position:absolute与overflow:hidden,解决子元素设置position:absolute后父元素 overflow:hidden无效的问题
- 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
- 设置inline-block元素的overflow:hidden意外增加元素总体高度的问题
- [Selenium] 针对下拉菜单出现之后又立马消失的问题,通过Javascript改变元素的可见属性
- position 为absolute时/float 为right,span为block
- 双边界问题?元素有float属性,又有margin属性时出现的双边界问题
- inline元素设置display:inline-block存在空隙问题
- inline-block元素之间出现间隙