block 块元素    inline 内联元素

常见的块元素有：div, p, h1~h6, table, form, ol, ul等

常见的内联元素有：span, a, strong, em, label, input, select, textarea, img, br等

display:block特点

1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <div style="width:200px;">

         <div>div块元素</div>

         <p>p块元素</p>

         <h1>h1块元素</h1>

         <table border="1">

           <tr>

             <th>表头</th>

             <th>表头</th>

           </tr>

           <tr>

             <td>表格单元</td>

             <td>表格单元</td>

           </tr>

         </table>

         <form>

             First name:<input type="text" name="firstname" value="Mickey">

             <br>

             Last name:<input type="text" name="lastname" value="Mouse">

         </form>

         <ol>

           <li>Coffee</li>

           <li>Tea</li>

           <li>Milk</li>

         </ol>

     </div>

 </body>

 </html>

 效果如下：


可以轻松的发现这些元素都是独占一行，通过审查元素我们可以看到这些标签的display属性都是block，当前父级元素的width是200px,当改变父级元素宽度为70px时，效果如下：





所以默认情况下，block元素宽度自动填满其父元素宽度




2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。


3、block元素可以设置margin和padding属性。


display:inline特点


1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化


2、inline元素设置width,height属性无效。


3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <span>span内联元素</span>

     <strong style="width:10px">strong内联元素</strong>

     <em>em内联元素</em>

     <label>label内联元素</label>

     <input type="text" value="input内联元素">

     <div style="width:10px">div块元素</div>

 </body>

 </html>




效果图如下：




可以看出对inline元素设置宽度不起作用，它的宽度是随着内容的长度变化的


display:inline-block特点


简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。




 


 


 
												


											
浅谈block, inline和inline-block的区别的更多相关文章
	

    
						
  1. 浅谈Nginx负载均衡和F5的区别
		
    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处 ...
    
		
    2. 
						
  2. 浅谈Nginx负载均衡与F5的区别
		
    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道“墙”,将请求分发到web服务器后,web服务器上的Nginx再进行处理,静态内容直接访问 ...
    
		
    3. 
						
  3. 【转】浅谈Nginx负载均衡与F5的区别
		
    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道“墙”,将请求分发到web服务器后,web服务器上的Nginx再进行处理,静态内容直接访问 ...
    
		
    4. 
						
  4. 转 浅谈C++中指针和引用的区别
		
    浅谈C++中指针和引用的区别 浅谈C++中指针和引用的区别   指针和引用在C++中很常用,但是对于它们之间的区别很多初学者都不是太熟悉,下面来谈谈他们2者之间的区别和用法. 1.指针和引用的定义和性 ...
    
		
    5. 
						
  5. 浅谈 HTTP中Get与Post的区别
		
    浅谈 HTTP中Get与Post的区别 存在的误区 有人说 HTTP 协议下的 Get 请求参数长度是有大小限制的,最大不能超过XX,而 Post 是无限制的,看到这里,我想他们定是看多了一些以讹传讹 ...
    
		
    6. 
						
  6. 浅谈Java中set.map.List的区别
		
    就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是想对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...
    
		
    7. 
						
  7. 浅谈MVC模式与MVVM模式的区别
		
    MVC模式: M:Model(数据模型),用于存放数据 V:View(视图),也就是用户界面 C:Controller是Model和View的协调者,Controller把Model中的数据拿过来给V ...
    
		
    8. 
						
  8. 浅谈HTTP中Get与Post的区别/HTTP协议与HTML表单（再谈GET与POST的区别）
		
    HTTP协议与HTML表单(再谈GET与POST的区别) GET方式在request-line中传送数据:POST方式在request-line及request-body中均可以传送数据. http: ...
    
		
    9. 
						
  9. 浅谈HTTP中Get与Post的区别
		
    引用自:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET ...
    
		
    10. 
						
  10. 【转载】浅谈HTTP中Get与Post的区别
		
    [转载]http://www.cnblogs.com/hyddd/ Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 机器学习：DeepDreaming with TensorFlow (三)
			
    我们看到,利用TensorFlow 和训练好的Googlenet 可以生成多尺度的pattern,那些pattern看起来比起单一通道的pattern你要更好,但是有一个问题就是多尺度的pattern ...
    
			
    2. 
						
  2. EPPlus简单使用
			
    在使用之前需要在项目中添加对EEPULS.dll的引用 1,创建excel 2,创建sheet 3,添加内容 4,修改 5,保存 FileInfo newFile = new FileInfo(fil ...
    
			
    3. 
						
  3. js中的escape的用法汇总
			
    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
    
			
    4. 
						
  4. Qt使用预编译头文件Using Precompiled Headers（提升10倍以上）
			
    预编译头文件是被很多编译器用来编译稳定的代码以及将编译好的稳定代码存储在二进制文件中用于提升编译性能.在随后的编译中,编译器将加载存储状态继续编译指定的文件.每一个随后的编译将更快,因为稳定的代码不需 ...
    
			
    5. 
						
  5. C++ 异常机制分析（C++标准库定义了12种异常，很多大公司的C++编码规范也是明确禁止使用异常的，如google、Qt）
			
    阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...
    
			
    6. 
						
  6. WPF中Style文件的引用——使用xaml代码或者C#代码动态加载
			
    原文:WPF中Style文件的引用--使用xaml代码或者C#代码动态加载 WPF中控件拥有很多依赖属性(Dependency Property),我们可以通过编写自定义Style文件来控制控件的外观 ...
    
			
    7. 
						
  7. js动态创建表格
			
    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
    
			
    8. 
						
  8. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻（转）
			
    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
    
			
    9. 
						
  9. 在WPF程序中将控件所呈现的内容保存成图像
			
    原文:在WPF程序中将控件所呈现的内容保存成图像 有的时候,我们需要将控件所呈现的内容保存成图像保存下来,例如:InkCanvas的手写墨迹,WebBrowser中的网页等.可能有人会说,这个不就是截 ...
    
			
    10. 
						
  10. qt下的时钟程序（简单美丽，继承自QWidget的Clock，用timer调用update刷新，然后使用paintEvent作画就行了，超详细中文注释）good
			
    最近抽空又看了下qt,发现用它来实现一些东西真的很容易比如下面这个例子,绘制了个圆形的时钟,但代码却清晰易懂［例子源自奇趣科技提供的例子］因为清晰,所以就只写注释了,吼吼其实也就这么几行代码头文件 / ...
    
			
    11.