inline-block和float 布局的选择
浮动通常表现正常,但有时候搞起来会很纠结。特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征,而不需要处理一些浮动带来的问题。
Inline-block 用在展示一系列照片的需求,用inline-block代替了浮动。
Inline-block : 同时兼有行内 ,,块级 两个 特征。如下:
- 块级元素(block elements) 块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。
- 行内元素(inline elements)排列方式是水平排列。
- 行内块元素(inline-block elements)在 元素内部 拥有块元素特征width height,padding,border,margin,元素外部的排列方式有类似行内元素,水平排列
什么时候使用inline-block,什么时候使用float
什么时候使用,取决于你的设计稿跟解决方法。 文字环绕容器, 选择浮动。 水平垂直居中对齐元素,选择inline-block。
- 使用inline-block: 控制元素的垂直对齐跟水平排列时,使用inline-block。
- 使用浮动: 让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。
浮动、inline-block和图像排列
我使用inline-block主要是为了处理垂直对齐问题。
若父元素中的图片等高,设置浮动就会工作正常。但一旦有一列图片比较高时,图片的排列就会出现问题。这是因为浮动后,图片脱离了文档流。
而inline-block由于未脱离文档流,不会出现这个问题。如果你想再创建一列图片时,不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动,当内容不断变化时, 使用浮动, 这很容易产生bug。
下面是 inline-block跟float的区别:
上面的块级元素被设置了inline-block。由于他们没有脱离文档流,所以元素不会被某个过长的列挤上来。
inline-block导航
另一种inline-block的适用场景:横向导航栏。通常,我们一般会设置a元素display:block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中,你需要设置不同的display属性来处理浮动,那么inline-block不失为一种更好的解决方案。
当你需要将元素排列成一行或者多行时,更倾向于考虑使用inline-block代替float。当然,直接使用table也是一种方法,他毕竟是专门用来处理横向与纵向排列的元素的。
如果你需要创建一个很复杂的包含行列的布局,table是你的最佳选择,不过你同样也可以考虑inline-block
总结
我们经常使用浮动,但浮动并不是唯一的解决方案。有时候inline-block会更好,特别是你想排列一些图片,或者横向排列链接时。
Inline-block元素带有一些行内元素的特征(横向排列),同时内部也拥有块级元素的属性。这个跟浮动很类似,只不过有些区别。
这些区别决定了你该使用哪种方案。如果你很纠结垂直对齐问题或者横向排列元素,不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制,你需要浮动。
当然,table也是你处理一些问题的最佳方案。
同样我想说的,这不是什么新东西,但我会通过这篇文档还有demo来介绍一些应该使用但有些人尚未使用inline-block的场景。
inline-block和float 布局的选择的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- line-block代替float布局;
line-block代替float布局: 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果: 或则这样: 有时候,我们希望,以第一排最高的元素为换行基准时,我们就可以使用 ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- float布局打破标准流,神助攻clear清浮动
布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...
- 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现
前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 京东商城的底部布局的选择效果看上去很复杂,其实很简单,这主要是要 ...
- css盒布局-省份选择盘的实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
随机推荐
- awt多线程聊天
public class ChatServer { boolean started = false; ServerSocket serverSocket = null; public void sta ...
- Spring中IOC和AOP的详细解释(转)
原文链接:Spring中IOC和AOP的详细解释 我们是在使用Spring框架的过程中,其实就是为了使用IOC,依赖注入,和AOP,面向切面编程,这两个是Spring的灵魂. 主要用到的设计模式有工厂 ...
- ubuntu 使用dpkg手动安装deb包时发生循环依赖的解决办法
将循环依赖的所有包放到同一个命令行里一起安装,如: sudo dpkg -i libnss3-nssdb_3.28.4-0ubuntu0.14.04.4_all.deb libnss3_3.28.4- ...
- JDK 1.8源码阅读 TreeMap
一,前言 TreeMap:基于红黑树实现的,TreeMap是有序的. 二,TreeMap结构 2.1 红黑树结构 红黑树又称红-黑二叉树,它首先是一颗二叉树,它具体二叉树所有的特性.同时红黑树更是一颗 ...
- Windows平台搭建Kafka
1. 安装JDK 1.1 安装文件:http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.htm ...
- Oracle 24角色管理
了解什么是角色 Oracle角色(role)就是一组权限(或者说是权限的集合). 用户可以给角色赋予指定的权限,然后将角色赋给相应的用户. 三种标准的角色 connect(连接角色) 拥有connec ...
- int 的重载
测试代码: 结果: 分析: 首先创建两个对象同时进行初始化所以两次调用带参的构造函数: 其次在创建一个 对象然后将其等于前两个对象相加,这里由于该类没有重载+运算符而是重载了int 所以当两个对象相加 ...
- AD域与外部网站域名相同处理办法
环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...
- Vue系列之 => 路由的嵌套
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 虚拟机 安装centos
entOS安装 我是用VMware 12 安装的,下面是安装,打开VM主页 选择创建虚拟机 典型安装:VMwear会将主流的配置应用在虚拟机的操作系统上,对于新手来很友好. 自定义安装:自定义安装可以 ...