dispaly 的block与inline-block的用法

一直以来没有弄清block与line-block的用法，今天花点时间整理一下。

<body><div class="div1">div1</div><div class="div2">div2</div><span class="span1">span1</span><span class="span2">span2</span>
</body>

div,span{width: 100px;height: 100px;background-color: #cbcc6b;margin: 1px}

span这样的行内元素是不能设置宽高的，display的默认属性inline；div属于块级元素可以设置宽高，并且独占一行，display的默认属性block；效果如图：

当给span元素设置:

span{display: block}

效果如图：

设置：

span{display: inline-block}

效果如下：

同时块级元素也可以设置为：

div,span{width: 100px;height: 100px;background-color: #cbcc6b;margin: 1px;display: inline}

总结：设置display时，block：块级元素，独占一行，可设置宽高；inline：行内元素，默认在同一行显示，不能设置宽高；inline-block：相当于block加上左浮动。

注意：在ie6、7下对块级元素使用inline-block会出现问题。可以使用float实现相同的效果。

转载于:https://www.cnblogs.com/eoff/p/5060705.html

dispaly 的block与inline-block的用法相关推荐

DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
display:inline-block，block，inline的区别与用法
一.首先要了解什么是块级元素与行级元素块级元素会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
block、inline和inline-block
block.inline.inline-block 行内元素和块级元素 block inline inline-block 行内元素和块级元素的区别常见用法 display 案例(简单实现导航栏) ...
block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
【学习笔记】block、inline（替换元素、不可替换元素）、inline-block的理解
本文转载总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
block，inline和inlinke-block细节对比
block,inline和inline-block概念和区别总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
Block和inline元素对比
所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div ...
CSS 中 display 的 block，inline，inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...

dispaly 的block与inline-block的用法

dispaly 的block与inline-block的用法相关推荐

最新文章

热门文章