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;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...
随机推荐
- 两个SSH2间免密码登录
SSH2免密码登录OpenSSHhttp://blog.csdn.net/aquester/article/details/23836299 OpenSSH免密码登录SSH2http://blog.c ...
- select,poll,epoll用法
http://blog.csdn.net/sunboy_2050/article/details/6126712 select用法 #include <sys/time.h> ...
- C# 加密(Encrypt) 解密(Decrypt) 操作类 java与 C# 可以相互加密解密
public sealed class EncryptUtils { #region Base64加密解密 /// <summary> /// Base64加密 /// </summ ...
- opencv——阈值分割图像
#include "stdafx.h" #include "opencv2\opencv.hpp" using namespace cv; IplImage* ...
- ANE打包心得
1 ane中的p12证书是fb或者flashide中生成的(例如air工程生成的p12),不是苹果账号的p12 2 打包bat中的 -platform 要和 extension.xml中的platfo ...
- HAOI2014 遥感监测
题目链接:戳我 比较水的一个题,直接处理点,找在直线上的可以覆盖到它的区间,然后做最小线段覆盖即可: 代码如下: #include<iostream> #include<cstdio ...
- 最大子段和问题（dp）
最大子段和问题 给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4, ...
- CSS3水平翻转样式和background-size兼容问题
一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { ...
- CodeForces - 396C On Changing Tree(树状数组)
题目大意 给定一棵以1为根的树,初始时所有点为0 给出树的方式是从节点2开始给出每一个点的父亲 然后是 $m$ 次操作,分为两种 $1 v,k,x$ 表示在以v为根的子树中的每一个点上添加 $x-i* ...
- ubuntu和centos安装docker
一. UBUNTU系统上 1. 卸载旧版本(新系统不用执行) sudo apt-get remove docker docker-engine docker.io 2. 安装docker st ...