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. git初体验（三）git分支

    分支的理念就是分身,就像孙悟空拔出猴毛变出很多跟自己一模一样的猴子,然后每个猴子做自己的事情互不干涉,等到所有猴子做完之后,猴子集合来合并劳动成果,然后悟空就把那些猴子猴孙门统统收回了. 你创建了一个 ...

  2. PHP读取XML

    books.xml文件: 代码 <books> <book> <author>Jack Herrington</author> <title> ...

  3. 简单的cookie使用

    <html><head><script type="text/javascript">function getCookie(c_name){if ...

  4. win7安装nodejs

    刚刚在网上看到Cheerio,为服务器特别定制的,快速.灵活.实施的jQuery核心实现,适合各种Web爬虫程序. 看了下,cheerio 是nodejs的抓取页面模块 于是决定先学习下nodejs了 ...

  5. Leetcode Power of two, three, four

    Given an integer, write a function to determine if it is a power of two. Hint: Could you solve it in ...

  6. CMMI3标准文档模板大全

    链接:http://pan.baidu.com/s/1c2cGX8W 密码:ulns

  7. 浅析基本AI五子棋算法

    五子棋是所有棋类博弈中比较简单的了,这里介绍的也只是一种非常基本的AI策略.其实,包括之前的AI贪吃蛇,感觉这两个AI其实体现的都是一种建模思想,把一个现实中的问题模型化,抽象化,得到其一般特征,再设 ...

  8. 上班遇到的——关于Web安全

    恩只是流水账,内容写得可能比较随性,权当记录自己的成长:-D 今天经理特地开会跟我们讲了一下关于web安全的东西,SQL注入.文本编辑器.上传.本身程序权限管理漏洞 感觉好高级,做安全的人厉害,黑客也 ...

  9. CF 84D Doctor（二分）

    题目链接: 传送门 Doctor time limit per test:1 second     memory limit per test:256 megabytes Description Th ...

  10. CTO、技术总监、首席架构师的区别

    2016年11月30日13:22:26[转] CTO.技术总监.首席架构师的区别 提升自已的能力,比如专业技术,行业发展趋势,技术发展趋势,协调能力,组织能力,管理能力等[技术总监] 需要从技术总监和 ...