inline-block的使用
inline-block是什么
inline和block是css中元素display属性的两个选项,而inline-block可以说是介于两者之间的属性值。
inline使元素成为内联元素(inline elements),而block则使之成为块级元素(block elements)。
inline元素里面只能放inline元素。 块级元素的特点是独占一行,并能设置width和height属性。
内联元素不会独占行,且设置width和height属性不产生效果。 padding和margin在水平方向的值有效,但在竖直方向无效。
inline-block会让元素像内联元素一样不换行,但里面的内容仍然是块级的。
简单的应用
比如对一些div元素设置成display:inline-block,这样就可以在一行里放置多个div了,相比使用float的优点是不会出现浮动到第二行的元素不会因为第一行有过高的div而导致浮动时被挡住(但是flex布局出现后,一般对div不再设置为display:inline-block了。因为flex的响应式的特点使其更为强大,bootstap也是采用flex布局的)。
更有用的地方,比如对一个a元素进行设置,这样就可以对链接设置高度的同时保持不换行的特性了。
inline-block的使用的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- 大话css之display的Block未解之谜(一)
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
随机推荐
- 数表(bzoj 3529)
Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和j的所有自然数之和.给定a,计算数表中不大于a ...
- UVa11542 Square
/*by SilverN*/ #include<iostream> #include<algorithm> #include<cstring> #include&l ...
- net4:MultiView(view)行为中的commmandname与commmandargument,ListBox的使用及移动操作
原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- hdu 5971 Wrestling Match 二分图染色
题目链接 题意 \(n\)人进行\(m\)场比赛,给定\(m\)场比赛的双方编号:再给定已知的为\(good\ player\)的\(x\)个人的编号,已知的为\(bad\ player\)的\(y\ ...
- 标准C程序设计七---64
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- 深入理解js中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...
- SPOJ 1825 Free tour II (树的点分治)
题目链接 Free tour II 题意:有$N$个顶点的树,节点间有权值, 节点分为黑点和白点. 找一条最长路径使得 路径上黑点数量不超过K个 这是树的点分治比较基本的题,涉及树上启发式合并……仰望 ...
- [Inside HotSpot] UseParallelGC和UseParallelOldGC的区别
JVM的很多参数命名很有迷惑性,-XX:+UseParallel,-XX:+UseParallelOldGC,-XX:+UseParNewGC,-XX:+UseConcMarkSweepGC咋一看容易 ...
- [AI开发]深度学习如何选择GPU?
机器推理在深度学习的影响下,准确性越来越高.速度越来越快.深度学习对人工智能行业发展的贡献巨大,这得益于现阶段硬件计算能力的提升.互联网海量训练数据的出现.本篇文章主要介绍深度学习过程中如何选择合适的 ...
- ionic build Android错误记录 error in opening zip file
0.写在前头 运行 :cordova requirements Requirements check results for android: Java JDK: installed 1.8.0 An ...