inline元素、inline-block元素在float、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; 都会得到同样的结论。
inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题的更多相关文章
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- 解决IE6下固定定位问题 使用position:fixed
IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...
随机推荐
- 深入理解java虚拟机（十三） Java 即时编译器JIT机制以及编译优化
在部分的商用虚拟机中,Java 程序最初是通过解释器( Interpreter )进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁的时候,就会把这些代码认定为“热点代码”.为了提高热点代码的 ...
- Tomcat 警告：consider increasing the maximum size of the cache
最近在Tomcat8上导入原本Tomcat6的项目,报了以下错误:Tomcat 警告:consider increasing the maximum size of the cache. 这是因为to ...
- 纯分享scp协议如何工作
scp协议是什么, wiki上说: Secure copy or SCP is a means of securely transferring computer files between a lo ...
- Java中的多态方法
public class Main { public void test(Object o) { System.out.println("Object"); } public vo ...
- C#操作系统计划任务
首先需要引用system32下的taskschd.dll 测试环境:win8+vs2012+.net4.0 /// <summary> /// 删除任务 /// </summary& ...
- python字符串的切片
# 字符串的切片 """ (5)字符串的切片 :切片就是截取字符串的意思 (1)语法 =>字符串[::] 完整格式:[开始索引:结束索引:间隔值 (2)[:结束索引 ...
- “全栈2019”Java第五十二章：继承与初始化详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- leecode刷题（8）-- 两数之和
leecode刷题(8)-- 两数之和 两数之和 描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输 ...
- mysql的联合索引的误解
https://www.zhihu.com/question/36996520 之前对于联合索引有一个误区, 假设 name,age为一个联合索引 5条索引记录 a 10 b 5 c 12 c 15 ...
- 2016级算法第四次上机-E.Bamboo and the Ancient Spell
Bamboo and the Ancient Spell 分析 可能英文读题难度比较大,但是只要看到全大写的 "THE LONGEST COMMON SUBSEQUENCE !"应 ...