css中display和inline-block的一些理解
来源:互联网 发布:nc发送数据下载 编辑:程序博客网 时间:2024/06/05 18:34
一、display常用属性:
1、none :此元素不会被显示,位置都消失,看不见摸不到;
2、block:将元素设置为块级元素;
3、inline:将元素设置为内联元素;
4、inline-block:将元素设置为内联块级元素(本文重点讨论);
二、将元素设置为inline-block后有几个特殊的现象:
上图中可以看出,三个inline-block元素的排列方式好像和想象的不太一样:
1、两个相邻元素的右侧和下侧有间距!
2、有内容的元素和无内容的元素的对齐方式不一样:都是无内容的三个元素会对齐,都是有内容的三个元素也会对齐!
三、现象原因:
1、这个原因空白space是由换行或回车所产生空白符所致,
例如:<div></div>
<div></div>
这么书写代码就会出现有间距的问题。
下侧的空白是因为基线和底线间的距离没有渲染。
2、有内容和无内容的元素渲染方式不同:
无内容的元素,默认从基线向上渲染图形;
有内容的元素,默认从cantent框的下侧对准基线向两侧渲染。
四、解决办法:
1、既然是字符当然无法摆脱font的控制,可以将父元素的font-size设置成0来解决,不过子元素的font-size属性就要从新设置了;
在书写代码的时候使用<div> 等去掉空格来解决,不过这样影响代码可读性;
</div><div></div>
可以通过margin来解决这个问题,不过margin也有副作用;
2、既然对齐基线的渲染有区别,那么就使用vertical-align属性,将元素们设置为top向顶线对齐或者bottom与底线对齐。
解释不对或者不细致的地方,希望各路大神指点!
0 0
- css中display和inline-block的一些理解
- 理解CSS中 display:inline-block
- CSS中display:inline、block、inline-block的区别
- css中display的inline、block、inline-block
- css display的 inline 和 block
- css的display样式中block,inline和inline-block的区别
- CSS中display属性:block、inline和inline-block的区别
- css中display:inline,display:block;display:inline-block; 区别
- CSS中display:inline;display:block;display:inline-block; 区别
- css中display:inline-block
- css中display:inline-block
- css中display:inline-block
- css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别
- css的display:inline-block
- 前端---CSS中display-block & display-inline
- CSS:display:inline-block(行内块)的深入理解
- CSS表现属性Display:Inline-Block的深入理解
- display:inline、display:block和display:inline-block的区别
- 用两个栈来实现一个队列,完成队列的Push和Pop操作。队列中的元素为int类
- 分治法之求最大连续子序列和
- C++读取配置文件的几种方法
- 黑塞矩阵(Hessian Matrix)
- llinux 下 metasploit 的简单安装
- css中display和inline-block的一些理解
- 关于编译的一些事儿:加速Linux程序编译(转)
- 3.输入一个链表,从尾到头打印链表每个节点的值。
- Spring-SpringMVC-Hibernate在IntelliJ与Maven的环境下搭建
- c++第二次作业-质数
- 关于ASP.NET Web Api的HelpPage文档注释问题
- java语言基础(15)——流程控制
- ubuntu安装
- 重建二叉树