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. c++ 打印堆栈代码

    namespace google {namespace glog_internal_namespace_ {void DumpStackTraceToString(std::string* stack ...

  2. python---IO多路复用

    这里的IO是指网络IO python中通过select模块实现IO多路复用,select模块中有select.poll.epoll等方法 下面例子以select模块实现IO多路复用 仅仅只有IO多路复 ...

  3. SQL Server 的数据表简单操作

    --创建数据表--[use 要创建数据表的数据库名称go]create table 要创建的表名(字段名 数据类型[长度] [null | not null] [primary key],... .. ...

  4. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  5. javascript判断对象

    var assert = require('chai').assert; describe('Array', function() { describe('#indexOf()', function( ...

  6. MyEclipse 序列号生成代码

    根据程序运行提示输入用户名即可生成注册码 import java.io.*; public class MyEclipseGen { private static final String LL = ...

  7. bootstrap--小李子demo

    最近忙啊...看到各位冬鞋都在认真写博客,认真敲代码,认真工作,总觉得自己时间太少,总觉得时间不够,老了...... 进正题: 上次不知从哪里(忘了)下载了bootstrap的一些使用小demo,以后 ...

  8. 【工作笔记】BAT批处理学习笔记与示例

    BAT批处理学习笔记 一.批注里定义:批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD,这些命令统称批处理命令. 二.常见的批处理指令: 命令清单: 1.RE ...

  9. UML大战需求分析阅读笔记2

    全面深入理解客户的业务,才能帮助我们准确的把握客户的需要.而在理解客户业务的同时,我们往往需要做业务流程再造(BPR:Business Process Reengineering)的工作.BPR简单说 ...

  10. MongoDB安装启动服务

    这里主要是针对解决出现的问题. 1.MongoDB 下载地址http://www.mongodb.org/downloads 下载之后可以自定义安装路径,我安装在了D盘下. 然后在环境变量中添加: M ...