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

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. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

  2. BZOJ 2127 二元关系

    题意: 思路: 先把所有的值加起来 最小割割哪儿 就代表那个地方不选 一减 剩下的就是 最大值了 //By SiriusRen #include <cstdio> #include < ...

  3. KafkaZookeeper1-整体介绍

    版本 1.0.0 概述 本文介绍了 kafka 中 zookeeper 的整体实现. 最初 kafka 使用同步的方式访问 zookeeper.但是对于 partition 个数很多的cluster, ...

  4. CSS3的常用属性（二）

    边框 边框圆角 border-radius: 100px 每个角可以设置两个值,x和y 补充: 可分别设置长,短半径,以“/”进行分隔,遵循顺时针的顺序,“/”之前为横轴半径,“/”之后为纵轴半径,如 ...

  5. Android RecyclerView 设置item间隔的方法

    RecyclerView大家常用,但是如何给加载出来的item增加间隔很多人都不知道,下面是方法,直接上代码了: LinearLayoutManager layoutManager = new Lin ...

  6. oracle11g文件系统库迁移到ASM库上面

    最近把oracle11g的文件系统库迁移到了asm库上面. 迁移过程大致如下: 最少停机方案: 实例joinpay02 | |数据库joinpay02 需要改动的文件: 数据文件 控制文件 redo文 ...

  7. SpringBoot学习笔记(15)----SpringBoot使用Druid

    直接访问Druid官网wiki,有详细教程,地址如下: SpringBoot支持Druid地址:https://github.com/alibaba/druid/tree/master/druid-s ...

  8. 多任务-进程之PID

    1.进程pid,如何在程序中获取我们的进程号,从而查看当前的进程 # -*- coding:utf-8 -*- from multiprocessing import Process import o ...

  9. How Javascript works (Javascript工作原理) (七) WebAssembly 对比 JavaScript 及其使用场景

    个人总结: 1.webworkers实现了用多线程浏览器来进行多线程操作js的能力. 2.web workers不能操作dom,window,document等对象,一般用于cpu计算型的任务.   ...

  10. LAMP环境搭建备忘 -- MariaDB 安装（三）

    因为 MySQL 的一些原因,在 Linux 平台上的开源数据库渐渐被 MariaDB 取代. MariaDB 安装命令如下图 安装成功后,接下来就启动这个数据库服务 我们还需要对数据库做一些初始化的 ...