block，inline和inlinke-block细节对比

  • display:block
    1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，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不会产生边距效果。
  • display:inline-block
    1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

block，inline和inlinke-block细节对比的更多相关文章

  1. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. dispay属性的block,inline,inline-block

    转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...

  3. display：block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  5. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  6. block, inline和inline-block的区别

    display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...

  7. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  8. div横排放置对齐问题；block,inline,inline-block区别

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...

  9. block inline 和 inline-block

    概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常 ...

随机推荐

  1. 求android ble 解决方案！

    智能医疗的产品,求ble解决方案:整体结构如下: 名词定义: 盒子:基于android4.3或以上版本的硬件,需支持wifi.ble 手机:android/ios 手机,用户使用 服务器:云服务器,盒 ...

  2. HttpEntity转换Inputstream（红色）加XmlPull解析

    package com.bawei.xml; import java.io.IOException; import java.io.InputStream; import java.util.Arra ...

  3. python之在线PK游戏（第六天）

      本节作业: 熟练使用类和模块,写一个交互性强.有冲突的程序. 故本次写了一个文字回合制的PK游戏,系统主程序为根目录下的:game_menu.py 1. 系统功能模块: 第六天的作业:文字游戏程序 ...

  4. sql查看锁与解锁

    select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran ...

  5. css的权重

    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ ...

  6. cocos2dx UI总结

    1.a->addChild(b); 如果b是一个layer,则默认是忽略锚点的,此时无论你怎么设置它的锚点都没用,必须先b->ignoreAnchorPointForPosition(fa ...

  7. 贪吃蛇，JavaScript，效果，鼠标事件

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠 ...

  8. Spring MVC中Action使用总结

    Spring MVC中每个控制器中可以定义多个请求处理方法即Action,Action可以有多个不同的参数,有多种类型的返回结果. 可以作为Action的参数类型有: 表单对象基本数据类型,包括包装类 ...

  9. 用PHP实现浏览器点击下载各种格式文档的方法详解【txt apk等等】

    [[注:其他文件想设置成下载文件,和下面介绍的方法一致]] 由于现在的浏览器已经可以识别txt文档格式,如果只给txt文档做一个文字链接的话,点击后只是打开一个新窗口显示txt文件的内容,并不能实现点 ...

  10. MySQL运算符和内置函数

    1.字符函数 CONCAT('a','-','b','-','c')效果等同于CONCAT_WS('-','a','b','c') FORMAT()的返回结果是字符型,会对操作数四舍五入,如:SELE ...