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

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. 关于如何让cell一直保持选中？

    在M上 1.cell的展示,一直都是依靠数据源的支持.所以,必须要在数据源里面新增bool,默认为false 在V上 2.cell的setModel方法里面,将数据源的新增bool赋值为cell的是否 ...

  2. （转载）自定义View——弹性滑动

    滑动是Android开发中非常重要的UI效果,几乎所有应用都包含了滑动效果,而本文将对滑动的使用以及原理进行介绍. 一.scrollTo与ScrollBy View提供了专门的方法用于实现滑动效果,分 ...

  3. 【原创】Apache和基于虚拟主机的Tomcat集群方案

    最近建设了北京某政府机构的网站,网站前段使用Apache做负载均衡,后端使用Tomcat做的集群,基于虚拟主机的方式访问,并且实现了静态资源和动态资源的分离. 开始的建设方案有两种,一种是使用apac ...

  4. AJAX和JSON实际应用

    实现功能:登录验证 一.因为我是在SpringMVC框架上写的,首先得添加依赖: <dependencies> <!-- 用来测试的依赖 --> <dependency& ...

  5. C# treeview绑定

    protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            ...

  6. 【BZOJ4487】【JSOI2015】染色问题

    题意: 棋盘是一个n×m的矩形,分成n行m列共n*m个小方格.现在萌萌和南南有C种不同颜色的颜料,他们希望把棋盘用这些颜料染色,并满足以下规定:  1.  棋盘的每一个小方格既可以染色(染成C种颜色中 ...

  7. C语言的常用printf打印占位符%d, %u, %f, %s, %c, %o, %x

    占位符含义及用法 代码: #include <stdio.h> int main(int argc, char const *argv[]) { , b = -; // 默认10进制赋值 ...

  8. js递归获取html页面所有标签

    js原生递归获取,直接源码 : <script> var child = document.children; var arr = [];//用来存放获取到的所有的标签 function ...

  9. Hellow BeiJing

    DAY1: (#^.^#),今天是9.23日,离出发去北京还有7天,好像一切还是正常的样子. 先发一张图,这就是我们机房的日常: 但是o(￣ヘ￣o#)我听着我耳边的cys童鞋的rap就感觉事情仿佛没辣 ...

  10. Oracle rownum影响运行计划

    今天调优一条SQL语句,因为SQL比較复杂,用autotrace非常难一眼看出哪里出了问题,直接上10046. SELECT AB.* FROM (SELECT A.*, rownum RN FROM ...