display:inline; display:block;
block(块级元素):
div 、from、 p 、table、 pre、h1~h6、 dl 、ol 、ul等
inline(内联元素):
span、a、strong、em、label、input、select、textarea、img、br等
display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
有width,height,仍然独占一行:
可以设置margin,padding属性:
display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
width,height无效:
padding有效,margin-left,margin-right有效;margin-top,margin-bottom 无效:
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
display:inline; display:block;的更多相关文章
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- (转载)display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- Adb refused a command 解决方法
原文:How To Fix Android Error Adb Refused A Command 地址:http://downloadfixit.com/android-error-adb-refu ...
- UDP传输
@@@基于UDP的客服端代码 public class Service { // 服务器 public static void main(String[] args) { DatagramPacket ...
- [并查集] POJ 1182 食物链
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 66294 Accepted: 19539 Description ...
- bzoj3600: 没有人的算术
题意:太难说了..手动去看吧反正不是权限题. 膜拜VFK大爷的神题! 其实一开始思路挺清楚的,如果我们能做到用一个实数去代表"数",这就是裸的动态区间最值查询. 关键是怎么用实数去 ...
- hdoj 5124lines
题意:给你n条线段,求被最多的线段覆盖的点被覆盖的次数 解法:我们可以将一条线段[xi,yi]分为两个端点xi和(yi)+1,在xi时该点会新加入一条线段,同样的,在(yi)+1时该点会减少一条线段, ...
- C++学习进度0
昨天,又把<C++ primer> 刷了一遍,这一次看的是陈硕大大的评注版,重点看了陈硕的注释,<Accelerated C++>去年就把代码巧了一遍,<C++ prim ...
- 第三篇:Retrofit SDK的设计思路
2016-05-08 15:24:03 Retreofit毫无疑问是一个优美的开源框架,有轻量级.耦合性低.扩展性好.灵活性高的特点,那么Retrofit的设计者们到底是怎么样做到这些的呢?我希望能够 ...
- 封装获取dom元素
<script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ re ...
- 006 复杂的数据类型&函数(方法)
2016-01-16 1.变量类型int double string char bool decimal变量的使用规则:先声明再赋值最后使用int number;number=10; number=2 ...
- Ubuntu下freeradius-server的安装
一.安装 (1)更新 #apt-get update (2)下载 链接:ftp://ftp.freeradius.org/pub/freeradius/freeradius-server-2.2.9. ...