1. 块级元素(display: block)
1.1. 独占一行
1.2. 高度、宽度、行高、顶和底边距 可设置
1.3. 默认宽度 父容器100%

2. 内联元素(display: inline)
2.1 和其他元素同一行
2.2 高度、宽度、顶和底边距 不可设置
2.3 宽度是其包含的文字和图片的宽度，不可改变

3. 内联块状元素(display: inline-block)
3.1 和其他元素同一行
3.2 高度、宽度、行高、顶和底边距 可设置

4. absolute和float可改变display
position:absolute、float:left 或 float:right 会使元素变为 display: inline-bolck 显示
元素 默认宽度 不占满 父元素
可设置 width 和 height

css display 总结的更多相关文章

  1. CSS display:inline-block

    CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...

  2. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  5. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  6. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  7. CSS display：inline-block的元素特点：

    将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...

  8. CSS DISPLAY AND POSITIONING

    CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...

  9. CSS Display（显示）和Visibility（可见性）

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

  10. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

随机推荐

  1. 总结的js性能优化方面的小知识

    前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己 ...

  2. c# 监听文件夹动作

    static FileSystemWatcher watcher = new FileSystemWatcher(); /// <summary>        /// 初始化监听     ...

  3. [vijos1907][NOIP2014]飞扬的小鸟

    Description 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣告失败. ...

  4. 【BZOJ-1026】windy数 数位DP

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5230  Solved: 2353[Submit][Sta ...

  5. eclipse无法识别javax.servlet.*的问题

    这个问题对应的jar包为servlet-api.jar,默认jdk是没有这个包,需要在web容器上找到这个包,比如我用的是tomcat,那么可以在:“\Tomcat 7.0\lib\servlet-a ...

  6. asp.net生产环境和开发环境的错误日志包装策略

    对于错误日志的输出,我们借助web.config的两个标志位: <!--全局包装异常处理页面,只有在PageError和Application_Error做清除错误操作才可不跳转--> & ...

  7. 基本概率分布Basic Concept of Probability Distributions 4: Negative Binomial Distribution

    PDF version PMF Suppose there is a sequence of independent Bernoulli trials, each trial having two p ...

  8. HDU 5738 Eureka

    传送门 题目大意: 给出平面上的$n$个点,每个点有唯一的标号($\text{label}$),这$n$个标号的集合记作$S$,点可能重合.求满足下列条件的$S$的子集$T$的数目: 1. $|T|\ ...

  9. JS中的"=="转换规则

    number类型与string类型比较,string会转换为number类型 '' == '0' //false 0 == ''//true; 0 == '0'//true ' \t\r\n '==0 ...

  10. HTML5学习总结-01 开发环境和历史

    1 搭建HTML5开发环境 1 安装一款支持HTML5的浏览器 FireFox, Chrome 2 开发工具 SublineText, Eclipse, HBuilder, WebStorm 注:使用 ...