---恢复内容开始---

http://www.w3school.com.cn/cssref/pr_class_display.asp

所有主流浏览器都支持 display 属性，如IE，Firefox，Chrome，Safari，Opera；

如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

display 属性规定元素应该生成的框的类型。

css语法  display:value;

js语法  Object.style.display=value；

可能的值

部分属性详解：

1. block

特点：1）独占一行；

2）元素的高度，宽度，行高以及顶和底边距均可设置；

3）不设置宽度时，宽度撑满一行；

块级元素有：<div> , <p> , <h1> .. <h6> , <ol> , <ul> , <dl> , <table> , <address> , <blockquote> , <form> , <article> , <header> , <footer> , <nav> , <section> , <html> , <body> 等；

不支持样式：vertical-align；

2. inline

特点：1）和其他元素在一行；

2）内容撑开宽度，即元素的宽度就是它包含的文字或图片的宽度，不可改变；

3）宽高不可设置；

4）代码换行被解析成空格；

内联元素有：<a> , <span> , <br> , <i> , <em> , <strong> , <label> , <q> , <var> , <cite> , <code> , <area> , <del> , <label> , <map> , <mark> , <output> , <pre>  等；

不支持样式：background-position ；clear ；clip ；height | max-height | min-height ；width | max-width | min-width ；overflow ；text-align ；text-indent ；text-overflow；

3. inline-block

特点：1）不设置宽高时，内容撑开高度；

2）非独占一行；

3）可设置宽高；

4）代码换行被解析成空格；

标签：<audio> ，<button>，<canvas>，<embed>，<iframe>，<img>，<input>，<keygen>，<meter>，<object>，<progress>，<select>，<textarea>，<video>

不支持样式：clear ;

4. none

特点：隐藏元素并脱离文档流；

标签：<base>，<link>，<meta>，<title>，<datalist>，<dialog>，<param>，<script>，<source>，<style>

5. list-item

特点：1）不设宽度时，宽度撑满一行；

2）独占一行；

3）可设置宽高；

6. table

特点：1）不设置宽度时，宽度由内容撑开；

2）非独占一行；

3）支持宽高；

4）默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性；

7. table-cell

特点：1）不设置宽度时，宽度由内容撑开；

2）非独占一行；

3）支持宽高；

4）垂直对齐；

5）同级等高；

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

CSS display属性学习的更多相关文章

  1. css display属性详解

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

  2. CSS display 属性

    实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...

  3. CSS display属性的值及作用

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  4. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  5. Display属性学习总结

    HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...

  6. css display属性

    C:内联元素加上display:block后被块级化.块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块级元素排斥其他元素与其位于同一行,width和height起作用.因此,可以定义其宽 ...

  7. CSS display 属性详解

    定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...

  8. CSS 3 属性学习 —— 2. RGBA

    RGBA 是 CSS3 中用来控制颜色的单位,分别是 Red Green Blue 三原色和 Alpha 透明度的缩写. 也就是说该属性可以帮助我们在设置颜色的同时,也设置了其透明度. 其实就是 RG ...

  9. CSS 3 属性学习 —— 1. Gradient 渐变

    CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数:  <linear-gradient> = li ...

随机推荐

  1. CreateProcess

    #include <Windows.h> //WINBASEAPI //BOOL //WINAPI //CreateProcessW( //_In_opt_ LPCWSTR lpAppli ...

  2. C# 热敏打印机 小票打印机 打印图片

    最近一直在研究并口小票打印机打印图片问题,这也是第一次和硬件打交道,不过还好,最终成功了. 这是DEMO的窗体: 下面是打印所需要调用的代码: 因为我们这里主要是打印条形码和二维码,所以以条形码和二维 ...

  3. HDU 1506 Largest Rectangle in a Histogram【DP】

    题意:坐标轴上有连续的n个底均为1,高为h[i]的矩形,求能够构成的最大矩形的面积. 学习的别人的代码 @_@ 看底的坐标怎么找的看了好一会儿--- 记l[i]为矩形的底的左边的坐标,就将它一直向左扩 ...

  4. layero和index

    zIndex:layer.zIndex, success:function(index,layero){ //layero 为当前层的DOM对象 var zIndex = layer.index; $ ...

  5. django框架-DRF工程之认证功能

    1.在Rest framework中进行了一系列的封装,这个认证功能也是被封装到在DRF工程中的一种,想要使用,首先需要在配置文件中进行相应的配置 REST_FRAMEWORK = { ’DEFAUL ...

  6. Redis散杂记

    Redis是一款很火的KV模式的内存数据库,与众不同的特点: 1.数据存储在内存 内存的读取速度仅次于CPU的寄存器.各等级缓存,“英雄”自动敏捷属性,特点就是快.高效.因此不需要类似存储磁盘的数据库 ...

  7. 【BZOJ 1406】 [AHOI2007]密码箱

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] \(x^2%n=1\) \(x^2-1 = k*n\) \((x+1)*(x-1) % n == 0\) 设\(n=a*b\) 对于 ...

  8. java 项目 导入成功后jsp页面报错处理方法

    本人新导入一个maven项目可是jsp页面一直报错,我先按照网上的经验操作如下步骤: 在pom.xml配置文件中添加上javax.servlet的相关依赖: <dependency>  & ...

  9. _stat函数/struct stat 结构体使用笔记

    内容来自互联网,非原创,方便以后查看. 另,关于获取文件信息——_stat函数的使用详见 http://blog.csdn.net/frank_liuxing/article/details/1860 ...

  10. Node.js 博客实例（十）pv统计和留言统计

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={ ...