一天搞定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,但对于浮动始终非常迷惑,可能是自身 ...
随机推荐
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
- [JavaWeb]SpringSecurity-OAuth2.0 统一认证、资源分离的配置，用于分布式架构、模块化开发的认证体系
前言 关于 OAuth2.0的认证体系,翻阅了好多资料,RCF 文档太多,看了一半就看不下去了,毕竟全英文的文档看起来,是有一点让我烦躁,但也对 OAuth2.0的认证流程有了一个基本的概念,之前用 ...
- SpringMVC结合ajaxfileupload文件无刷新上传
jQuery没有提供ajax的文件上传,我们可以通过ajaxfileupload实现ajax文件的上传.其实ajaxfileupload文件上传特别的简单.下面就演示一下在SpringMVC中实现aj ...
- 分布式文件系统：HDFS
学习Hadoop,两个东西肯定是绕不过,MapReduce和HDFS,上一篇博客介绍了MapReduce的处理流程,这一篇博客就来学习一下HDFS. HDFS是一个分布式的文件系统,就是将多台机器的存 ...
- UBIFS文件系统介绍
1. 引言 UBIFS,Unsorted Block Image File System,无排序区块图像文件系统.它是用于固态硬盘存储设备上,并与LogFS相互竞争,作为JFFS2的后继文件系统之一 ...
- TypeScript入门-枚举、类型推论
枚举 使用枚举可以定义一些具有名字的数字常量,和在C语言中一样都是使用关键字enum enum Direction { Up = 1, Down = 1<<2, Left, Right } ...
- 分针网——每日分享： jquery选择器的用法
jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...
- php函数的种类与调用方法大揭密
PHP中的函数看上去很简单,实际上功能非常强大,我这里按函数名称是否固定,可以分为以下三大类: 一.名称固定的函数: 这类函数,也叫:常规函数,直接用关键字function来创建,也是大家最熟悉的类型 ...
- PHP自定义函数
啊哈
- 单页应用跳转ui-view,$stateProvider,$urlRouterProvider
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="UTF- ...