display:block
 
        block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
        block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
        block元素可以设置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不会产生边距效果。
 
    display:inline-block
 
        简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

---恢复内容结束---

display转块状化的更多相关文章

  1. testbench中$display查看例化model里面信号方法以及$realtime用法

    前言 此为测试语法,不可综合: 流程: 1.在tb中可以这么写,检测clk_t_en的高电平,输出仿真时间位置,想查看的cnt_t是底层模块中的.这么会使得时间延迟一个周期: always @(pos ...

  2. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  3. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽(改变大小/最小化/最大化/还原/关闭)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. line-height行高与图片的隐匿文本间隙消除方法

    (标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-hei ...

  5. CSS float

    我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮 ...

  6. CSS line-height与vertical-align:baseline

    一.当line-height与vertical-align相遇,会发生很多匪夷所思的现象 首先,请看如下代码: <!DOCTYPE html> <html> <head& ...

  7. html和css的联系

    前几天学习了一点html,今天团队为做项目一起学习时,又了解到了新的东西———css,通过组内队员的指导和对一些网站(三翼)的分析,发现了html和css之间联系密切.根据从网上了解的资料,发现htm ...

  8. Css深入理解之浮动_慕课网课程笔记

    前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一 ...

  9. CSS属性之float学习心得

    全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:flo ...

随机推荐

  1. ubuntu下 too many file open 异常

    后台高并发或者多线程的情况下,无论是操作数据库还是操作文件,应用报出 too many file open 异常,其原因是受宿主系统文件数的限制.问题解决方式如下: 第一步:检查所在系统的文件数限制 ...

  2. tomcat manager配置

    在tomcat-user.xml里面配置 <tomcat-users xmlns="http://tomcat.apache.org/xml" xmlns:xsi=" ...

  3. cocos2d-js去掉左下角的三行数字(帧数)

    project.json 里面"showFPS": true, 改成 false 就行了... 调整帧率也在这里调整 或者是 同cocos2dx,cocos2d-js左下角的FPS ...

  4. mysql在Linux下

    Linux下查看mysql.apache是否安装,并卸载. 指令 ps -ef|grep mysql 得出结果 root               ?        :: /bin/sh /usr/ ...

  5. shell脚本的执行方式

    编写好的shell脚本(如:test),可以采取两种方式进行运行: 一. $ sh test 一般不采用这种调用方式,尤其不采用"sh<test"的调用方式,因为这种方式将禁 ...

  6. SQL Server 的表数据简单操作(表数据查询)

    --表数据查询----数据的基本查询-- --数据简单的查询--select * | 字段名[,字段名2, ...] from 数据表名 [where 条件表达式] 例: use 商品管理数据库 go ...

  7. prolog 规则

    规则 规则由几个互相依赖的简单句(谓词)组成.用来描述事实之间的依赖关系,如:因果关系,蕴含关系,对应关系 规则的实质就是存储起来得查询 其语法结构如下: head:-body head 为谓词的定义 ...

  8. MD5在java中的使用

    MD5是什么? MD5是message-digest algorithm 5(信息-摘要算法)的缩写,被广泛用于加密和解密技术上,它可以说是文件的"数字指纹".任何一个文件,无论是 ...

  9. oracle建立数据库连接

    除了全库拷贝,这个应该是oracle两个数据库之间进行数据迁移最快的方法了. CREATE PUBLIC DATABASE LINK zhengshi CONNECT TO 用户名 IDENTIFIE ...

  10. 第十五课:奇葩的元素节点iframe

    iframe一般用来加载一个页面,然后嵌入到主页面中.创建起来消耗资源,而且消耗连接数.但是它是一个物超所值的东西,可以实现无缝刷新,模拟onhashchange跨域,安全的加载第三方资源与广告,实现 ...