一天搞定CSS： 浮动（float）与inline-block的区别--11
浮动：
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。
inline-block:
inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。
两者的区别
两者主要区别在于当标签的【高度不一致】时，体现出的差异
如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block
1）浮动时代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width: 300px;
font-size: 0;
}
li{
list-style: none;
width: 100px;
height: 150px;
background: green;
font-size: 40px;
text-align: center;
line-height: 150px;
color: #fff;
float: left;
/*float: right;*/
/*display: inline-block;*/
}
</style>
</head>
<body>
<!--
如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
-->
<ul>
<li>1</li>
<li style="height: 200px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果图：
2）使用inline-block时代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width: 300px;
font-size: 0;
}
li{
list-style: none;
width: 100px;
height: 150px;
background: green;
font-size: 40px;
text-align: center;
line-height: 150px;
color: #fff;
/*float: left;*/
/*float: right;*/
display: inline-block;
}
</style>
</head>
<body>
<!--
如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
-->
<ul>
<li>1</li>
<li style="height: 200px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果图：
总结：
在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。
在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。
【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】
一天搞定CSS： 浮动（float）与inline-block的区别--11的更多相关文章
- 验分享：CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- 一天搞定CSS： 浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- (转)经验分享：CSS浮动(float,clear)通俗讲解
文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...
随机推荐
- C# 类型转换is和as 以及性能陷阱
1.在C#2.0之前,as只能用于引用类型.而在C#2.0之后,它也可以用于可空类型.其结果为可空类型的某个值---空值或者一个有意义的值.示例: static void Main(string ...
- netty——私有协议栈开发案例
netty--私有协议栈开发案例 摘要: 在学习李林峰老师的Netty权威指南中,觉得第十二章<私有协议栈开发>中的案例代码比较有代表性,讲的也不错,但是代码中个人认为有些简单的错误,个人 ...
- ASP.NET MVC5请求管道和生命周期
请求处理管道 请求管道是一些用于处理HTTP请求的模块组合,在ASP.NET中,请求管道有两个核心组件:IHttpModule和IHttpHandler.所有的HTTP请求都会进入IHttpHandl ...
- 读书笔记 effective c++ Item 53 关注编译器发出的警告
许多程序员常常忽略编译器发出的警告.毕竟,如果问题很严重,它才将会变成一个error,不是么?相对来说,这个想法可能在其它语言是无害的,但是在C++中,我敢打赌编译器的实现者对于对接下来会发生什么比你 ...
- Vim常用操作-快速删除括号中内容。
如果你和我一样,希望拥有众多工具,发挥工具最大执行效率,让工作事半功倍的话,我推荐你来使用下 Vim. 刚接触Vim 会觉得它的学习曲线非常陡峭,要记住很多命令,操作太复杂.所以这个系列的分享,不会教 ...
- 好看的复选框（Checkbox）效果
在线演示 源码下载
- 没有理由，就是要上一波C++的东西
从入门开始,一直在用C , 对于C++可谓是一窍不通,只能是勉强看懂C++的代码,至于写更是连头文件什么iostream是什么我都不知道,更不用说什么using namespace std :之类的东 ...
- [内存管理]linux X86_64处理器的内存布局图
linux X86 64位内存布局图
- Linux(ubuntu)安装MediaWiki
本篇文档所述步骤,作者完全验证过.一切OK. 作者:http://gaoxingf.blog.51cto.com/612518/188132,Younger Liu 本作品采用知识共享署名-非商业性使 ...
- codeforces 803B Distances to Zero
Distances to Zero 题目链接:http://codeforces.com/problemset/problem/803/B 题目大意: 给一串数字,求每个数字到离他最近数字0的距离.. ...