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

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. FPGA之阻塞赋值与非阻塞赋值

    Verilog语言中讲的阻塞赋值与非阻塞赋值,但从字面意思来看,阻塞就是执行的时候在某个地方卡住了,等这个操作执行完在继续执行下面的语句,而非阻塞就是不管执行完没有,我不管执行的结果是什么,反正我继续 ...

  2. 分库分表中间件Sharding-JDBC

    数据库分库分表从互联网时代开启至今,一直是热门话题.在NoSQL横行的今天,关系型数据库凭借其稳定.查询灵活.兼容等特性,仍被大多数公司作为首选数据库.因此,合理采用分库分表技术应对海量数据和高并发对 ...

  3. 优动漫PAINT-凌霄花画法

    再见小清新~这次教程教授的是凌霄花的画法!话说这个作者的花卉系列都很米粒啊~配色什么的,赞到没话说~ 教程是简单,呃.... 没有优动漫PAINT软件肿么办? 别着急,╭(╯^╰)╮ 小编给你送来了 ...

  4. 设置div内的内容不能被选中

    通过简单的css设置页面的文字无法被选定. <div class="select">我不能被选中复制</div> .select{ -webkit-user ...

  5. 微信小程序 刷新页面

    一 , 当前页面刷新 第一种方式: //pages 获取到当前页码数 然后执行当前页的onLoad const pages = getCurrentPages() ] perpage.onLoad() ...

  6. python+selenium进行简单验证码获取

    # _*_ coding:utf-8 _*_from PIL import Imagefrom selenium import webdriverimport pytesseractimport ti ...

  7. 紫书 例题 11-13 UVa 10735（混合图的欧拉回路）（最大流）

    这道题写了两个多小时-- 首先讲一下怎么建模 我们的目的是让所有点的出度等于入度 那么我们可以把点分为两部分, 一部分出度大于入度, 一部分入度大于出度 那么显然, 按照书里的思路,将边方向后,就相当 ...

  8. C语言程序设计：现代方法阅读笔记

    第二十六章 atexit函数允许用户“注册”在程序终止时要调用的函数:atexit(func); 在程序终止后,func函数会被自动调用 clock()函数可以计算程序运行时间 time函数返回当前的 ...

  9. 常用的pdf工具

    https://www.ilovepdf.com/zh-cn https://smallpdf.com/cn/compress-pdf https://www.pdf2go.com/zh/compre ...

  10. COGS——T 803. [USACO Hol10] 政党 || 1776: [Usaco2010 Hol]cowpol 奶牛政坛

    http://www.lydsy.com/JudgeOnline/problem.php?id=1776||http://cogs.pro/cogs/problem/problem.php?pid=8 ...